在 Jest 中创建自定义转换

Question

我正在尝试为 Jest 创建自定义转换，但遇到了文档障碍，这让我问自己是否走在正确的轨道上。

问题

我有一个为 Vue JS 应用程序提供服务的 Rails 项目。我想为 JS 应用编写 Jest 测试。为了将配置变量从 Rails 传递到应用程序，我使用 ERB 来模板化少量.js文件。例如：

// in server-routes.js.erb
export default {
  reports: '<%= Rails.application.config.relative_url_root %><%= Rails.application.routes.url_helpers.reports_path %>',
  ...

在我为 Vue 应用程序构建的 Webpack 中，我习惯于rails-erb-loader在*.erb文件传递到构建过程的其余部分之前对其进行预处理。

然而，当我运行我的 JS 测试时，Jest 对 ERB 加载器一无所知（足够了）。所以我的目标是为 Jest 添加一个自定义转换，以便在运行npm test.

方法

我以为我可以rails-erb-loader用作 Jest 转换：

// package.json
"jest": {
  "moduleFileExtensions": [
    "js",
    "json",
    "vue"
  ],
  "moduleDirectories": [
    "<rootDir>/node_modules"
  ],
  "transform": {
    ".*\\.(vue)$": "vue-jest",
    "^.+\\.js$": "babel-jest",
    "^.+\\.js\\.erb$": "rails-erb-loader"
  },

然而，这不起作用，因为 Jest 转换和 Webpack 加载器似乎具有不同的签名。特别是，Jest 需要一个process函数：

$ npm test
 FAIL  app/javascript/components/__tests__/dummy.test.js
 ? Test suite failed to run
TypeError: Jest: a transform must export a `process` function.

> 101 | import ServerRoutes from '../server-routes.js.erb';
      | ^

  at ScriptTransformer._getTransformer (node_modules/@jest/transform/build/ScriptTransformer.js:291:15)
  at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:353:28)
  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:457:40)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
  at app/javascript/components/related-media.vue:101:1
  at Object.<anonymous> (app/javascript/components/related-media.vue:232:3)

这就是我卡住的地方，因为我看不到它在哪里记录了process函数的 API 和行为应该是什么。在config 选项的文档中，transform有一个不是很有帮助的示例，就文档而言就是这样，除非我遗漏了什么。

我还注意到它babel-jest有一个createTransformer功能，听起来可能很有帮助，或者至少很有启发性，但我再次找不到关于它做什么的任何文档。

如果有人对创建自定义 Jest 转换的细节有任何指导，或者至少有一些更好的文档，那就太好了！或者，如果我以错误的方式解决这个问题，我该怎么办？

Answer 1

你可以看看 ts-jest。https://github.com/kulshekhar/ts-jest/blob/master/src/ts-jest-transformer.ts。它是打字稿，所以是打字的

或者找到启动转换过程的笑话代码。我不认为找到那么难。

我认为变压器要么使用类构造函数创建，要么通过工厂函数 createTransformer 创建。