Checkpoint: Testing the UI

Five questions on this section. Answer all of them, then see your score and why each answer is right or wrong.

The form shows validation errors in <p role="alert">Amount must be greater than zero</p>. Which query fits best?

screen.getByRole('alert')
container.querySelector('.error-text')
screen.getByTestId('amount-error')
screen.getByDisplayValue('Amount must be greater than zero')

load resolves with { Ben: -500 }. This test fails with “Unable to find an element with the text”. What is the fix?

JSX

test('shows balances', () => {
  render(<BalancePanel loadBalances={load} />);
  expect(screen.getByText('Ben owes $5.00')).toBeInTheDocument();
});

Wrap render in waitFor.
Raise Vitest’s test timeout.
Make the test async and use expect(await screen.findByText('Ben owes $5.00')).toBeInTheDocument().
Use screen.queryByText('Ben owes $5.00') instead.

Component tests use MSW with server.listen({ onUnhandledRequest: 'error' }). A refactor accidentally changes the request URL from /groups/:id to /group/:id. What happens?

The tests pass, because MSW answers every request with an empty 200.
The tests fail, because the request matches no handler and unhandled requests are errors.
MSW silently forwards the request to the real network.
Vitest skips the affected tests.

Which use of waitFor is appropriate?

await waitFor(() => user.click(screen.getByRole('button', { name: 'Save' })))
await waitFor(() => screen.findByText('Saved'))
await waitFor(() => {})
await waitFor(() => expect(onSave).toHaveBeenCalledTimes(1))

ExpenseList has a “Hide settled” checkbox. What’s the best test for it?

Click the checkbox with user-event and assert which list items are still on screen.
Assert that useState was called with false initially.
Take a snapshot before and after clicking.
Call the component as a function and inspect the returned JSX.

5 questions unanswered