What are some examples of using React Testing Library?

What are some examples of using React Testing Library?

React Testing Library is a popular tool for testing React components. Here are a few examples:

1. Rendering a Component: You can render a component using render(<MyComponent />) and then query it using methods like getByText or getByRole.

2. Simulating Events: You can simulate user interactions, such as clicking a button, using fireEvent.click(buttonElement).

3. Testing Asynchronous Code: Use waitFor to test components that rely on asynchronous data fetching.

4. Snapshot Testing: You can create a snapshot of your component's rendered output using toMatchSnapshot().

Would you like to see a specific example in code?

Yes, can you show me a code example for rendering a component?

Sure! Here's a simple example:

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders MyComponent', () => {
  render(<MyComponent />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

In this example, we render MyComponent and check if it contains the text 'learn react'. Would you like to know more about any specific testing methods?

What about testing user interactions?

For testing user interactions, you can use the fireEvent utility. Here's an example:

import { render, screen, fireEvent } from '@testing-library/react';
import MyButton from './MyButton';

test('button click changes text', () => {
  render(<MyButton />);
  const button = screen.getByRole('button');
  fireEvent.click(button);
  expect(screen.getByText(/clicked/i)).toBeInTheDocument();
});

In this case, we simulate a button click and check if the text changes accordingly. Would you like to explore more examples?