51Testing
登录
电脑版

Jest:目前最广泛使用的前端测试框架

2023-11-10 09:53作者:写代码的宝哥来源:写代码的宝哥

  Jest 是一个简单易用的 JavaScript 测试框架。最初由 Meta 公司团队维护。2022 年 5 月,Meta 公司正式将自己的开源项目Jest 移交给 OpenJS Foundation[1],这表示 Jest 由公司驱动变为社区驱动,有 OpenJS Foundation 保底,Jest 将不会因公司发展需要而停止维护。
  下面我们就来学习吧。
  快速上手
  初始化项目
  首先创建项目目录:
  mkdir jest-demos && cd jest-demos
  npm init -y
  然后,安装 Jest 依赖:
  npm install --save-dev jest
  第一个测试文件
  创建待测试文件 src/sum.js:
  function sum(a, b) {
    return a + b;
  }
  module.exports = sum;
  创建测试文件 __tests__/sum.test.js:
  const sum = require('../src/sum');
  test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
  注:按照约定,测试文件以 .test.js 或 .spec.js 结尾,并且放在 __tests__ 目录中。
  package.json 文件中增加脚本:
  {
    "scripts": {
      "test": "jest"
    }
  }
  终端上执行命令 npm test,查看结果。
  这样我们就完成了第一个测试文件的编写和集成。
  存在的问题
  不过目前存在 2 个问题:
  ·Jest 只支持 CommonJS 代码,并不支持 ES Module 代码,为了测试 ES Module 代码,我们只能将 ES Module 代码转换为 CommonJS 代码
  · Jest 也不支持 TypeScript 代码
  如何解决呢?有 2 个方案:
  使用 Babel + @babel/preset-env + @babel/preset-typescript 的组合,或者
  使用 ts-jest(基于 TypeScript)
  不过为了得到完整的类型检查支持,我们选择 ts-jest。下面就来学习。
  配置 ts-jest
  ts-jest 本质上就是 Jest transformer,支持你在 TypeScript 项目里使用 Jest。
  这部分配置我们参照官方教程[2]。
  安装必要依赖
  首先安装必要依赖:
  npm install --save-dev ts-jest jest typescript @types/jest
  ·ts-jest 是我们必须要安装的
  · ts-jest 依赖 jest 和 typescript,因此也安装下(jest 在上一步已经安装,所以在这里是可选的)
  · 安装 @types/jest 是为了获取类型提示支持
  生成配置文件
  然后,生成 Jest 配置文件——这里借助 ts-jest 指令来生成:
  npx ts-jest config:init
  这一步会在项目根目录下创建 jest.config.js 文件:
  /** @type {import('ts-jest').JestConfigWithTsJest} */
  module.exports = {
    preset: 'ts-jest',
    testEnvironment: 'node',
  };
  修改文件后缀
  将 src/sum.js 和 __tests__/sum.test.js 的文件后缀改成 .ts,并将代码改成 ES Module 方式组织。
  // src/sum.ts
  function sum(a, b) {
    return a + b;
  }
  export default sum;
  // __tests__/sum.test.ts
  import sum from "../src/sum";
  test("adds 1 + 2 to equal 3", () => {
    expect(sum(1, 2)).toBe(3);
  });
  终端上执行命令 npm test,查看结果。
  也成功了。不过有一条告警,建议我们将 tsconfig.json 中的 esModuleinterop 字段设置成 true。
  释出 tsconfig.json
  为了设置 esModuleinterop 字段,我们将 tsconfig.json 文件释放出来。
  $ npx tsx --init
  Created a new tsconfig.json with:         
                                             TS
    target: es2016
    module: commonjs
    strict: true
    esModuleInterop: true
    skipLibCheck: true
    forceConsistentCasingInFileNames: true
  释出的配置中包含 esModuleInterop: true 选择,因此我们也无需修改。不过因为开启了严格模式(strict: true),因此还要对源代码做类型注解。
  // src/sum.ts
  function sum(a: number, b: number) {
    return a + b;
  }
  export default sum;
  再次运行测试——成功!
  本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理
Jest 测试框架
当前没有评论点击发表评论

相关阅读