Exploring Effective Testing with @testing-library/react Functions

1. render()

The render() is used to render React components within your test case. It will take a React component as input and render it into a DOM.

It allows you to interact with and make assertions about the rendered component in your tests.

Example

import { render } from '@testing-library/react';

it('should render the compoent', () => {
  
  const {baseElement} = render(<Component />);
  
  expect(baseElement).toBeTruthy();
  
});

2. screen

The screen is used to find elements within the rendered component by their text, testId, labels, roles, and more.

It provides a set of methods to interact with and assert on elements rendered by.

Example

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

it('should render hello text successfully', () => {
  
  render(<Component />);
  
  expect(screen.getByText('hello')).toBeInTheDocument();
  
});

3. act()

act() Used to prepare a component for assertions, wrap the code rendering it, and perform updates inside an act() call.

This will ensure that all updates to the state and props of a component are processed synchronously before making assertions in your tests.

When to use act()

• Warnings and Errors: In the component, if you perform state updates outside of a React event handler or lifecycle method it will give the console warning or errors. To avoid that you can wrap your code into act.
• Asynchronous Flow: In the component, if there are any apis or redux story dispatch at the time of loading the component, then you can bind that inside the act(). This will help to ensure that the test waits for these asynchronous actions can be completed before the assertions.

Example

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

it('should render hello text on clicking of button', () => {
  
  render(<Component />);
  
  act(() => {
    fireEvent.click(screen.getByTestId('get-data-btn'));
  });
  expect(screen.getByText('hello')).toBeInTheDocument();
  
});

4. waitFor()

Then waitFor() is used to wait for asynchronous actions, such as API integration, and data fetching.

It will be useful for testing components that involve asynchronous behavior, such as data fetching, state updates, or animations.

Example

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

it('should render hello text on clicking of button', async () => {
  
  render(<Component />);
  
  act(() => {
    fireEvent.click(screen.getByTestId('get-data-btn'));
  });

  await waitFor(() => { 
    expect('hello').toBeInTheDocument();
  })
  
});

5. userEvent()

The userEvent() is used for testing user interactions such as typing text into input fields, clicking buttons, or navigating or selecting the elements.

It will be used for high-level API integration. It’s generally slower than fireEvent().

Example

import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

it('should handle function call with userEvent', () => {
  
  const clickHandler = jest.fn();
  render(<button onClick={handleClick}>Click me</button>);
  const button = screen.getByText('click');
  
  act(()=> {
    userEvent.click(button);
  }

  expect(clickHandler).toHaveBeenCalled();

});

6. fireEvent()

The fireEvent is used to simulate DOM events on elements within your components.

It is used to trigger events like clicks, input changes, form submissions, and more, simulating user interactions to test the behavior of your components.

It is faster then userEvent().

Example

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

it('should handle function call with fireEvent', () => {
  
  const clickHandler = jest.fn();
  render(<button onClick={handleClick}>Click me</button>);
  const button = screen.getByText('click');
  
  act(()=> {
    fireEvent.click(button);
  }

  expect(clickHandler).toHaveBeenCalled();

});

7. debug()

The debug() used to inspect or debug the state and structure of the component. It will be useful for debugging and understanding the execution within your components during testing.

It will be mostly useful to identify the issue of failing the test case or inspect the issue.

Example

import { render } from '@testing-library/react';

it('should render the compoent', () => {
  
  const {baseElement} = render(<Component />);

  debug();
  
  expect(baseElement).toBeTruthy();
  
});

Thank You for reading this article. Hope this article will help you Exploring Effective Testing with @testing-library/react Functions.