Testing Library 安装与配置 #

# 安装核心依赖
npm install --save-dev @testing-library/react @testing-library/jest-dom

# 安装用户事件模拟库
npm install --save-dev @testing-library/user-event

# 安装所有推荐的测试依赖
npm install --save-dev \
  @testing-library/react \
  @testing-library/jest-dom \
  @testing-library/user-event \
  jest \
  jest-environment-jsdom

# Yarn
yarn add --dev @testing-library/react @testing-library/jest-dom @testing-library/user-event

# pnpm
pnpm add --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event

{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.0.0",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.0.0",
    "jest": "^29.0.0",
    "jest-environment-jsdom": "^29.0.0"
  }
}

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
  testMatch: [
    '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
    '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
  ],
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}',
    '!src/**/*.d.ts',
    '!src/index.js',
  ],
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['@babel/preset-env', '@babel/preset-react'] }],
  },
};

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

npm install --save-dev @types/jest

{
  "compilerOptions": {
    "types": ["jest", "node"],
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "moduleResolution": "node"
  },
  "include": ["src/**/*", "tests/**/*"],
  "exclude": ["node_modules"]
}

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

declare global {
  namespace jest {
    interface Matchers<R> {
      toBeInTheDocument(): R;
      toBeDisabled(): R;
      toBeEnabled(): R;
      toBeEmpty(): R;
      toBeEmptyDOMElement(): R;
      toBeInvalid(): R;
      toBeRequired(): R;
      toBeValid(): R;
      toBeVisible(): R;
      toContainElement(element: Element | null): R;
      toContainHTML(html: string): R;
      toHaveAccessibleDescription(description?: string | RegExp): R;
      toHaveAccessibleName(name?: string | RegExp): R;
      toHaveAttribute(attr: string, value?: string | RegExp): R;
      toHaveClass(...classNames: string[]): R;
      toHaveFocus(): R;
      toHaveFormValues(values: Record<string, unknown>): R;
      toHaveStyle(css: Record<string, unknown>): R;
      toHaveTextContent(text: string | RegExp, options?: { normalizeWhitespace: boolean }): R;
      toHaveValue(value?: string | string[] | number): R;
      toHaveDisplayValue(value?: string | string[] | RegExp): R;
      toBeChecked(): R;
      toBePartiallyChecked(): R;
      toHaveErrorMessage(message?: string | RegExp): R;
    }
  }
}

# 创建新项目
npx create-react-app my-app

# 测试依赖已预装
# - @testing-library/react
# - @testing-library/jest-dom
# - @testing-library/user-event

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

npm test

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

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

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/setupTests.ts',
  },
});

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

{
  "scripts": {
    "test": "vitest",
    "test:ui": "vitest --ui",
    "test:coverage": "vitest run --coverage"
  }
}

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

const nextJest = require('next/jest');

const createJestConfig = nextJest({
  dir: './',
});

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testEnvironment: 'jest-environment-jsdom',
};

module.exports = createJestConfig(customJestConfig);

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

import { render } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from '../src/store';

const AllTheProviders = ({ children }) => {
  return (
    <Provider store={store}>
      <BrowserRouter>
        {children}
      </BrowserRouter>
    </Provider>
  );
};

const customRender = (ui, options) =>
  render(ui, { wrapper: AllTheProviders, ...options });

export * from '@testing-library/react';
export { customRender as render };

import { render, screen } from '../test-utils';
import App from './App';

test('renders App', () => {
  render(<App />);
  expect(screen.getByText('Hello')).toBeInTheDocument();
});

npm install --save-dev identity-obj-proxy

module.exports = {
  moduleNameMapper: {
    '\\.module\\.css$': 'identity-obj-proxy',
    '\\.css$': '<rootDir>/__mocks__/styleMock.js',
  },
};

module.exports = {};

module.exports = 'test-file-stub';

module.exports = {
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
  },
};

afterEach(() => {
  cleanup();
});

import { cleanup } from '@testing-library/react';

afterEach(cleanup);

// jest.config.js
module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
};

// jest.config.js
module.exports = {
  moduleNameMapper: {
    '\\.css$': 'identity-obj-proxy',
  },
};

// 增加超时时间
test('async test', async () => {
  // ...
}, 10000);

// 或全局配置
jest.setTimeout(10000);

const originalError = console.error;

beforeAll(() => {
  console.error = (...args) => {
    if (/Warning.*not wrapped in act/.test(args[0])) {
      return;
    }
    originalError.call(console, ...args);
  };
});

afterAll(() => {
  console.error = originalError;
});

npm install --save-dev eslint-plugin-testing-library eslint-plugin-jest-dom

module.exports = {
  plugins: ['testing-library', 'jest-dom'],
  extends: [
    'plugin:testing-library/react',
    'plugin:jest-dom/recommended',
  ],
  rules: {
    'testing-library/prefer-screen-queries': 'error',
    'testing-library/no-node-access': 'error',
    'jest-dom/prefer-checked': 'error',
    'jest-dom/prefer-enabled-disabled': 'error',
  },
};

{
  "jest.autoRun": {
    "watch": true,
    "onSave": "test-file"
  },
  "testing-library/customQueryFunctions": []
}

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

npm test

PASS  src/App.test.jsx
  ✓ renders learn react link (25 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total