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时转换ERB文件。

方法

我认为我可以将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和行为。在documentation for the transform config option中只有一个not very helpful example，就文档而言，仅此而已，除非我错过了什么。

我还注意到babel-jest有一个createTransformer函数，听起来像是有用的，或者至少具有启发性，但是我再也找不到关于它的作用的文档。

如果有人对创建自定义Jest转换的细节有指导，或者至少有一些更好的文档，那就太好了！或者，如果我以错误的方式进行操作，该怎么办？

Answer 1

您可以看看ts-jest。 https://github.com/kulshekhar/ts-jest/blob/master/src/ts-jest-transformer.ts。它是在打字稿中输入的

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

我认为转换器是使用类构造函数或通过工厂函数createTransformer创建的。

Answer 2

根据我对 ts-jest-transformer 和 jest-erb-transformer 的理解，您似乎需要导出具有公共 process 的对象或导出 createTransformer 方法，这些方法创建的转换器对象具有process 方法。

在 ts-jest 之前运行的简单代码示例

transform-example.js

const tsJest = require('ts-jest');
const t = tsJest.createTransformer();

module.exports = {
   process(fileContent, filePath, jestConfig) {
      const res = t.process(fileContent, filePath, jestConfig)
      console.log(filePath);
      return res;
   }
 }

jest.config.js

module.exports = {
   transform: {
      '^.+\\.tsx?$': ['<rootDir>/transform-example']
   }
}

运行它会运行打字稿测试（就像 ts-jest 一样）并记录在测试中转换的所有文件路径。

在Jest中创建自定义转换

2 个答案: