将作用域包与 Jest 一起使用

Question

我正在使用 react-native 和 typescript 开发应用程序并使用 Jest 进行测试，但是当我使用范围包 (@assets) 时遇到问题，jest 找不到路径并给出错误。

目录结构如下：

project/
  assets/
    img/
      foo.png
    package.json
  src/
    Foo.ts
  build/
    Foo.js


// assets/package.json
{
  "name": "@assets" // My @assets scope
}

// build/Foo.js
const image = require('@assets/img/foo.png'); // <- error in Jest

所以当我开玩笑的时候：

npm run jest build/

找不到'@assets/img/foo.png'并抛出错误：

无法从“Foo.js”中找到模块“@assets/img/logo.png”

如何在 Jest 中使用范围包？

Jest 版本：20.0.4

谢谢

Answer 1

对于那些在作用域组织下使用私有包的人，我是这样解决这个问题的：

"jest": {
  "moduleNameMapper": {
    "^@org-name/(.*)$": "<rootDir>/node_modules/@org-name/$1/dist/$1.es5.js"
  }
}

这假设所有作用域包都具有与其导出模块相似的路径。如果没有，您可以单独指定它们：

"jest": {
  "moduleNameMapper": {
    "^@org-name/package-one$": "<rootDir>/node_modules/org-name/package-one/dist/package.js",
    "^@org-name/package-two$": "<rootDir>/node_modules/org-name/package-two/build/index.js"
  }
}

Answer 2

只需要在 jest config 中定义moduleNameMapper：

// package.json
"jest": {
  "moduleNameMapper": {
      "^@assets.+\\.(png)$": "<rootDir>/assetsTransformer.js"
  },
}

// assetsTransformers.js
const path = require('path');

module.exports = {
  process(src, filename, config, options) {
    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
  },
};

感谢this comment :-)