// Wait for loading to complete expect(screen.getByText(/loading/i)).toBeInTheDocument()
// Navigate to profile await userEvent.click(screen.getByRole('link', { name: /profile/i })) expect(screen.getByText(/user profile/i)).toBeInTheDocument()
"The more your tests resemble the way your software is used, the more confidence they can give you." react testing library
If you are using Create React App, it is already installed. If not:
There are two ways to simulate user actions. userEvent is the modern, recommended way. // Wait for loading to complete expect(screen
A standard test follows this pattern: .
code example of a specific test scenario, such as a login form or an API fetch? AI can make mistakes, so double-check responses Copy Creating a public link... You can now share this thread with others Good response Bad response 24 sites Master React Testing with Jest and React Testing Library Aug 1, 2023 — A standard test follows this pattern:
test('useCounter hook increments', () => { const { result } = renderHook(() => useCounter(0))
// Wait for data to appear const userName = await screen.findByText(/John Doe/i) expect(userName).toBeInTheDocument() })
// Priority order (what users see/experience) getByRole() // Button, link, heading, etc. getByLabelText() // Form inputs getByPlaceholderText() getByText() // Paragraphs, spans getByDisplayValue() // Current form values getByAltText() // Images getByTitle() getByTestId() // Last resort, data-testid attributes