Jest测试框架全方位指南：从安装，preset、transform、testMatch等jest.config.js配置，多模式测试命令到测试目录规划等最佳实践

JINGWHALE1

已于 2024-04-28 09:41:36 修改

阅读量1k

点赞数 23

分类专栏： JINGWHALE 前端进阶文章标签：单元测试 vue 前端前端框架后端小程序职场发展

于 2024-04-28 08:36:55 首次发布

JINGWHALE

本文链接：https://blog.csdn.net/u012347650/article/details/138265634

版权

JINGWHALE 前端进阶专栏收录该内容

66 篇文章 1 订阅

订阅专栏

在这里插入图片描述
Jest是一个功能全面、易用且高效的JavaScript测试框架，特别适合React、Vue、Node.js等应用。它内置了断言库、模拟函数、测试覆盖率报告、并行测试执行等功能，支持异步测试和Snapshot测试，极大地简化了前端和后端的单元测试及集成测试流程，是持续集成和测试驱动开发的理想选择。

本文以Vue 项目为蓝本，详细介绍了Jest的安装，jest.config.js preset、transform、moduleNameMapper、testMatch、coverageThreshold、collectCoverage等主要配置，单个测试文件、整个目录或模式匹配、分类与筛选测试、并行运行与观察模式、代码覆盖率报告等主要测试命令，项目测试目录规划等Jest最佳实践。

一、安装Jest

首先，确保你的项目已经使用了 npm 或 yarn 初始化，并且已经安装了 Vue CLI 创建的项目结构。然后，通过以下命令安装 Jest 及其相关依赖：

在 Vue 项目中安装和配置 Jest 以进行单元测试涉及几个关键步骤，包括安装必要的依赖包、配置 Jest、以及编写并运行测试用例。以下是详细的步骤说明及一个简单的实例。

1. 环境准备

确保你的开发环境中已安装 Node.js，因为我们将使用 npm 或 yarn 来管理项目依赖。

2. 创建 Vue 项目

如果你还没有一个 Vue 项目，可以通过 Vue CLI 快速创建一个。首先，确保全局安装了 Vue CLI：

npm install -g @vue/cli
# 或者使用 yarn
yarn global add @vue/cli

然后创建一个新的 Vue 项目：

vue create my-vue-project
cd my-vue-project

3. 安装 Jest 和相关依赖

在 Vue 项目根目录下，安装 Jest、Vue Test Utils 以及 Vue Jest，这些是进行 Vue 单元测试的基本依赖：

npm install --save-dev jest @vue/test-utils vue-jest
# 或者使用 yarn
yarn add --dev jest @vue/test-utils vue-jest

对于 Vue 3 的项目，还需要安装 @vue/vue-next-jest：

npm install --save-dev @vue/vue-next-jest
# 或者使用 yarn
yarn add --dev @vue/vue-next-jest

二、配置jest.config.js

在Vue项目中，jest.config.js的配置对于高效和准确地执行单元测试至关重要。以下是一些常用配置项的最佳实践，帮助你优化测试体验和结果：

1. roots

目的：指定Jest搜索测试文件的根目录。
最佳实践：根据项目结构合理设置，通常为'<rootDir>/src'或包含tests的目录。

示例:

roots: ['<rootDir>/src', '<rootDir>/tests/unit']

2. preset

presets是一个配置项，用于指定项目中使用的预设（preset）。预设是一组预先配置好的转换器和插件，它们能够帮助Jest快速配置，以便处理特定的项目结构或技术栈，比如Vue、React或Node.js项目。通过使用预设，可以简化Jest的配置，避免重复编写常见的配置项。

Vue CLI 通常会设置 preset 为 @vue/cli-plugin-unit-jest 或 @vue/cli-plugin-unit-jest/presets/typescript-and-babel（对于 TypeScript 项目）。这个预设包含了 Jest 的基本配置，包括 Babel 转换、Vue 文件处理、以及环境设置等，使得开发者无需从零开始配置 Jest。

预设的工作原理

当Jest运行时，它会查找jest.config.js文件中定义的预设，并根据这些预设自动应用相应的转换规则和配置。这意味着，预设可以处理如文件转换（例如将ES6+代码转换为ES5）、模块解析规则、环境配置等任务。

2.1. Vue CLI预设（Preset）

对于使用Vue CLI创建的项目，常见的预设是@vue/cli-plugin-unit-jest。这个预设包含了处理Vue单文件组件（SFC）和Vue特定配置所需的设置。

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  // 其他配置...
};

这个配置告诉Jest使用Vue CLI提供的预设，该预设会自动配置Vue组件的转换、模块别名映射等。

