// this is just a little hack to silence a warning that we'll get until we// upgrade to 16.9: https://github.com/facebook/react/pull/14853constoriginalError=console.errorbeforeAll(()=>{console.error=(...args)=>{if(/Warning.*notwrappedinact/.test(args[0])){return}originalError.call(console, ...args)}})afterAll(()=>{console.error=originalError})

// hidden-message.jsimportReactfrom'react'// NOTE: React Testing Library works with React Hooks _and_ classes just as well// and your tests will be the same however you write your components.functionHiddenMessage({children}){const[showMessage,setShowMessage]=React.useState(false)return(<div><labelhtmlFor="toggle">Show Message</label><inputid="toggle"type="checkbox"onChange={e=>setShowMessage(e.target.checked)}checked={showMessage}/>{showMessage ? children : null}</div>)}exportdefaultHiddenMessage// __tests__/hidden-message.js// these imports are something you'd normally configure Jest to import for you// automatically. Learn more in the setup docs: https://testing-library.com/docs/react-testing-library/setup#cleanupimport'@testing-library/jest-dom/extend-expect'// NOTE: jest-dom adds handy assertions to Jest and is recommended, but not requiredimportReactfrom'react'import{render,fireEvent}from'@testing-library/react'importHiddenMessagefrom'../hidden-message'test('shows the children when the checkbox is checked',()=>{consttestMessage='Test Message'const{queryByText, getByLabelText, getByText}=render(<HiddenMessage>{testMessage}</HiddenMessage>,)// query* functions will return the element or null if it cannot be found// get* functions will return the element or throw an error if it cannot be foundexpect(queryByText(testMessage)).toBeNull()// the queries can accept a regex to make your selectors more resilient to content tweaks and changes.fireEvent.click(getByLabelText(/show/i))// .toBeInTheDocument() is an assertion that comes from jest-dom// otherwise you could use .toBeDefined()expect(getByText(testMessage)).toBeInTheDocument()})

// login.jsimportReactfrom'react'functionLogin(){const[state,setState]=React.useReducer((s,a)=>({...s, ...a}),{resolved: false,loading: false,error: null,})functionhandleSubmit(event){event.preventDefault()const{usernameInput, passwordInput}=event.target.elementssetState({loading: true,resolved: false,error: null})window.fetch('/api/login',{method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({username: usernameInput.value,password: passwordInput.value,}),}).then(r=>r.json()).then(user=>{setState({loading: false,resolved: true,error: null})window.localStorage.setItem('token',user.token)},error=>{setState({loading: false,resolved: false,error: error.message})},)}return(<div><formonSubmit={handleSubmit}><div><labelhtmlFor="usernameInput">Username</label><inputid="usernameInput"/></div><div><labelhtmlFor="passwordInput">Password</label><inputid="passwordInput"type="password"/></div><buttontype="submit">Submit{state.loading ? '...' : null}</button></form>{state.error ? <divrole="alert">{state.error.message}</div> : null}{state.resolved ? (<divrole="alert">Congrats! You're signed in!</div>) : null}</div>)}exportdefaultLogin// __tests__/login.js// again, these first two imports are something you'd normally handle in// your testing framework configuration rather than importing them in every file.import'@testing-library/jest-dom/extend-expect'importReactfrom'react'import{render,fireEvent}from'@testing-library/react'importLoginfrom'../login'test('allows the user to login successfully',async()=>{// mock out window.fetch for the testconstfakeUserResponse={token: 'fake_user_token'}jest.spyOn(window,'fetch').mockImplementationOnce(()=>{returnPromise.resolve({json: ()=>Promise.resolve(fakeUserResponse),})})const{getByLabelText, getByText, findByRole}=render(<Login/>)// fill out the formfireEvent.change(getByLabelText(/username/i),{target: {value: 'chuck'}})fireEvent.change(getByLabelText(/password/i),{target: {value: 'norris'}})fireEvent.click(getByText(/submit/i))// just like a manual tester, we'll instruct our test to wait for the alert// to show up before continuing with our assertions.constalert=awaitfindByRole('alert')// .toHaveTextContent() comes from jest-dom's assertions// otherwise you could use expect(alert.textContent).toMatch(/congrats/i)// but jest-dom will give you better error messages which is why it's recommendedexpect(alert).toHaveTextContent(/congrats/i)expect(window.localStorage.getItem('token')).toEqual(fakeUserResponse.token)})