Please enable JavaScript.
Coggle requires JavaScript to display documents.
TESTING - Coggle Diagram
TESTING
QUERY
screen.getBy
Role(..)
<role>
button
textbox
[{name: ".."}]
label
For-FormElem
text
For-Button
aria-label
For-AnyElem
PlaceholderText(..)
LabelText(..)
Text(..)
SETUP
Using
create-react-app
Libraries
jest
react-testing-library
setupTests.js
Import
@testing-library/<>
jest-dom
jest-dom/extend-expect
package.json
scripts.test
react-scripts test
--watchAll
--coverage
--detectOpenHandles
jest.coverageThreshold
.global.lines
80
STRUCTURE
Test
Component
Renders
With
Props
State
Changes
Reacts
User
Interactions
Not-Test
Actual
Implmentation
Sorting-Logic
3rd-Party
Libraries
Steps
Render
Component
Get-Element
Simulate
Interaction
Assertion
Write
STATE
Updates
Do-Action
await act(..)
async () => {..}
await userEvent.click(..)
screen.getByText(..)
Check
ListLength
expect(..).toBe(4)
screen.getAllByTestId(..).length
WRITING
Covering
All-Branches
Use-Different
MockData
Test-Funcs
Create
Folder
__tests__
In-Folder
Containing
Component
element.test.jsx
Import
@testing-library/react
{ render
screen }
Element
test(...)
"Elem renders.."
() => {..}
render(<Element />)
const elem =
screen.getByText(..)
/first test/
expect(elem)
.toBeInTheDocumen()
MOCK-DATA
Declare
In-Test-File
mockData = [..]
Use
In-Render
render(<Elem data={mockData} />)
INTERACTIONS
Install
--save-dev
@testing-library/user-event
onClick
test(...)
"click handler called"
async () => {..}
const mockHandleClick
= jest.fn()
render(..)
<Element ../>
handleClick={mockHandleClick}
await userEvent.click(...)
screen.getByText(..)
/user@gmail.com
/
expect(mockHandleClick)
.toHaveBeenCalled()
API-CALLS
Mocking
Function
const mockFetchData =
jest.spyOn(service, "FetchData")
.mockImplementation(..)
async () => {..}
return
[{..}]
name: 'kunal'
Waiting
Async-Operation
await waitFor(() => {..})
expect(screen.getByText(..))
.toBeInDoc()