Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

ynwd
ynwd

Posted on

     

UseEffect React Testing

This is a modification of theApp.tsx andApp.test.tsxCRAs. It usesuseEffect to get the text from the Golang API.

.├── cloudbuild.yaml├── cmd│   ├── build│   │   ├── index.gohtml│   │   └── main.go│   └── main.go├── firebase.json├── go.mod├── internal│   ├── app.go│   └── app_test.go├── package.json├── serverless.go└── web    └── home        ├── craco.config.js        ├── package.json        ├── public        ├── src        │   ├── App.css        │   ├── App.test.tsx        │   ├── App.tsx        │   ├── index.css        │   ├── index.tsx        │   ├── logo.svg        │   ├── react-app-env.d.ts        │   ├── reportWebVitals.ts        │   └── setupTests.ts        ├── tailwind.config.js        └── tsconfig.json
Enter fullscreen modeExit fullscreen mode

Backend

Golang API

packageinternalimport("context""github.com/fastrodev/fastrex")funcHandler(reqfastrex.Request,resfastrex.Response){res.Send("The best interface is no interface")}funcCreateApp()fastrex.App{ctx:=context.Background()app:=fastrex.New()app.Ctx(ctx)app.Get("/api",Handler)returnapp}
Enter fullscreen modeExit fullscreen mode

Entry point

packageserverlessimport("net/http""github.com/ynwd/mnrp/internal")funcMain(whttp.ResponseWriter,r*http.Request){internal.CreateApp().Serverless(true).ServeHTTP(w,r)}
Enter fullscreen modeExit fullscreen mode

Frontend

App.tsx

importReact,{useEffect,useState}from'react';importlogofrom'./logo.svg';import'./App.css';functionApp(){const[value,setValue]=useState("");useEffect(()=>{asyncfunctiongetText(){letresponse=awaitfetch('/api')constd=awaitresponse.text()setValue(d)}getText()},[value]);return(<divclassName="App"><headerclassName="App-header"><imgsrc={logo}className="App-logo"alt="logo"/><h3>{value}</h3></header></div>);}exportdefaultApp;
Enter fullscreen modeExit fullscreen mode

App.test.tsx

importReactfrom'react';import{rest}from'msw';import{setupServer}from'msw/node';import{render,screen}from'@testing-library/react';importAppfrom'./App';constserver=setupServer(rest.get('/api',async(req,res,ctx)=>{returnres(ctx.text("The best interface is no interface"));}));beforeAll(()=>server.listen());afterEach(()=>server.resetHandlers());afterAll(()=>server.close());test('loads and displays greeting',async()=>{render(<App/>);constlinkElement=awaitscreen.findByText('The best interface is no interface');screen.debug()expect(linkElement).toBeInTheDocument();});
Enter fullscreen modeExit fullscreen mode

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

TypeScript & Serverless
  • Joined

More fromynwd

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp