{"id":1158,"date":"2023-12-29T02:16:08","date_gmt":"2023-12-29T02:16:08","guid":{"rendered":"https:\/\/bluesockets.com\/?p=1158"},"modified":"2024-02-05T02:01:54","modified_gmt":"2024-02-05T02:01:54","slug":"react-js-unit-testing-vitest-husky-lint-staged-eslint-prettier","status":"publish","type":"post","link":"https:\/\/bluesockets.com\/react\/react-js-unit-testing-vitest-husky-lint-staged-eslint-prettier\/","title":{"rendered":"React.js Vite Unit Testing (Vitest, Husky, lint-staged, ESLint, Prettier)"},"content":{"rendered":"\n

Creating a React application with Vite<\/a> has now become the preferred way rather than using create-react-app<\/a>. Vite provides a much faster and simpler development environment, however unlike create-react-app, it does not come with the packages needed for unit testing React applications out of the box.<\/p>\n\n\n\n

In this article, we will explore how to set up unit testing for a production-ready React + Typescript Vite application. We’ll set up testing with the lightweight and fast Vitest<\/a> testing framework and the React Testing Library<\/a>. We’ll also configure linting and formatting with ESLint and Prettier to catch issues early. And we’ll use Husky and lint-staged to automatically run tests and linting on git commits before code is pushed. By the end, you’ll have a solid testing setup that catches bugs, prevents regressions, and helps enforce code quality standards while developing and merging code changes.<\/p>\n\n\n

\n
\n
\n

Vitest vs Jest<\/p>

<\/span>\n <\/div><\/div>
\n\n

Jest is a widely used testing framework for JavaScript. It offers features like built-in support for mocking and snapshot testing making it a comprehensive choice for JavaScript testing. On the other hand, Vitest is a JavaScript unit testing framework designed to complement Vite. Vitest focuses on speed and simplicity, with tests running significantly faster than Jest in some cases. It also offers compatibility with most of the Jest API, making it a viable alternative to Jest. <\/p>\n\n\n\n

For small to medium sized projects, Vitest’s simplicity often makes it preferable to Jest which can be overkill. But for larger codebases with more complex test needs, features like snapshot testing or Jest’s rich ecosystem may make it a better choice.<\/p>\n\n<\/div><\/div>\n\n

\n
\n

Why use Typescript?<\/p>

<\/span>\n <\/div><\/div>
\n\n

TypeScript offers several advantages over JavaScript, primarily due to its strong typing system. By providing static typing, TypeScript allows developers to catch errors during development rather than at runtime, enhancing code quality and reducing bugs. Learn more<\/a>.<\/p>\n\n<\/div><\/div>\n<\/div>\n\n

Setting Up Vitest<\/h2>\n\n\n

Assuming you already have your React Vite project setup<\/a> (npm create vite@latest<\/code>). <\/p>\n\n\n\n

The first step is to install Vitest to run our unit tests. We can install it with:<\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
npm<\/span> <\/span>install<\/span> <\/span>-D<\/span> <\/span>vitest<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Then update your package.json<\/strong> file by adding a script to run vitest<\/strong>:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
  <\/span>"<\/span>scripts<\/span>"<\/span>: <\/span>{<\/span><\/span>\n    <\/span>"<\/span>dev<\/span>"<\/span>:<\/span> <\/span>"<\/span>vite<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>build<\/span>"<\/span>:<\/span> <\/span>"<\/span>tsc && vite build<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>lint<\/span>"<\/span>:<\/span> <\/span>"<\/span>eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>preview<\/span>"<\/span>:<\/span> <\/span>"<\/span>vite preview<\/span>"<\/span>,<\/span><\/span>\n    <\/span>"<\/span>test<\/span>"<\/span>:<\/span> <\/span>"<\/span>vitest<\/span>"<\/span>,<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Now we can write our first test file. Create src\/components\/Example\/Example.test.ts<\/code>:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>{<\/span> <\/span>describe<\/span>,<\/span> <\/span>expect<\/span>,<\/span> <\/span>it<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>'<\/span>vitest<\/span>'<\/span>;<\/span><\/span>\n<\/span>\ndescribe<\/span>(<\/span>'<\/span>Example<\/span>'<\/span>,<\/span> <\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n  <\/span>it<\/span>(<\/span>'<\/span>adds 1 + 2 to equal 3<\/span>'<\/span>,<\/span> <\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>expect<\/span>(<\/span>1<\/span> <\/span>+<\/span> <\/span>2<\/span>)<\/span>.<\/span>toBe<\/span>(<\/span>3<\/span>)<\/span>;<\/span> <\/span><\/span>\n  <\/span>}<\/span>)<\/span>;<\/span><\/span>\n}<\/span>)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/p>\n\n\n
\n\n\n
Depending on your project structure you might choose to add the test for a component in the same folder. Simply ensure that you have .test<\/strong><\/em> or .spec<\/em><\/strong> suffix before the file extension.

You may also choose to place your tests in a __tests__<\/strong> folder which could be located at any depth under \/src<\/strong>.<\/p>\n\n\n<\/div>\n\n\n
And run the tests:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
npm<\/span> <\/span>run<\/span> <\/span>test<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Vitest will detect and run the tests automatically. It’s fast and focused on simplicity, so it’s a great starting point for testing React applications.<\/p>\n\n\n\n
<\/p>\n\n\n\n
If your project has a need for Coverage Reporting, see here<\/a> for additional setup instructions.<\/p>\n\n\n\n
<\/p>\n\n\n
Setting up Vitest with React Testing Library<\/h2>\n\n\n
In order to test the UI of your React components, you need a way to interact with the DOM. This is where React Testing Library comes into play.<\/p>\n\n\n\n
Install React Testing Library and supporting packages:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
npm<\/span> <\/span>i<\/span> <\/span>-D<\/span> <\/span>jsdom<\/span> <\/span>@testing-library\/react<\/span> <\/span>@testing-library\/jest-dom<\/span> <\/span>@testing-library\/user-event<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Update your Vite configuration file (vite.config.ts<\/strong>):<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
\/\/\/ <\/span><reference<\/span> <\/span>types<\/span>=<\/span>"<\/span>vitest<\/span>"<\/span> <\/span>\/><\/span><\/span>\n\/\/\/ <\/span><reference<\/span> <\/span>types<\/span>=<\/span>"<\/span>vite\/client<\/span>"<\/span> <\/span>\/><\/span><\/span>\n<\/span>\nimport<\/span> <\/span>{<\/span> <\/span>defineConfig<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>'<\/span>vite<\/span>'<\/span><\/span>\nimport<\/span> <\/span>react<\/span> <\/span>from<\/span> <\/span>'<\/span>@vitejs\/plugin-react<\/span>'<\/span><\/span>\n<\/span>\n\/\/ https:\/\/vitejs.dev\/config\/<\/span><\/span>\nexport<\/span> <\/span>default<\/span> <\/span>defineConfig<\/span>(<\/span>{<\/span><\/span>\n  <\/span>plugins<\/span>:<\/span> [<\/span>react<\/span>()]<\/span>,<\/span><\/span>\n  <\/span>test<\/span>:<\/span> <\/span>{<\/span><\/span>\n    <\/span>globals<\/span>:<\/span> <\/span>true<\/span>,<\/span><\/span>\n    <\/span>environment<\/span>:<\/span> <\/span>'<\/span>jsdom<\/span>'<\/span>,<\/span><\/span>\n    <\/span>setupFiles<\/span>:<\/span> <\/span>'<\/span>.\/src\/test\/setup.ts<\/span>'<\/span>,<\/span><\/span>\n    <\/span>\/\/ you might want to disable it, if you don't have tests that rely on CSS<\/span><\/span>\n    <\/span>\/\/ since parsing CSS is slow<\/span><\/span>\n    <\/span>css<\/span>:<\/span> <\/span>true<\/span>,<\/span><\/span>\n  <\/span>},<\/span><\/span>\n}<\/span>)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
As you may have noticed, we specified a setup file (.\/src\/test\/setup.ts<\/code>) in the config. Let’s now create that file at the location we specified.<\/p>\n\n\n\n
Create file src\/test\/setup.ts<\/strong> and add:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>'<\/span>@testing-library\/jest-dom<\/span>'<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Now you should be able to successfully test the UI of your React application. For example:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>{<\/span> <\/span>test<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>'<\/span>vitest<\/span>'<\/span>;<\/span><\/span>\nimport<\/span> <\/span>{<\/span> <\/span>render<\/span>,<\/span> <\/span>screen<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>'<\/span>@testing-library\/react<\/span>'<\/span>;<\/span><\/span>\nimport<\/span> <\/span>App<\/span> <\/span>from<\/span> <\/span>'<\/span>.\/App<\/span>'<\/span>;<\/span><\/span>\n<\/span>\ntest<\/span>(<\/span>'<\/span>renders welcome message<\/span>'<\/span>,<\/span> <\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n  <\/span>render<\/span>(<\/span><<\/span>App<\/span> <\/span>\/><\/span>)<\/span>;<\/span><\/span>\n  <\/span>expect<\/span>(<\/span>screen<\/span>.<\/span>getByText<\/span>(<\/span>'<\/span>Learn React<\/span>'<\/span>))<\/span>.<\/span>toBeInTheDocument<\/span>()<\/span>;<\/span><\/span>\n}<\/span>)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/p>\n\n\n
Creating a Custom Render for App Providers<\/h3>\n\n\n
There is a good chance that your React application utilizes the Context API<\/a> and so your app relies on providers. For each of your unit tests, you would have to wrap the component you are trying to render with those providers. Since this is not very efficient, we can create a custom render function with the necessary providers.<\/p>\n\n\n\n
Create file utils\/test-utils.tsx<\/strong> and add the following:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>{<\/span> <\/span>cleanup<\/span>,<\/span> <\/span>render<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>'<\/span>@testing-library\/react<\/span>'<\/span><\/span>\nimport<\/span> <\/span>{<\/span> <\/span>afterEach<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>'<\/span>vitest<\/span>'<\/span><\/span>\n<\/span>\nafterEach<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n  <\/span>cleanup<\/span>()<\/span><\/span>\n}<\/span>)<\/span><\/span>\n<\/span>\nconst<\/span> <\/span>AppProviders<\/span> <\/span>=<\/span> <\/span>({<\/span>children<\/span>}<\/span>:<\/span> <\/span>{<\/span>children<\/span>:<\/span> <\/span>React<\/span>.<\/span>ReactNode<\/span>})<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>ThemeProvider<\/span> <\/span>theme<\/span>=<\/span>"<\/span>light<\/span>"<\/span>><\/span><\/span>\n        <\/span>{<\/span>children<\/span>}<\/span><\/span>\n    <\/span><\/<\/span>ThemeProvider<\/span>><\/span><\/span>\n  )<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nfunction<\/span> <\/span>customRender<\/span>(<\/span>ui<\/span>:<\/span> <\/span>React<\/span>.<\/span>ReactElement<\/span>,<\/span> <\/span>options<\/span> <\/span>=<\/span> <\/span>{})<\/span> <\/span>{<\/span><\/span>\n  <\/span>return<\/span> <\/span>render<\/span>(<\/span>ui<\/span>,<\/span> <\/span>{<\/span><\/span>\n    <\/span>wrapper<\/span>:<\/span> <\/span>AppProviders<\/span>,<\/span><\/span>\n    <\/span>...<\/span>options<\/span>,<\/span><\/span>\n  <\/span>}<\/span>)<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nexport<\/span> <\/span>*<\/span> <\/span>from<\/span> <\/span>'<\/span>@testing-library\/react<\/span>'<\/span><\/span>\nexport<\/span> <\/span>{<\/span> <\/span>default<\/span> <\/span>as<\/span> <\/span>userEvent<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>'<\/span>@testing-library\/user-event<\/span>'<\/span><\/span>\n\/\/ override render export<\/span><\/span>\nexport<\/span> <\/span>{<\/span> <\/span>customRender<\/span> <\/span>as<\/span> <\/span>render<\/span> <\/span>}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
The code snippet above has an example <ThemeProvider><\/code> to demonstrate how you might add your own. Modify that part of the code as needed.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Now, that you have your custom render function in test-utils.tsx<\/strong>, ensure that you are importing that one when necessary and not the default render function from React Testing Library.<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n
Configuring ESLint and Prettier<\/h2>\n\n\n
If you have been following the tutorial up to this point you have already successfully set up unit testing with Vitest and React Testing Library for your React app. However, if you a collaborating with others for your project, you may want to utilize static analysis testing tools to ensure proper coding standards and syntax are maintained in your project at all times.<\/p>\n\n\n\n
To maintain code quality and consistency, we’ll use ESLint<\/a> for linting and Prettier<\/a> for formatting. <\/p>\n\n\n\n
ESLint would already be installed if you created a React + Typescript Vite project. You want to also install eslint-plugin-react<\/a> to add React-specific linting rules:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
npm<\/span> <\/span>install<\/span> <\/span>eslint-plugin-react<\/span> <\/span>--save-dev<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Then add plugin:react\/recommended<\/strong> and plugin:react\/jsx-runtime<\/strong> to the extends<\/code> list of your ESLint config file:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
module<\/span>.<\/span>exports<\/span> <\/span>=<\/span> <\/span>{<\/span><\/span>\n  <\/span>...<\/span><\/span>\n  <\/span>extends<\/span>: [<\/span><\/span>\n    <\/span>'<\/span>eslint:recommended<\/span>'<\/span>,<\/span><\/span>\n    <\/span>'<\/span>plugin:@typescript-eslint\/recommended<\/span>'<\/span>,<\/span><\/span>\n    <\/span>'<\/span>plugin:react-hooks\/recommended<\/span>'<\/span>,<\/span><\/span>\n    <\/span>'<\/span>plugin:react\/recommended<\/span>'<\/span>,<\/span><\/span>\n    <\/span>'<\/span>plugin:react\/jsx-runtime<\/span>'<\/span>,<\/span><\/span>\n  ]<\/span>,<\/span><\/span>\n  <\/span>...<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Now, let’s install Prettier:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
npm<\/span> <\/span>install<\/span> <\/span>--save-dev<\/span> <\/span>--save-exact<\/span> <\/span>prettier<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Since we are using ESLint with Prettier, we need to also install eslint-config-prettier<\/strong> so that they don’t conflict with each other:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
npm<\/span> <\/span>install<\/span> <\/span>-D<\/span> <\/span>eslint-config-prettier<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Now add eslint-config-prettier<\/strong>  to the extends<\/code> list of your ESLint config file:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
module<\/span>.<\/span>exports<\/span> <\/span>=<\/span> <\/span>{<\/span><\/span>\n  <\/span>...<\/span><\/span>\n  <\/span>extends<\/span>: [<\/span><\/span>\n    <\/span>'<\/span>eslint:recommended<\/span>'<\/span>,<\/span><\/span>\n    <\/span>'<\/span>plugin:@typescript-eslint\/recommended<\/span>'<\/span>,<\/span><\/span>\n    <\/span>'<\/span>plugin:react-hooks\/recommended<\/span>'<\/span>,<\/span><\/span>\n    <\/span>'<\/span>plugin:react\/recommended<\/span>'<\/span>,<\/span><\/span>\n    <\/span>'<\/span>plugin:react\/jsx-runtime<\/span>'<\/span>,<\/span><\/span>\n    <\/span>'<\/span>eslint-config-prettier<\/span>'<\/span><\/span>\n  ]<\/span>,<\/span><\/span>\n  <\/span>...<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Create a file called .prettierrc<\/strong> at the root of your project. As you might have guessed this is Prettier’s configuration file. You may specify the following rules or specify your own (visit here<\/a> to see options):<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
{<\/span><\/span>\n  semi<\/span>:<\/span> <\/span>true<\/span>,<\/span><\/span>\n  singleQuote<\/span>:<\/span> <\/span>true<\/span>,<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
Setting Up Husky and lint-staged<\/h2>\n\n\n
To make ESLint, Prettier and testing run automatically before commits, we can use Husky<\/a> and lint-staged<\/a>.<\/p>\n\n\n\n
First install them:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
npm<\/span> <\/span>install<\/span> <\/span>--save-dev<\/span> <\/span>husky<\/span> <\/span>lint-staged<\/span><\/span>\nnpx<\/span> <\/span>husky<\/span> <\/span>install<\/span><\/span>\nnpm<\/span> <\/span>pkg<\/span> <\/span>set<\/span> <\/span>scripts.prepare=<\/span>"<\/span>husky install<\/span>"<\/span><\/span>\nnpx<\/span> <\/span>husky<\/span> <\/span>add<\/span> <\/span>.husky\/pre-commit<\/span> <\/span>"<\/span>npx lint-staged<\/span>"<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Then create a lint-staged<\/code> block in package.json<\/code> and configure lint-staged with scripts to run on staged files:<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
{<\/span><\/span>\n  <\/span>...<\/span><\/span>\n  <\/span>"<\/span>scripts<\/span>"<\/span>:<\/span> <\/span>{<\/span><\/span>\n    <\/span>...<\/span><\/span>\n    <\/span>\/\/ add script to run unit tests without watch mode<\/span><\/span>\n    <\/span>"<\/span>test:staged<\/span>"<\/span>:<\/span> <\/span>"<\/span>vitest --run<\/span>"<\/span>,<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  <\/span>{<\/span><\/span>\n    <\/span>"<\/span>lint-staged<\/span>"<\/span>:<\/span> <\/span>{<\/span><\/span>\n      <\/span>"<\/span>**\/*.{js,jsx,ts,tsx}<\/span>"<\/span>:<\/span> <\/span>[<\/span><\/span>\n        <\/span>"<\/span>npm run lint<\/span>"<\/span>,<\/span><\/span>\n        <\/span>"<\/span>prettier --write --ignore-unknown<\/span>"<\/span>,<\/span><\/span>\n        <\/span>"<\/span>npm run test:staged<\/span>"<\/span><\/span>\n      <\/span>]<\/span><\/span>\n    <\/span>}<\/span><\/span>\n  <\/span>}<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Now ESLint, Prettier, and tests will automatically run before any commits. This helps catch issues early before they are merged into the main<\/code> or prod<\/code> branch.<\/p>\n\n\n
Conclusion<\/h2>\n\n\n
Setting up Vitest, ESLint, Prettier, Husky and lint-staged provides a solid foundation for unit testing React apps. You get automatic testing on commits, linting enforced on the way in, and consistent code formatting.<\/p>\n\n\n\n
The tools are lightweight and easy to configure. They work well together to catch bugs and prevent regressions while developing React code. Give this setup a try on your next project – it will save you time debugging and maintaining high-quality code.<\/p>\n","protected":false},"excerpt":{"rendered":"
Creating a React application with Vite has now become the preferred way rather than using create-react-app. Vite provides a much faster and simpler development environment, however unlike create-react-app, it does<\/p>\n","protected":false},"author":1,"featured_media":1166,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ub_ctt_via":"","footnotes":""},"categories":[6],"tags":[52,91,93,92,7,90,94],"featured_image_src":"https:\/\/bluesockets.com\/wp-content\/uploads\/2023\/12\/react-unit-testing.png","author_info":{"display_name":"Rajae Robinson","author_link":"https:\/\/bluesockets.com\/author\/rajae\/"},"acf":[],"_links":{"self":[{"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/posts\/1158"}],"collection":[{"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/comments?post=1158"}],"version-history":[{"count":12,"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/posts\/1158\/revisions"}],"predecessor-version":[{"id":1391,"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/posts\/1158\/revisions\/1391"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/media\/1166"}],"wp:attachment":[{"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/media?parent=1158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/categories?post=1158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluesockets.com\/wp-json\/wp\/v2\/tags?post=1158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
As stated earlier Prettier is used to format your files based on the rules you specify. You can configure your favorite code editor to format your files on save. This setup is beyond the scope of this article, see here<\/a> for more information. Regardless, in the following section, we will set up Husky which we can utilize to create a pre-commit hook so that our formatting and linting is done before each commit.<\/p>\n\n\n
If you are interested in seeing examples of how you can set up Vitest with other tools\/frameworks such as MSW<\/a>, GraphQL, or Next.js, visit here<\/a>.<\/p>\n\n\n\n