Vue CLI预设（Preset）是在Vue CLI 3及以上版本引入的概念，它是一种快速配置Vue项目的方法，允许开发者通过选择预设模板来快速搭建项目结构、配置脚手架工具，并自动安装必要的依赖。Vue CLI预设简化了初始化配置过程，使得开发者可以快速启动项目，而不必从零开始配置所有细节。

Vue CLI预设的工作原理

Vue CLI预设本质上是一系列配置选项的集合，包括但不限于Babel、PostCSS、ESLint、单元测试、e2e测试等配置。当你创建新项目时，Vue CLI会询问你选择一个预设，或者你可以通过命令行参数直接指定预设。预设可以是Vue CLI内置的，也可以是社区贡献的或你自己创建的。

内置预设

Vue CLI提供了几个内置预设，例如：

default: 包含基础的Babel、ESLint和单元测试配置，适用于大多数项目。
typescript: 在默认配置基础上增加了对TypeScript的支持。
babel: 仅包含Babel配置，适合需要更多自定义的项目。
manually: 不使用任何预设，手动选择每项配置，提供最大的灵活性。

2.2. Babel预设

如果你的项目使用了Babel进行JavaScript转换，可能需要配置Babel的预设来确保Jest可以理解ES6+的代码。

module.exports = {
  preset: '@babel/preset-env',
  transform: {
    '^.+\\.js$': 'babel-jest',
    // 处理Vue组件
    '^.+\\.vue$': 'vue-jest',
  },
  // 其他配置...
};

这里，@babel/preset-env是一个常用的Babel预设，它根据目标环境自动选择需要的转译插件。

2.3.自定义预设

除了使用现成的预设外，你还可以创建自己的预设。自定义预设通常是一个包含Jest配置对象的模块，可以是本地文件或npm包。

module.exports = {
  preset: './my-custom-preset.js',
  // 其他配置...
};

在my-custom-preset.js中，你可以自定义Jest的配置，比如添加特定的转换器、模块映射等。

结论

presets配置项是Jest配置中一个强大的特性，它简化了测试配置，特别是对于特定框架和技术栈的支持。通过选择合适的预设，可以快速搭建起一个高效且符合项目需求的测试环境。记住，根据你的项目具体情况选择或定制预设，以获得最佳的测试体验。

3. transform

目的：定义不同文件类型的转换规则，使Jest能够理解和执行测试。
最佳实践：确保Vue文件通过vue-jest转换，JS/TS文件通过babel-jest或ts-jest转换。
- '^.+\\.vue$': 'vue-jest': 这一行告诉 Jest 如何处理 .vue 文件。vue-jest 是一个用于将 Vue 单文件组件转换为 Jest 可以理解和测试的格式的插件。
- 对于 .js 或 .ts 文件，可能会有相应的转换规则，如使用 babel-jest 或针对 TypeScript 的配置。

示例:

transform: {
  '^.+\\.vue$': 'vue-jest',
  '^.+\\.js$': 'babel-jest',
  '^.+\\.ts$': 'ts-jest',
  '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/jest/file-mock.js',
}

4. moduleNameMapper

目的：解决模块导入路径别名问题，如Vue CLI中的@/。
最佳实践：映射所有的别名到实际路径，避免测试中出现找不到模块的问题。

示例:

moduleNameMapper: {
  '^@/(.*)$': '<rootDir>/src/$1',
}

5. testMatch

目的：确定哪些文件作为测试文件执行。
最佳实践：使用精确的模式来选择测试文件，避免不必要的测试执行。

示例:

testMatch: [
  '<rootDir>/tests/unit/**/*spec.(js|jsx|ts|tsx)',
  '<rootDir>/src/**/__tests__/*.(js|jsx|ts|tsx)'
]

6. collectCoverage、collectCoverageFrom、coverageReporters和coverageDirectory

目的：开启代码覆盖率统计。
最佳实践：开发阶段开启，生产部署前关闭或降低覆盖率要求。
- collectCoverage: 是否收集代码覆盖率信息，默认可能为 false，但在实际开发中通常会开启。
- collectCoverageFrom：定义了哪些文件或目录应当被纳入代码覆盖率计算中，以及哪些应被排除。
- coverageReporters: 如果开启覆盖率收集，这一项指定了覆盖率报告的输出格式，常见值有 ['lcov', 'text', 'clover', 'html']。
- coverageDirectory：指定了生成的覆盖率报告文件存放的目录。
示例:

module.exports = {
  // 是否收集代码覆盖率信息
  collectCoverage: true,

  // 指定哪些文件或目录参与代码覆盖率计算
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}',
    '!src/**/*.d.ts', // 排除类型定义文件
    '!src/index.js', // 可以排除一些不需要测试覆盖率的文件
  ],

  // 代码覆盖率报告的输出目录
  coverageDirectory: 'coverage',

  // 代码覆盖率报告的格式，可以是多个
  coverageReporters: [
    'lcov', // 生成LCov格式的报告，适合上传到Codecov、Coveralls等服务
    'text-summary', // 控制台输出简洁的文本摘要
    'clover', // Clover格式，兼容一些IDE和CI系统
    'json', // 输出JSON格式，方便进一步处理
  ],

  // 其他配置...
};

