#Vitest

Vitest is a testing framework driven by Vite, which can be used for unit testing in combination with React Testing Library.

To use Vitest in Modern.js, you need to install the dependencies first. You can run the following commands:

npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom

yarn add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom

pnpm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom

bun add -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom

Next, you need to create a Vitest configuration file vitest.config.ts with the following content:

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'
 
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
  },
})

For more information about Vitest configuration, you can refer to the Vitest configuration documentation.

You can optionally add the vitest command to package.json:

{
  "scripts": {
    "test": "vitest"
  }
}

After running this command, Vitest will automatically watch your file changes and rerun the test cases.

#Create Unit Tests

First, create a simple page for testing:

import { Link } from '@modern-js/runtime/router';

const Index = () => (
  <div>
    <h1>Home</h1>
    <Link to="/about">About</Link>
  </div>
);

export default Index;

Add a test case to check if the page has the expected text:

import { expect, test } from 'vitest';
import { render, screen } from '@testing-library/react';
import { BrowserRouter as Router } from '@modern-js/runtime/router';
import Page from '../routes/page';

test('Page', () => {
  render(
    <Router>
      <Page />
    </Router>,
  );
  expect(screen.getByRole('heading', { level: 1, name: 'Home' })).toBeDefined();
});

In the above test case, we imported the <Router> component from @modern-js/runtime/router because React Router requires the corresponding context when rendering some route-related components.

#Run Test Cases

Execute the above test command to run the test cases:

✓ src/__tests__/page.test.tsx (1)
  ✓ Page

Test Files  1 passed (1)
    Tests  1 passed (1)
  Start at  15:37:12
  Duration  999ms (transform 119ms, setup 0ms, collect 365ms, tests 33ms, environment 421ms, prepare 44ms)


PASS  Waiting for file changes...