在 Jest 中使用 TypeScript 中的配置-JavaScript中文网-JavaScript教程资源分享门户

Jest 是一个 JavaScript 测试框架，没有类型驱动的编程是很难达到高效和准确性的。TypeScript 是一个 JavaScript 的超集，它提供了完善的类型系统和更好的 IDE 提示，这使得 TypeScript 在我们的开发中越来越受欢迎。在 Jest 中使用 TypeScript 的配置可以让我们的测试更加健壮和可靠，本文将对此进行详细讲解。

环境准备

首先，我们需要安装 Jest 和 TypeScript：

npm install jest typescript -D

然后，在你的 package.json 中添加以下配置：

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "preset": "ts-jest"
  }
}

这段代码会自动运行 Jest，同时添加了一个 ts-jest 的 preset。下面我们来详细解释一下这段代码。

首先，我们需要在 jest 内的配置对象中添加 preset 属性，设为 "ts-jest"，这是一个可以为 Jest 提供 TypeScript 支持的 preset。这个 preset 可以让 Jest 使用 TypeScript 编写的测试文件。

其次，我们在 package.json 的 scripts 对象中添加了一个 test 属性。当我们运行 npm test 命令时，它会自动执行 Jest。

配置基础

现在，我们已经设置了 Jest 的 TypeScript 配置，让我们来编写一个基本的测试用例，用以验证我们的环境是否正确配置。

it('adds 1 + 2 to equal 3', () => {
  expect(1 + 2).toBe(3);
})

这段代码非常简单，意思就是验证 1 + 2 是否等于 3。当代码运行成功时，Jest 会自动将测试结果输出到控制台，形如下面的输出：

PASS  ./index.test.ts
  √ adds 1 + 2 to equal 3 (4 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.838 s
Ran all test suites.

配置选项

Jest 支持许多配置选项，让我们来看看其中几个比较重要的选项。

transform

这个选项主要是告诉 Jest 触发测试之前需要先将 TypeScript 文件编译成 JavaScript。我们可以使用官方预设的 ts-jest 或者 babel-jest 来将 TypeScript 文件编译为 JavaScript 。如果需要使用 tsconfig.json 中的配置，ts-jest 会自动发现并使用。

{
  "jest": {
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    }
  }
}

testRegex

这个选项主要是告诉 Jest 什么样的文件应该被测试。默认情况下，Jest 会查找包含 .test.js 或 .spec.js 的 JavaScript 文件。但是，如果我们使用 TypeScript 编写测试用例，我们需要使用正则表达式来告诉 Jest 查找 .test.ts 或 .spec.ts 文件：

{
  "jest": {
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
  }
}

moduleNameMapper

这个选项允许我们在测试中模拟模块。如果我们在测试中需要模拟一些模块，我们需要在 moduleNameMapper 中进行设置：

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

上面的设置意味着任何以 @/ 开头的变量都会被转换成 src/ 文件夹下的路径。

globals

Jest 的 globals 选项允许我们在测试中访问全局变量。我们可以在 globals 选项中告诉 Jest 我们要使用哪些全局变量：

// javascriptcn.com 代码示例
{
  "jest": {
    "globals": {
      "TS_JEST": {
        "diagnostics": false,
        "tsConfig": "<rootDir>/tests/tsconfig.json"
      }
    }
  }
}

这个例子中，选项 TS_JEST 中的 diagnostics 表示是否输出更多的 TypeScript 诊断信息。同时，tsConfig 指定了特定的 TypeScript 配置文件路径。

总结

在 Jest 中使用 TypeScript 可以增加我们对代码的信任度以及测试的健壮性。在上述几个选项的帮助下，我们可以很方便地让 Jest 支持 TypeScript。通过支持 TypeScript，我们可以在保证代码健壮性和可维护性的同时提高我们的开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6582d93ed2f5e1655dde99a3