Jest - 集成

在本章中，我们将介绍如何将 Jest 与 TypeScript、Babel 和 Webpack 集成。这些集成对于测试使用 TypeScript、ES6+ 语法 或 Webpack 的 JavaScript 应用程序非常重要。最后，您将能够使用这些工具配置 Jest 以进行高效测试。

Jest - TypeScript 集成

Jest 可以与 TypeScript 集成，以直接在 TypeScript 文件上运行测试。此设置允许 Jest 处理 TypeScript 代码而无需预编译，从而使测试过程更顺畅、更高效。

安装依赖项

要开始使用 Jest 和 TypeScript，您首先需要安装必要的依赖项:

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

为 TypeScript 配置 Jest

安装依赖项后，下一步是配置 Jest 以使用 TypeScript。

创建一个 Jest 配置文件，通常命名为 jest.config.js 或 jest.config.ts(如果您使用 TypeScript 进行 Jest 配置)。

module.exports = {
    preset: 'ts-jest', // 使用 ts-jest 预设处理 TypeScript 文件
    testEnvironment: 'node', // 定义测试环境(对于类似浏览器的测试，可以是 'jsdom')
    moduleFileExtensions: ['ts', 'tsx', 'js'], // 添加 TypeScript 扩展
    transform: {
        '^.+\.tsx?$': 'ts-jest', // 使用 ts-jest 转换 TypeScript 文件
    },
};

此设置告诉 Jest 使用 ts-jest 处理 TypeScript 文件。

使用 TypeScript 编写测试

一切设置完成后，您可以开始使用 TypeScript 编写测试。 Jest 将自动处理和编译 .ts 或 .tsx 文件。

// math.ts
export const add = (a: number, b: number): number => a + b;

// math.test.ts
import { add } from './math';

test('adds two numbers', () => {
    expect(add(1, 2)).toBe(3);
});

要运行测试，只需使用:

npx jest

此设置允许您直接测试 TypeScript 代码，并完全支持类型检查和接口。

Jest - Babel 集成

Jest 与 Babel 集成以支持最新的 ECMAScript 功能，包括 JSX、ES6+ 语法和其他实验性 JavaScript 功能。 Babel 首先处理您的代码，因此 Jest 可以使用转换后的版本运行测试。

安装依赖项

要 将 Jest 与 Babel 集成，您需要安装所需的 Babel 依赖项:

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

这将安装 Jest 以及必要的 Babel 包，以便与您的项目集成。

配置 Babel

接下来，通过在项目的根目录中创建 .babelrc 或 babel.config.js 文件来设置 Babel。

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

这将配置 Babel 以处理 ES6+ 和 React 代码。

为 Babel 配置 Jest

Jest 使用 babel-jest 来转换 JavaScript 文件。为确保 Jest 使用 Babel 处理 JavaScript 和 JSX 文件，请像这样更新您的 jest.config.js:

module.exports = {
    transform: {
        '^.+\.jsx?$': 'babel-jest', // 使用 Babel 处理 JS 和 JSX 文件
    },
    testEnvironment: 'jsdom', // 测试 React 组件所必需
};

使用 Babel 编写测试

使用此配置，Jest 将能够运行包含 ES6+、JSX 和其他现代 JavaScript 语法的测试。以下是一个简单的 React 测试示例:

// MyComponent.jsx
import React from 'react';

const MyComponent = () => <div>Hello, world!</div>;

export default MyComponent;

// MyComponent.test.jsx
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

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

设置 Babel 后，只需使用以下命令运行测试:

npx jest

Jest 将在运行测试之前使用 Babel 转译您的代码。

Jest - Webpack 集成

将 Jest 与 Webpack 集成在测试使用 Webpack 功能(如导入、静态资产或自定义模块)的代码时很有用。

安装依赖项

首先安装必要的Webpack 相关依赖项。这将设置 Jest、Webpack 和 Babel 集成:

npm install --save-dev jest-webpack babel-jest webpack webpack-cli

配置 Webpack

接下来，创建或修改您的 webpack.config.js 文件以定义 Webpack 应如何捆绑您的代码。如果您将 Babel 与 Webpack 一起使用，您的配置可能如下所示:

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env', '@babel/preset-react'],
            },
            },
        },
        ],
    },
};

此配置告诉 Webpack 使用 Babel 捆绑 JavaScript 和 React 文件。

配置 Jest 以使用 Webpack

要使 Jest 了解 Webpack 的捆绑系统，请更新您的 jest.config.js 文件:

module.exports = {
    preset: 'jest-webpack', // 使用与 Webpack 相关的 Jest 设置
    transform: {
        '^.+\.jsx?$': 'babel-jest', // 将 Babel 用于 JS 和 JSX 文件
    },
    moduleNameMapper: {
        '\.css$': 'identity-obj-proxy', // 映射静态资产(例如 CSS 文件)
    },
};

编写测试

现在 Jest 和 Webpack 已集成，您可以开始编写测试。以下是一个简单的 React 测试示例:

// MyComponent.jsx
import React from 'react';

const MyComponent = () => <div>Hello, world!</div>;

export default MyComponent;

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

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

此测试检查 MyComponent 是否正确呈现文本"Hello, world!"。

要运行测试，请执行以下命令:

npx jest

Jest 将在运行测试时处理 Webpack 的模块系统和捆绑。