Vijay Thirugnanam

Introduction to React testing library

Vijay Thirugnanam's photo
Vijay Thirugnanam
·

1 min read

React testing library is awesome and fun to use. It allows rendering a test component into DOM, then querying an element within it and make assertions on that element.

Here is a Hello world test using Testing library.

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

test('Checks the heading', () => {
  render(<App />);
  const headingText = screen.getElementByRole('heading', /hello world/i);
  expect(headingText).toBeInTheDocument();
});

The above basic test renders the App component. It retrieves a heading element in the DOM with text within it that contains the string 'hello world' and asserts that the element is in the DOM. A simple component like the below will pass the test.

export default function App() {
  return (
    <h1>Hello World</h1>
  );
}

To learn more about React testing library, I have written an elaborate article here . Do comment about the article. Or if something is not clear, write to me, and I will be glad to clarify.

React