在这个示例中：

collectCoverage被设置为true，表示Jest在运行测试时将会收集代码覆盖率数据。
collectCoverageFrom定义了哪些文件或目录应当被纳入代码覆盖率计算中，以及哪些应被排除。这里我们包括了src目录下的所有.js、.jsx、.ts、.tsx文件，但排除了类型定义文件（.d.ts）和可能的入口文件（如index.js）。
coverageDirectory指定了生成的覆盖率报告文件存放的目录，这里是项目根目录下的coverage文件夹。
coverageReporters定义了报告的输出格式，包括了lcov（广泛应用于代码覆盖率报告工具和服务）、text-summary（在命令行直接输出概览信息）、clover（适合某些CI/CD系统）和json（便于程序处理或进一步分析）。

这些配置可以根据具体项目需求进行调整，以满足不同的测试报告和集成需求。

7. coverageThreshold

目的：设置代码覆盖率阈值，确保测试充分性。
最佳实践：根据项目标准灵活设置，避免过低或过高。

示例:

coverageThreshold: {
  global: {
    branches: 80,
    functions: 80,
    lines: 80,
    statements: 80,
  },
}

8. testEnvironment

目的：指定测试环境，如Node.js环境或模拟浏览器环境。
最佳实践：Vue项目推荐使用jsdom作为测试环境。
示例:
```
testEnvironment: 'jsdom'
```

9. setupFilesAfterEnv

目的：在每个测试文件运行之后执行的脚本，用于全局设置或mock函数。
最佳实践：配置全局测试工具或环境变量。

示例:

setupFilesAfterEnv: ['<rootDir>/jest.setup.js']

遵循以上最佳实践，可以确保你的jest.config.js配置既高效又灵活，适应Vue项目单元测试的各种需求。

三、Jest 常用测试命令

在Vue项目中，使用Jest常用测试命令主要包括以下几点：

1.单个测试文件

如果你想运行某个具体的测试文件，可以在命令行中指定该文件的路径。例如，运行MyComponent.spec.js：

npm run test:unit -- tests/unit/components/MyComponent.spec.js
# 或者使用yarn
yarn test:unit tests/unit/components/MyComponent.spec.js

2.执行整个目录或模式匹配

如果你想要运行整个目录下的测试，或者使用通配符匹配多个测试文件，可以直接使用目录路径或模式：

npm run test:unit -- tests/unit
# 或者只运行某一类型文件，如所有.spec.js文件
npm run test:unit -- '**/*.spec.js'
# 使用yarn类似
yarn test:unit tests/unit

3. 分类与筛选测试

Jest允许你通过正则表达式筛选要运行的测试，这在大型项目中特别有用，可以快速定位和运行特定的测试组：

# 仅运行包含 "login" 字符串的测试
npm run test:unit -- -t login

4. 并行运行与观察模式

并行运行：Jest默认以并行方式运行测试，以加快速度。你也可以通过配置调整并发度。
观察模式：使用--watch选项可以在文件改变时自动重跑测试，这对于开发过程中频繁迭代非常有用。

npm run test:unit -- --watch

5. 代码覆盖率报告

确保在jest.config.js中配置了代码覆盖率收集，并且在需要时生成报告：

# 运行测试并生成覆盖率报告
npm run test:unit -- --coverage

6. CI/CD集成

在CI/CD流程中，通常不需要使用观察模式或生成交互式报告，而是直接运行所有测试并检查测试是否全部通过。可以设置脚本确保测试的自动执行，并作为持续集成的一部分。

总结

运行Vue项目中的Jest测试，关键是合理组织测试文件、熟练使用命令行参数进行灵活的测试选择与执行，并结合CI/CD流程确保代码质量。通过遵循上述最佳实践，可以高效地管理和执行测试，持续提升软件质量。

四、Jest 最佳实践

在项目中实施 Jest 进行单元测试时，采用以下最佳实战可以显著提高测试效率和代码质量：

1. 分层次测试

将单元测试、集成测试分开编写，确保单元测试专注于单一组件或函数的行为。
- 单元测试：针对最小可测试单元（如函数、组件）进行测试，确保每个部分单独工作无误。
- 集成测试：测试组件或模块之间的交互，验证它们协同工作的能力，但要避免过度集成，保持测试的独立性和可维护性。
端到端（E2E）测试：虽然不是Jest的强项，但可以与Puppeteer或其他工具结合，对整个应用流程进行测试。

