汪图南
  • RAG

    • RAG
  • 快速入门
  • 高级技巧
前端面试之道
  • 打包工具

    • Webpack
    • Rollup
  • TypeScript

    • TypeScript基础
    • TypeScript类型挑战
  • CSS预编译器

    • SASS
  • 自动化测试

    • Vue应用测试
  • Vue2.0源码分析
  • Vue3.0源码分析
  • 数据结构和算法(基础)
  • LeetCode(刷题)
  • JavaScript书籍

    • 你不知道的JavaScript(上)
    • 你不知道的JavaScript(中下)
    • JavaScript数据结构和算法
    • JavaScript设计模式与开发实践
    • 深入理解ES6
  • Git书籍

    • 精通Git
Github
  • RAG

    • RAG
  • 快速入门
  • 高级技巧
前端面试之道
  • 打包工具

    • Webpack
    • Rollup
  • TypeScript

    • TypeScript基础
    • TypeScript类型挑战
  • CSS预编译器

    • SASS
  • 自动化测试

    • Vue应用测试
  • Vue2.0源码分析
  • Vue3.0源码分析
  • 数据结构和算法(基础)
  • LeetCode(刷题)
  • JavaScript书籍

    • 你不知道的JavaScript(上)
    • 你不知道的JavaScript(中下)
    • JavaScript数据结构和算法
    • JavaScript设计模式与开发实践
    • 深入理解ES6
  • Git书籍

    • 精通Git
Github
  • Rollup基础

    • Rollup介绍
    • 核心概念
    • 基础配置
    • 配置项类型提示
    • 配置package.json
    • 常用插件
  • Rollup配置案例

    • Babel转义
    • 支持TypeScript
    • 环境区分
    • Eslint
    • 支持Jest自动化测试
    • 提交规范
    • Changelog

支持Jest自动化测试

如果需要支持Jest自动化测试,需要我们安装额外的npm包:

# 安装jest
$ npm install jest -D

因为要测试的文件是包含ts代码,因此我们需要再安装其它的包:

$ npm install babel-jest ts-jest -D

安装完毕后,在根目录下新建jest.config.js文件,并填写配置:

module.exports = {
  preset: 'ts-jest',
  testMatch: [
    "**/tests/**/*.(spec|test).(js|jsx|ts|tsx)"
  ],
  collectCoverage: true,
  coverageDirectory: '<rootDir>/tests/coverage',
  collectCoverageFrom: [
    'src/**/*.(js|jsx|ts|tsx)'
  ]
}

配置说明:

  • preset:要测试的代码,包含ts的内容,使用ts-jest来处理。
  • testMatch:测试哪些文件,以上配置表明我们要测试tests目录下所有.(spce|test).(js|jsx|ts|tsx)。
  • collectCoverage:生成测试报告。
  • coverageDirectory: 测试报告存放位置。
  • collectCoverageFrom:测试报告收集范围。

配置文件撰写完毕后,我们在根目录下新建一个tests目录,并添加一个测试文件index.test.js。

// 如果需要使用import,需要自己额外的配置
const { add } = require('../src/index')

describe('index.ts', () => {
  it('test add func', () => {
    expect(add(1, 2)).toBe(3)
  })
})

最后,需要在package.json文件中添加一条测试命令:

"scripts": {
  "dev": "rollup -w -c rollup.dev.config.js",
  "build": "rollup -c rollup.prod.config.js",
  "test": "jest"
}

运行npm run jest命令,它会在控制台输出一些测试覆盖率的信息。

PASS tests/index.test.js
  index.ts
    √ test add func (2 ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files |   83.33 |      100 |      50 |      75 | 
 index.ts |   83.33 |      100 |      50 |      75 | 6
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.345 s
Ran all test suites.
最后更新时间: 2025/5/6 15:36
贡献者: wangtunan
Prev
Eslint
Next
提交规范