Тестирование¶

Настройка тестовой среды¶

Программы запуска тестов¶

Обычно программа запуска тестов должна быть настроена на выполнение синтаксиса JavaScript/TypeScript. Если вы собираетесь тестировать компоненты пользовательского интерфейса, вам, вероятно, потребуется настроить программу для тестирования на использование JSDOM для создания имитации DOM-окружения.

Инструкции по настройке тестового прогона см. на этих ресурсах:

Jest
- Jest: Getting Started
- Jest: Configuration - Test Environment
Vitest
- Vitest: Getting Started
- Vitest: Конфигурация - тестовая среда

Инструменты для тестирования пользовательского интерфейса и сети¶

Мы рекомендуем использовать React Testing Library (RTL) для тестирования компонентов React, подключаемых к Zustand. RTL - это простая и полная утилита для тестирования React DOM, которая поощряет хорошие практики тестирования. Она использует функцию render ReactDOM и act из react-dom/tests-utils. Кроме того, Native Testing Library (RNTL) - это альтернатива RTL для тестирования компонентов React Native. Семейство инструментов Testing Library также включает адаптеры для многих других популярных фреймворков.

Мы также рекомендуем использовать Mock Service Worker (MSW) для имитации сетевых запросов, так как это означает, что логику вашего приложения не нужно менять или имитировать при написании тестов.

Библиотека тестирования реакций (DOM)
Нативная библиотека тестирования (React Native)
- Native Testing Library: Setup
Библиотека тестирования пользовательских событий (DOM)
- "Библиотека тестирования пользовательских событий: настройка"
TypeScript for Jest
- TypeScript для Jest: Установка
TypeScript для Node
- TypeScript для Node: Установка
Mock Service Worker

Настройка Zustand для тестирования¶

Примечание: Поскольку Jest и Vitest имеют небольшие различия, например, Vitest использует ES модули, а Jest использует CommonJS модули, вам нужно иметь это в виду, если вы используете Vitest вместо Jest.

Макет, представленный ниже, позволит соответствующему тестовому прогону сбрасывать хранилища zustand после каждого теста.

Общий код только для целей тестирования¶

Этот общий код был добавлен, чтобы избежать дублирования кода в нашем демо, поскольку мы используем одного и того же создателя хранилища для обеих реализаций, с API Context и без него - createStore и create, соответственно.

// shared/counter-store-creator.ts
import { type StateCreator } from 'zustand'

export type CounterStore = {
  count: number
  inc: () => void
}

export const counterStoreCreator: StateCreator<CounterStore> = (set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
})

Jest¶

В следующих шагах мы настроим наше окружение Jest, чтобы использовать Zustand.

// __mocks__/zustand.ts
import * as zustand from 'zustand';
import { act } from '@testing-library/react';

const {
    create: actualCreate,
    createStore: actualCreateStore,
} = jest.requireActual<typeof zustand>('zustand');

// a variable to hold reset functions for all stores declared in the app
export const storeResetFns = new Set<() => void>();

const createUncurried = <T>(
    stateCreator: zustand.StateCreator<T>
) => {
    const store = actualCreate(stateCreator);
    const initialState = store.getInitialState();
    storeResetFns.add(() => {
        store.setState(initialState, true);
    });
    return store;
};

// when creating a store, we get its initial state, create a reset function and add it in the set
export const create = (<T>(
    stateCreator: zustand.StateCreator<T>
) => {
    console.log('zustand create mock');

    // to support curried version of create
    return typeof stateCreator === 'function'
        ? createUncurried(stateCreator)
        : createUncurried;
}) as typeof zustand.create;

const createStoreUncurried = <T>(
    stateCreator: zustand.StateCreator<T>
) => {
    const store = actualCreateStore(stateCreator);
    const initialState = store.getInitialState();
    storeResetFns.add(() => {
        store.setState(initialState, true);
    });
    return store;
};

