Jest - 附加配置

在本节中，我们将指导您为各种环境(如 TypeScript、React、Vue 和 Next.js)设置 Jest。我们还将介绍用于与 Babel、Webpack 和 ESLint 等工具集成的其他 Jest 配置。这将帮助您测试后端和前端应用程序，并与您已经使用的其他工具集成。

各种配置步骤

在这里，我们将展示使用不同语言、框架和库的其他配置。

• TypeScript
• React
• Vue
• Next.js
• Babel
• Webpack
• ESLint

使用 Jest 设置 TypeScript 环境

在本节中，我们将向您展示如何为 TypeScript 项目设置 Jest，包括初始化项目、安装依赖项、配置 Jest 以及编写基本的 TypeScript 测试。

• 项目初始化:首先，创建一个新的项目目录并初始化一个新的 Node.js 项目:

mkdir typescript-jest-project
cd typescript-jest-project
npm init -y

• 安装 TypeScript 依赖项:接下来，为您的项目:

npm install --save-dev typescript
npm install --save-dev jest
npm install --save-dev ts-jest
npm install --save-dev @types/jest

• 为 TypeScript 配置 Jest:在项目中初始化 TypeScript 配置。这将为您的 TypeScript 设置创建一个 tsconfig.json 文件。

npx tsc --init

• Jest 配置:在项目的根目录中创建一个 Jest 配置文件 (jest.config.js):

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  roots: ['<rootDir>/src'],
  transform: {
    '^.+\.tsx?$': 'ts-jest'
  },
  testRegex: '(/__tests__/.*|(\.|/)(test|spec))\.tsx?$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};

• 示例 TypeScript 测试:现在，让我们编写一个简单的 TypeScript 函数并为其创建一个测试。创建一个包含以下内容的 src/math.ts 文件:

export function multiply(a: number, b: number): number {
	return a * b;
}

• 然后，在 __tests__ 文件夹中创建一个测试文件(例如，__tests__/math.test.ts):

import { multiply } from '../src/math';

describe('Multiplication', () => {
  test('multiplies two numbers', () => {
    expect(multiply(2, 3)).toBe(6);
  });
});

• 要运行测试，请使用以下命令。Jest 将运行测试并在终端中显示结果。

npx jest

使用 Jest 设置 React 环境

本节介绍如何在 React 项目中设置 Jest。您将学习如何创建 React 应用、安装测试库以及配置 Jest 以测试 React 组件。

• 创建 React 项目:首先使用 TypeScript 创建一个新 React 应用:

npx create-react-app react-jest-project --template typescript
cd react-jest-project

• 安装 React 测试库:接下来，安装测试 React 组件所需的测试库:

# 安装 React 测试库
npm install --save-dev @testing-library/react
npm install --save-dev @testing-library/jest-dom
npm install --save-dev @testing-library/user-event

• 配置 Jest:在项目的根目录中创建一个 jest.config.js 文件，并使用以下配置将 Jest 与您的项目集成:

// jest.config.js
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
  moduleNameMapper: {
    '\.(css|less|scss|sass)$': 'identity-obj-proxy'
  }
};

• 为 React 组件编写测试:创建一个新的测试文件 src/App.test.tsx 来编写您的第一个测试。此测试检查"learn react"链接是否在 App 组件中呈现。

// src/App.test.tsx
import React from 'react';
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();
});

• 更新 package.json 脚本:更新 package.json 中的脚本部分，以便更轻松地运行测试:

{
  "scripts": {
    "test": "react-scripts test",
    "test:watch": "react-scripts test --watch",
    "test:coverage": "react-scripts test --coverage"
  }
}

• 现在，您可以使用 npm test、npm run test:watch 进行持续测试，或使用 npm run test:coverage 进行代码覆盖率测试。
• 运行您的测试:要运行测试，只需执行:

  npm test
  

  Jest 将运行测试套件，您将在终端中看到结果。如果一切设置正确，测试应该会通过。

使用 Jest 设置 Vue.js 环境

在本节中，我们将指导您在 Vue.js 项目中使用 TypeScript 设置 Jest，涵盖项目创建、依赖项安装、Jest 配置以及编写简单测试。

• 使用 Vue CLI 使用 TypeScript 创建 Vue 项目:

vue create vue-jest-project
# 导航到项目目录
cd vue-jest-project

• 安装 Vue 测试库:安装 Jest 和 Vue 所需的库测试:

npm install --save-dev @vue/test-utils @vue/vue3-jest jest ts-jest

