{"id":3030,"date":"2024-02-02T11:45:17","date_gmt":"2024-02-02T14:45:17","guid":{"rendered":"https:\/\/beon.tech\/blog\/?p=3030"},"modified":"2026-04-06T14:24:35","modified_gmt":"2026-04-06T17:24:35","slug":"react-testing-library","status":"publish","type":"post","link":"https:\/\/beon.tech\/blog\/react-testing-library\/","title":{"rendered":"Unit Testing 101 With React Testing Library"},"content":{"rendered":"\n

Frontend development relies heavily on unit testing to verify that different components of the codebase work correctly. This article will delve into the fundamental principles of unit testing in a ReactJS application, with a specific emphasis on using React Testing Library to test components, context API, custom hooks, and especially user interactions. Additionally, we will see the potential integration of unit tests within the CI\/CD pipeline and underscore the significance of test coverage reporting.<\/p>\n\n\n\n

Benefits of unit testing in frontend development\u00a0<\/strong><\/h2>\n\n\n\n

Unit testing plays a vital role in improving code quality, catching bugs early in the development process, and facilitating a test-driven development approach. With React Testing Library, developers can write tests that closely resemble how users interact with the application, leading to more robust and maintainable code. <\/p>\n\n\n\n

Understanding the React Testing library <\/strong><\/h2>\n\n\n\n

React Testing Library<\/a> is a popular testing utility for React that encourages testing components in a way that resembles user behavior. When testing React components, it focuses on testing the rendered output rather than implementation details, resulting in tests that are more resilient to changes in the component’s internal structure. <\/p>\n\n\n\n

Choosing tools: Vitest and Jest <\/strong><\/h3>\n\n\n\n

When we are setting up the testing tools for our application, it’s common to think on what tool we will use, Jest or another one? Recently Vitest is getting more and more popular. It’s a testing tool, similar to Jest, built on top of Vite and offering a very attractive alternative to Jest for several reasons.<\/p>\n\n\n\n

Vitest<\/a> prioritizes speed and developer experience, providing faster and more performant unit tests. It seamlessly integrates with the Jest API and ecosystem libraries, enabling a smooth transition for projects already using Jest. Plus it includes some custom functionalities for your test suites. <\/p>\n\n\n\n

Writing tests for Context API and custom hooks <\/strong><\/h3>\n\n\n\n

In modern React applications, Context API and custom hooks play a crucial role in managing state and encapsulating reusable logic. With React Testing Library, we can effectively test components that consume context and hooks by simulating their behavior and testing the resulting output. <\/p>\n\n\n\n

Testing components with Context API <\/strong><\/h4>\n\n\n\n

When testing components that consume a context, it’s essential to create a testing environment that provides the necessary context values. This can be achieved using the Provider component from the relevant context. Look at the example below: <\/p>\n\n\n\n

\/\/ Sample test for a component consuming context \n\nimport { render } from '@testing-library\/react'; \n\nimport { UserContext, UserProvider } from '.\/UserContext'; \n\ntest('displays username from context', () => { \n\n render( \n\n <UserProvider value={{ username: 'Bruno' }}> \n\n <UserProfile \/> \n\n <\/UserProvider> \n\n );                                                                                  \n\n \/\/ Assertions to validate the rendering of the username }); <\/code><\/code><\/pre>\n\n\n\n
Testing custom hooks <\/strong><\/h4>\n\n\n\n
For testing custom hooks, it’s important to focus on the behavior and output of the hook under certain conditions. This can be done by invoking the custom hook within the testing environment and asserting the expected behavior. Look at the example below: <\/p>\n\n\n\n
\/\/ Sample test for a custom hook \n\nimport { renderHook } from '@testing-library\/react-hooks'; import { useCounter } from '.\/useCounter'; \n\ntest('increments counter value', () => { \n\nconst { result } = renderHook(() => useCounter());  result.current.increment(); \n\nexpect(result.current.count).toBe(1);                                                \n\n}); <\/code><\/code><\/pre>\n\n\n\n
It also requires the library @testing-library\/react-hooks <\/p>\n\n\n\n
Mocking dependencies and APIs with Vitest<\/strong><\/h3>\n\n\n\n
In Vitest, mocking modules and APIs can be achieved using utility functions provided by the vi helper. The vi.mock function substitutes all imported modules from a specified path with another module, enabling the controlled replacement of dependencies for testing purposes. <\/p>\n\n\n\n
\/\/ Mocking a module using Vitest \n\nvi.mock('.\/path\/to\/module.js', async (importOriginal) => {  const mod = await importOriginal(); \n\n return { \n\n ...mod, \n\n namedExport: vi.fn(), \/\/ Replace the namedExport with a moc  };                     \n\n}); <\/code><\/code><\/pre>\n\n\n\n
Asserting with React Testing library <\/strong><\/h3>\n\n\n\n
As mentioned before, we can do specific assertions using RTL aiming to simulate the user behavior, here are some assertion examples:<\/p>\n\n\n\n
\/\/ Asserting that a text is rendered in the document \n\nimport React from 'react'; \n\nimport { render } from '@testing-library\/react'; \n\nimport MyComponent from '.\/MyComponent'; \n\ntest('renders MyComponent', () => { \n\nconst { getByText } = render(<MyComponent \/>);  const textElement = getByText('Hello, World!');  expect(textElement).toBeInTheDocument(); \n\n}); \n\n\/\/ Asserting conditional rendering \n\nimport React from 'react'; \n\nimport { render } from '@testing-library\/react'; \n\nimport ConditionalComponent from '.\/ConditionalComponent'; \n\ntest('renders based on condition', () => { \n\nconst { getByText, queryByText } = render(<ConditionalComponen  const visibleTextElement = getByText('Visible Content');  const hiddenTextElement = queryByText('Hidden Content');  expect(visibleTextElement).toBeInTheDocument();  expect(hiddenTextElement).toBeNull(); \n\n}); \n\n\/\/ Form validations \n\nimport React from 'react'; \n\nimport { render, fireEvent } from '@testing-library\/react'; import LoginForm from '.\/LoginForm'; \n\ntest('submits form with valid input', () => { \n\nconst { getByLabelText, getByText } = render(<LoginForm \/>);  const emailInput = getByLabelText('Email');\n\nconst passwordInput = getByLabelText('Password');  const submitButton = getByText('Submit'); \n\nfireEvent.change(emailInput, { target: { value: 'user@example  fireEvent.change(passwordInput, { target: { value: 'password12  fireEvent.click(submitButton); \n\n \/\/ Validate the form submission result \n\n}); <\/code><\/code><\/pre>\n\n\n\n
The importance of CI\/CD integration <\/strong><\/h2>\n\n\n\n
While we won’t delve into the specifics of setting up a CI\/CD pipeline for testing in this article, it’s important to note that integrating unit tests into the development workflow can significantly improve code quality. <\/p>\n\n\n\n
Additionally, incorporating test coverage reporting into the CI\/CD pipeline allows developers to track the percentage of code covered by tests, providing valuable insights into the overall quality of the codebase. <\/p>\n\n\n\n
Key Takeaways<\/strong><\/h2>\n\n\n\n