Vitest? ???? ??? ??????

Vitest? ???? ??? ??? ?? ???????. ?? ?? ??? ??? ????.

??

Vitest? ??? ? ??? ?? ??? HMR(? ?? ??)? esbuild? ???? Vite? ???? ?????. ??? ??? ????.

• ??? ? ???? ?? ??: ??? ?? ??? ???? ???? ?? ???? ??? ??? ????? ??????.
• ?? ESM ??: ?? ??????? ?? ?? ES ??? ?? ?????? ??? ?? ? ????.

?? ?????? Vitest? Vite? ???? ?? ?????? ???? ??? Jest? ????? ???? ????.

??: ??? ????? ???? ???? ??? ??? ?? ??? ? ????.

???

Vitest? Jest? ????? ???? ????? ?? ??? ??? ???? ???? ? ????. ?? TypeScript, JSX, ESM? ?? ?? ???? ??? ????? ?????.

??? ??

• Vite? HMR? ???? ?? ??? ??? ?????.
• ??? API ? ??.
• ??? ???? ???? ???? ??.

---

Vitest ??

TypeScript ?????? Vitest? ???? ??? ???????. React ????? ???? ?? ??? ????? ??? Vue 3 ?? Node.js ????? ?????.

??

1. Node.js? npm/yarn/pnpm? ???? ??? ?????.
2. Vitest ? ?? ?? ??? ??:

npm install --save-dev vitest

React? ???? ????? ?? React ??? ?????? ?????.

npm install --save-dev @testing-library/react @testing-library/jest-dom

??

Vite.config.ts? ????? ?????? Vitest? ??????.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom', // Use 'node' for Node.js projects
    setupFiles: './test/setup.ts',
  },
});

?? ?? ??

?? ??? ??? ??? ???? ? ?????. test/setup.ts ??? ????.
import '@testing-library/jest-dom';

???? ??

??? ????? ????? package.json? ???????.

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

---

Vitest? ?? ??? ??

Vitest? ??? ??? ???? ????? Jest? ??? API? ?????. ??? ?? ??? ????.

?: ?? ????

React ????? ??? ??? ???.

// src/components/Greeting.tsx
import React from 'react';

type GreetingProps = {
  name: string;
};

export const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

??? ??

????? ?? ??? ?? ???:

// src/components/__tests__/Greeting.test.tsx
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Greeting } from '../Greeting';

describe('Greeting Component', () => {
  it('renders the correct greeting', () => {
    render(<Greeting name="Vitest" />);
    expect(screen.getByText('Hello, Vitest!')).toBeInTheDocument();
  });
});

??? ??

??? ???? ???? ?????.
npm ?? ???

??? ??? ??? ?????.
? Greeting Component? ??? ???? ??????

---

?? ??

??

Vitest? ?? ??? ??? ?? ?????.

import { vi } from 'vitest';

const mockFn = vi.fn();
mockFn();
expect(mockFn).toHaveBeenCalled();

??? ???

??? ???? ??? ?? ?????.

import { render } from '@testing-library/react';
import { expect } from 'vitest';
import { Greeting } from '../Greeting';

test('matches snapshot', () => {
  const { container } = render(<Greeting name="Vitest" />);
  expect(container).toMatchSnapshot();
});

?? ???

Vitest? CLI ??? ???? ?? ??:
vitest --run --coverage

---

??

Vitest? Vite?? ???? ??, ??? ? ??? ??? ???? ?? ???? ?? ??? ?????. Jest?? ???????? ?? ???? Vitest? ??? ??? ??? ???? ???? ???? ??? ????? ?????.

?? ?????? Vitest? ????? ??? ??? ???!

????

Vitest ????
??

? ??? Vitest? ??? ?? ???: ??? ??? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!