𝐇𝐨𝐰 𝐭𝐨 𝐠𝐞𝐭 𝐬𝐭𝐚𝐫𝐭𝐞𝐝 𝐰𝐢𝐭𝐡 𝐓𝐞𝐬𝐭𝐢𝐧𝐠 𝐚 𝐫𝐞𝐚𝐜𝐭 𝐚𝐩𝐩 𝐮𝐬𝐢𝐧𝐠 𝐕𝐢𝐭𝐞𝐬𝐭 + 𝐑𝐞𝐚𝐜𝐭 𝐓𝐞𝐬𝐭𝐢𝐧𝐠 𝐋𝐢𝐛𝐫𝐚𝐫𝐲 and 𝐕𝐢𝐭𝐞 𝐭𝐨𝐨𝐥𝐢𝐧𝐠?

Vitest and Unit Testing

In this post, I am going to summarize how you can easily get started using cutting-edge tools to test your react/next frontend application so we are going to use 𝐑𝐞𝐚𝐜𝐭, 𝐓𝐲𝐩𝐞𝐒𝐜𝐫𝐢𝐩𝐭, 𝐕𝐢𝐭𝐞, 𝐕𝐢𝐭𝐞𝐬𝐭, 𝐑𝐞𝐚𝐜𝐭 𝐓𝐞𝐬𝐭𝐢𝐧𝐠 𝐋𝐢𝐛𝐫𝐚𝐫𝐲 and as you see I omitted 𝐉𝐞𝐬𝐭 from the setup since it needs more boilerplate for setup and because of behind scene compilation stuff it is much slower than Vitest but you don’t need to worry at all, they are almost the same in terms of 95% of their features and there is no issue about that.

1- First of all, you need to install these packages after you set up a Vite application using React library and TypeScript.

npm i vitest @testing-library/react @testing-library/user-event @testing-library/jest-dom @testing-library/dom jsdom -D

2- Create a vitest.config.ts file in the root of your project like the image below.

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  test: {
    /* for example, use global to avoid globals imports (describe, test, expect): */
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/test/setup.ts",
    // you might want to disable it, if you don't have tests that rely on CSS
    // since parsing CSS is slow
    css: false,
  },
});

If you want to make some customization based on your needs, you can read the comprehensive documentation here:

Vitest

3- Create a test folder in your src folder and create a file called setup.ts and add this line of code to it:

import "@testing-library/jest-dom";

By adding this we will be able to access jest functions like describe and etc in our test files.

4- Add the test script inside your package.json:

Test and coverage scripts

    "dev": "vite",
    "test": "vitest",
    "coverage": "vitest run --coverage",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"

𝐂𝐨𝐧𝐠𝐫𝐚𝐭𝐮𝐥𝐚𝐭𝐢𝐨𝐧𝐬, 𝐲𝐨𝐮 𝐚𝐫𝐞 𝐠𝐨𝐨𝐝 𝐭𝐨 𝐠𝐨 𝐧𝐨𝐰! 𝐰𝐚𝐬𝐧’𝐭 𝐢𝐭 𝐞𝐚𝐬𝐲 𝐫𝐚𝐭𝐡𝐞𝐫 𝐭𝐡𝐚𝐧 𝐉𝐞𝐬𝐭?!

Remember that our test runner is Vitest here but we will need to use jsdom environment and jest-dom to be able to access DOM-related functionalities inside our test files.

Now let’s write our first tests and enjoy!

First unit tests

I hope this could help you get started with testing your applications very fast and if so, please support by sharing.