React+Vitest to write testable components, common problems record.

Hi there, my name is Fupeng Wang.

I am a senior full-stack engineer, and author of a 17.5k open-source project, PMP. Now I am developing a Notion-style knowledge base
HuashuiAI including AI writing and collaboration, using React Nextjs and Supabase.

In this article, I will share how React + Vitest to write testable components, and record some common problems I encountered

i18n

The HuashuiAI project supports i18n international multilingual development using next-intl, I will share it the next articles.

When conducting component unit testing, it is necessary to simulate the use of next-intl and wrap the target component with a provider.

This outer provider component requires passing in message and locale, as shown in the following figure

DOM Events

You can use fireEvent in @testing-library/react to simulate DOM events https://testing-library.com/docs/dom-testing-library/api-events

For example, click events, change events modify input values, and even simulate selecting files

You can also use waitFor to handle asynchronous processing https://testing-library.com/docs/dom-testing-library/api-async#waitfor

Mock Global Variables

Using vi.stubGlobal in Vitest can simulate global variables and APIs https://vitest.dev/api/vi.html#vi-stubglobal

It is also common to use vi.fn() to simulate functions.

Mock API Request

Vitest cannot directly simulate APIs, but it provides other ways in the documentation https://vitest.dev/guide/mocking#requests

According to the reference document, we need to install MSW first. Please refer to the MSW document for details https://link.juejin.cn/?target=https%3A%2F%2Fmswjs.io%2Fdocs%2Fgetting-started

npm install msw@latest --save-dev

Then, we mock API /api/user and return { errno: 0 }, as shown in the following figure.

Using Zustand

When using Zustand store global variables in React components, it is necessary to initialize these data first before rendering the correct DOM structure.

The code is shown in the following figure. In the beforeAll or beforeEach hook function, simply initialize with setState.

Compatible with Nextjs Router

When some components use useRouter internally, for examples

When testing this component, a very simple test code reported an error at useRouter()

Now we need to install next-router-mock to mock router.

npm install next-router-mock

And then we have to create a vitestSetup.ts to config it, and consider next/router and @/i18n/routing

Github Actions

Unit testing has been configured into the GitHub action process, and code testing is automatically executed every time code is submitted to ensure code quality.

By the way, I am looking for an international job opportunity, if you have a chance, welcome to connect me on my Github profile.