如何在 Jest 监视模式中排除文件

Jest 是一个流行的 JavaScript 测试框架,广泛用于前端和 Node.js 开发。在开发过程中,我们经常需要监视代码的变化并自动运行测试。然而,在某些情况下,你可能希望排除一些特定的文件或目录,以避免不必要的测试运行或减少噪音。本文将详细介绍如何在 Jest 监视模式中排除文件。

使用 watchPathIgnorePatterns 配置

Jest 提供了一个配置选项 watchPathIgnorePatterns,允许你在监视模式下忽略指定路径的文件和目录。这个配置可以让你更精确地控制哪些文件应该被监视。

基本用法

首先,在你的 Jest 配置文件(通常是 jest.config.jspackage.json 中的 jest 字段)中添加 watchPathIgnorePatterns 选项。以下是一个简单的示例:

// jest.config.js
module.exports = {
  watchPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/dist/'],
};

在这个示例中,Jest 将忽略 node_modulesdist 目录下的所有文件和子目录。

使用通配符

你也可以使用通配符来更灵活地匹配路径。例如,如果你想忽略所有的 .log 文件,可以这样做:

// jest.config.js
module.exports = {
  watchPathIgnorePatterns: ['**/*.log'],
};

这里的 ** 表示任意目录层级。

结合其他配置

你还可以结合其他 Jest 配置选项来进一步细化你的测试策略。例如,使用 testPathIgnorePatterns 来排除特定的测试文件:

// jest.config.js
module.exports = {
  watchPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/dist/'],
  testPathIgnorePatterns: ['**/*.e2e.spec.js'], // 忽略所有以 .e2e.spec.js 结尾的文件
};

使用 watchman 配置

如果你使用了 watchman 来监视文件变化,Jest 还允许你通过配置 watchman 的忽略规则来进一步优化性能。

安装和配置 watchman

首先,确保你已经安装了 watchman

brew install watchman  # macOS 用户
sudo apt-get install watchman  # Ubuntu 用户

然后,在你的 Jest 配置文件中启用 watchman 并添加忽略规则:

// jest.config.js
module.exports = {
  watchPlugins: [
    'jest-watch-typeahead/filename',
    'jest-watch-typeahead/testname',
  ],
  watchPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/dist/'],
  watchman: true,
};

通过这种方式,你可以利用 watchman 的高效监视能力来减少不必要的文件扫描。

示例项目

为了更好地理解这些配置选项的使用方法,我们可以通过一个简单的项目来进行演示。假设你有一个 React 项目,并希望在 Jest 监视模式中排除 node_modulesdist 和所有的 .log 文件。

创建示例项目

首先,创建一个新的 React 项目:

npx create-react-app jest-watch-example
cd jest-watch-example

然后,安装 Jest(如果还没有安装)并配置 jest.config.js 文件:

// jest.config.js
module.exports = {
  watchPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/dist/', '**/*.log'],
};

接下来,在项目中创建一些测试文件和日志文件来验证配置是否生效。

创建测试文件

src 目录下创建一个简单的组件及其测试文件:

// src/Hello.js
import React from 'react';

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

export default Hello;
// src/Hello.test.js
import React from 'react';
import { render } from '@testing-library/react';
import Hello from './Hello';

test('renders learn react link', () => {
  const { getByText } = render(<Hello />);
  const element = getByText(/hello, jest!/i);
  expect(element).toBeInTheDocument();
});

创建日志文件

在项目根目录下创建一个 .log 文件:

echo "This is a log file" > example.log

运行 Jest 监视模式

最后,运行 Jest 的监视模式并观察输出结果:

npm test -- --watch

你应该会看到只有 Hello.test.js 被监视和运行,而 node_modulesdist.log 文件被忽略。

总结

通过本文的介绍,你已经学会了如何在 Jest 监视模式中排除特定文件和目录。这不仅有助于提高测试性能,还能减少不必要的噪音和干扰。希望这些技巧能帮助你在使用 Jest 进行开发时更加高效和灵活。