2. 清晰的测试结构

2.1 组织测试文件：遵循与源代码相似的目录结构，便于管理和查找。

在Vue项目中使用Jest进行单元测试时，测试文件的组织和存放遵循一定的最佳实践原则，以便于维护和提高测试效率。

通常，测试文件与被测试的源代码保持相近的目录结构，这有助于快速定位测试文件和理解其关联的业务逻辑。最佳实践是将测试文件与源代码文件放在同一级目录下，或者放在专门的测试目录中。具体做法：

并行结构：在每个业务模块（通常是Vue组件或服务等）的目录下，创建一个与之对应的测试文件。例如，如果你的Vue组件位于 src/components/MyComponent.vue，则对应的测试文件可以命名为 MyComponent.spec.js 或 MyComponent.test.js，并放在同一目录下，或者放在 tests/unit/components/MyComponent.spec.js。
集中测试目录：另一种常见的做法是将所有测试文件统一放在一个或几个集中目录中，如 tests/unit 或 __tests__。在这种结构下，测试文件名通常会明确指向被测试文件，如 tests/unit/components/MyComponent.spec.js。

Vue项目结构示例如下：

src/
  components/
    MyComponent.vue
    AnotherComponent.vue
  services/
    UserService.js
  ...
tests/
  unit/
    components/
      MyComponent.spec.js
      AnotherComponent.spec.js
    services/
      UserService.spec.js
  ...

2.2 命名规范：

测试文件命名采用.spec.js或.test.js后缀，并在描述中清晰表达测试目的，如MyComponent.behavior.spec.js。
测试用例的描述性函数名，使用describe和it（或test）来组织和命名，使得测试意图一目了然。

3. 小而专注的测试：

每个测试用例尽量只验证一个功能点，这有助于快速定位问题。
避免过度使用beforeEach和afterEach，因为它们可能会导致测试之间不必要的耦合。

4. 利用断言库：

Jest 提供了丰富的断言库，如expect。合理选择断言方法，如toBe, toEqual, toHaveBeenCalled等，可以使测试更精确和易读。

5. 利用Mock和Stub

模拟外部服务：对于HTTP请求、数据库访问等外部依赖，使用Jest的mock功能来控制这些依赖的行为，确保测试独立且可预测。
存根（Stub）内部方法：在测试组件时，可以存根内部方法，专注于测试组件的主要逻辑，避免测试无关细节。

6. 异步测试

使用async/await或.resolves/.rejects处理异步操作，确保异步代码的正确测试，例如使用await waitFor(() => expect(...).toBeTruthy())等待状态改变。

7. 优化测试性能

并行测试：使用--runInBand选项来避免并行运行测试时可能遇到的竞态条件问题，但这会降低速度。在开发时可以关闭此选项以加速测试反馈。
缓存：对于大型项目，合理利用缓存机制（如Jest的--cache）来加速重复测试的执行。

8. 代码覆盖率与质量

合理设定覆盖率目标：不要盲目追求100%覆盖率，而是关注重要逻辑的覆盖。
监控和报告：定期检查覆盖率报告，识别未测试区域，及时补充测试。

9. 持续集成集成

自动化测试：集成到CI/CD流程，确保每次提交都能自动运行测试。
失败通知：配置失败时的通知机制，快速响应问题。

10. 持续维护

测试代码审查：如同应用程序代码一样，定期进行测试代码审查，保持测试质量。
重构测试：随着项目发展，适时重构测试代码，保持其简洁和有效性。

10. 文档化

测试文档：编写测试指南和最佳实践文档，帮助团队成员统一测试标准和风格。

11. 利用社区资源

学习和分享：关注Jest官方文档和社区资源，参与讨论，学习他人优秀实践。

通过这些实战技巧，可以确保Jest在项目中的高效运用，不仅提升测试效率，还能保障代码质量，促进团队的持续交付和快速迭代。

遵循上述建议，可以帮助你构建一个结构清晰、易于维护的测试体系，从而提升Vue项目的质量和开发效率。

在这里插入图片描述

JINGWHALE1

关注

23
点赞
踩
29

收藏

觉得还不错? 一键收藏
打赏
1
评论
Jest测试框架全方位指南：从安装，preset、transform、testMatch等jest.config.js配置，多模式测试命令到测试目录规划等最佳实践

本文以Vue 项目为蓝本，详细介绍了Jest的安装，jest.config.js preset、transform、moduleNameMapper、testMatch、coverageThreshold、collectCoverage等主要配置，单个测试文件、整个目录或模式匹配、分类与筛选测试、并行运行与观察模式、代码覆盖率报告等主要测试命令，项目测试目录规划等Jest最佳实践。
复制链接

扫一扫