• 配置 Jest: 使用以下配置在项目根目录中创建或更新 jest.config.js 文件:

module.exports = {
    preset: '@vue/vue3-jest', // 使用 Vue 3 Jest preset
    testEnvironment: 'jsdom', // 测试环境
    transform: {
        '^.+\.vue$': '@vue/vue3-jest',
        '^.+\.js$': 'babel-jest',
        '^.+\.ts$': 'ts-jest'
    },
    testRegex: '(/__tests__/.*|(\.|/)(test|spec))\.(jsx?|tsx?)$' // 匹配测试文件
};

• 编写一个简单的测试:为您的 Vue 组件 创建一个简单的测试。在 src 文件夹中，创建包含以下内容的 App.vue:

<template>
  <div>
    <h1>Hello, Vue!</h1>
  </div>
</template>

<script lang="ts">
export default {
  name: 'App'
}
</script>

• 然后，在 __tests__ 文件夹中，创建 App.test.ts，并进行以下测试:

import { mount } from '@vue/test-utils'
import App from '../src/App.vue'

describe('App.vue', () => {
  it('renders the correct text', () => {
    const wrapper = mount(App)
    expect(wrapper.text()).toContain('Hello, Vue!')
  })
})

• 现在您可以使用以下方式运行测试:

npm run test

如果一切设置正确，Jest 将运行测试并显示结果。

使用 Jest 设置 Next.js 环境

在本节中，我们将指导您在 Next.js 项目中设置 Jest。这包括创建项目、安装必要的依赖项、配置 Jest 以及编写简单的测试。

• 首先，创建一个新的 Next.js 项目:

npx create-next-app next-jest-project
cd next-jest-project

• 安装测试依赖项:接下来，安装 Jest 和相关测试库:

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

• 为 Next.js 配置 Jest:创建一个 jest.config.js 文件来为您的Next.js 项目:

// jest.config.js
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  transform: {
    '^.+\.tsx?$': 'ts-jest',
    '^.+\.js$': 'babel-jest',
  },
  moduleNameMapper: {
    '\.css$': 'identity-obj-proxy',
  },
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
};

• 现在，为您的某个组件创建一个示例测试。创建一个 components/Hello.tsx 文件:

// components/Hello.tsx
import React from 'react';

const Hello = () => {
  return <h1>Hello, Next.js!</h1>;
};

export default Hello;

• 创建测试文件 components/Hello.test.tsx:

// components/Hello.test.tsx
import { render, screen } from '@testing-library/react';
import Hello from './Hello';

test('renders Hello, Next.js!', () => {
  render(<Hello />);
  const element = screen.getByText(/Hello, Next.js!/i);
  expect(element).toBeInTheDocument();
});

• 最后，在 package.json 中添加测试脚本并运行测试:

"scripts": {
  "test": "jest"
}

• 使用以下命令运行测试:

npm test

Babel Integration

如果您的项目使用 Babel 转换 JavaScript 代码，您可以将其配置为与 Jest 配合使用进行测试。

• 安装 Babel 依赖项:如果您尚未安装 Babel，请运行:

npm install --save-dev babel-jest @babel/core @babel/preset-env

• 配置 Babel:创建一个项目根目录中的 babel.config.js 文件包含以下内容:

module.exports = {
presets: ['@babel/preset-env'],
};

• 配置 Jest 以使用 Babel:Jest 将在运行测试时自动使用 Babel，因此您不需要任何额外的 Jest 配置。

ESLint 集成

为了避免在使用 Jest 运行测试时出现 linting 问题，您可以配置 ESLint 以了解 Jest 的全局变量。

• 为 Jest 配置 ESLint:在您的 .eslintrc.json 或 .eslintrc.js 文件中，将 Jest 添加到环境中:

{
  "env": {
    "jest": true
  }
}

• 安装 ESLint 插件:或者，您可以安装 eslint-plugin-jest 以获取与 Jest 相关的其他 linting 规则:

npm install --save-dev eslint-plugin-jest

Jest 与 Webpack

如果您的项目使用 Webpack 进行捆绑，Jest 将自动与其配合使用。但是，如果您遇到任何问题，可以添加 babel-jest 包。

• 安装 Webpack 依赖项:如果您使用的是 Webpack，请确保您有 babel-jest 以将其与 Jest 集成:

npm install --save-dev babel-jest webpack

• 为 Webpack 配置 Jest:大多数 Webpack 项目无需额外设置即可与 Jest 配合使用，但您可以根据需要添加配置文件。