🧪 React Testing: Tips That Actually Work

// 👎 Don't do this
test('component sets loading state', () => {
  const wrapper = shallow(<UserProfile />);
  expect(wrapper.state('isLoading')).toBe(true);
});

// 👍 Do this instead
test('shows loading state to users', () => {
  render(<UserProfile />);
  expect(screen.getByText('Loading...')).toBeInTheDocument();
});

// 👎 Testing implementation details
test('updates email state', () => {
  const wrapper = shallow(<SignupForm />);
  wrapper.find('input').simulate('change');
  expect(wrapper.state('email')).toBe('[email protected]');
});

// 👍 Testing user behavior
test('lets user submit their email', () => {
  const handleSubmit = jest.fn();
  render(<SignupForm onSubmit={handleSubmit} />);

  // Type like a real user would
  userEvent.type(
    screen.getByRole('textbox', { name: /email/i }), 
    '[email protected]'
  );

  // Click like a real user would
  userEvent.click(screen.getByRole('button', { name: /submit/i }));

  expect(handleSubmit).toHaveBeenCalledWith('[email protected]');
});

// 👎 Over-mocking
jest.mock('./UserAvatar');
jest.mock('./UserBio');
jest.mock('./UserStats');

// 👍 Only mock what's necessary (like APIs)
const server = setupMSW([
  rest.get('/api/user', (req, res, ctx) => {
    return res(ctx.json({ name: 'John' }))
  })
]);

// 👎 Complex setup
const wrapper = mount(
  <Provider store={store}>
    <ThemeProvider theme={theme}>
      <HookComponent />
    ThemeProvider>
  Provider>
);

// 👍 Just test the logic
const { result } = renderHook(() => useCounter());
act(() => {
  result.current.increment();
});
expect(result.current.count).toBe(1);

// 👎 Testing every little thing
test('renders header');
test('renders subheader');
test('renders each list item');
test('renders footer');

// 👍 Test important flows
test('lets user complete checkout flow', async () => {
  render(<CheckoutFlow />);

  await userEvent.type(screen.getByLabelText(/card/i), '4242...');
  await userEvent.click(screen.getByText(/pay/i));

  expect(screen.getByText(/thanks for your order/i)).toBeInTheDocument();
});

// 👎 easy-to-break selectors
getByTestId('submit-button')
querySelector('.submit-btn')

// 👍 Resilient selectors
getByRole('button', { name: /submit/i })
getByLabelText(/email/i)
getByText(/welcome/i)

// 👍 Handle common async patterns
test('shows loading and then content', async () => {
  render(<UserProfile />);

  // Check loading state
  expect(screen.getByText(/loading/i)).toBeInTheDocument();

  // Wait for data
  await screen.findByText('John Doe');

  // Loading should be gone
  expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
});

// 👍 Don't forget error handling
test('handles API errors gracefully', async () => {
  server.use(
    rest.get('/api/user', (req, res, ctx) => {
      return res(ctx.status(500))
    })
  );

  render(<UserProfile />);

  await screen.findByText(/something went wrong/i);
  expect(screen.getByRole('button', { name: /try again/i })).toBeInTheDocument();
});