// when creating a store, we get its initial state, create a reset function and add it in the set
export const createStore = (<T>(
    stateCreator: zustand.StateCreator<T>
) => {
    console.log('zustand createStore mock');

    // to support curried version of createStore
    return typeof stateCreator === 'function'
        ? createStoreUncurried(stateCreator)
        : createStoreUncurried;
}) as typeof zustand.createStore;

// reset all stores after each test run
afterEach(() => {
    act(() => {
        storeResetFns.forEach((resetFn) => {
            resetFn();
        });
    });
});

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

// jest.config.ts
import type { JestConfigWithTsJest } from 'ts-jest';

const config: JestConfigWithTsJest = {
    preset: 'ts-jest',
    testEnvironment: 'jsdom',
    setupFilesAfterEnv: ['./setup-jest.ts'],
};

export default config;

Примечание: для использования TypeScript нам необходимо установить два пакета ts-jest и ts-node.

Vitest¶

В следующих шагах мы настроим наше окружение Vitest, чтобы выполнить имитацию Zustand.

Предупреждение: В Vitest вы можете изменить root. В связи с этим вам необходимо убедиться, что вы создаете каталог __mocks__ в правильном месте. Допустим, вы изменили root на ./src, это означает, что вам нужно создать директорию __mocks__ в ./src. В итоге получится ./src/__mocks__, а не ./__mocks__. Создание директории __mocks__ в неправильном месте может привести к проблемам при использовании Vitest.

// __mocks__/zustand.ts
import * as zustand from 'zustand';
import { act } from '@testing-library/react';

const {
    create: actualCreate,
    createStore: actualCreateStore,
} = await vi.importActual<typeof zustand>('zustand');

// a variable to hold reset functions for all stores declared in the app
export const storeResetFns = new Set<() => void>();

const createUncurried = <T>(
    stateCreator: zustand.StateCreator<T>
) => {
    const store = actualCreate(stateCreator);
    const initialState = store.getInitialState();
    storeResetFns.add(() => {
        store.setState(initialState, true);
    });
    return store;
};

// when creating a store, we get its initial state, create a reset function and add it in the set
export const create = (<T>(
    stateCreator: zustand.StateCreator<T>
) => {
    console.log('zustand create mock');

    // to support curried version of create
    return typeof stateCreator === 'function'
        ? createUncurried(stateCreator)
        : createUncurried;
}) as typeof zustand.create;

const createStoreUncurried = <T>(
    stateCreator: zustand.StateCreator<T>
) => {
    const store = actualCreateStore(stateCreator);
    const initialState = store.getInitialState();
    storeResetFns.add(() => {
        store.setState(initialState, true);
    });
    return store;
};

// when creating a store, we get its initial state, create a reset function and add it in the set
export const createStore = (<T>(
    stateCreator: zustand.StateCreator<T>
) => {
    console.log('zustand createStore mock');

    // to support curried version of createStore
    return typeof stateCreator === 'function'
        ? createStoreUncurried(stateCreator)
        : createStoreUncurried;
}) as typeof zustand.createStore;

// reset all stores after each test run
afterEach(() => {
    act(() => {
        storeResetFns.forEach((resetFn) => {
            resetFn();
        });
    });
});

Примечание: без включенной globals configuration нам нужно добавить import { afterEach, vi } из 'vitest' в верхней части.

// global.d.ts
/// <reference types="vite/client" />
/// <reference types="vitest/globals" />

Примечание: без включения globals configuration необходимо удалить /// <reference types="vitest/globals" />.

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

vi.mock('zustand'); // to make it work like Jest (auto-mocking)

Примечание: без включенной globals configuration нам нужно добавить import { vi } from 'vitest' в верхней части.

// vitest.config.ts
import { defineConfig, mergeConfig } from 'vitest/config';
import viteConfig from './vite.config';

export default mergeConfig(
    viteConfig,
    defineConfig({
        test: {
            globals: true,
            environment: 'jsdom',
            setupFiles: ['./setup-vitest.ts'],
        },
    })
);