使用命名导入在Jest测试中导入"constants"

Question

我的项目中有一个 config 和 constants 文件夹。它们分别位于 src\config\test.ts 和 src\constants\index.js。

我已经设置了 Jest，使用 moduleNameMapper 如下所示，这样我就可以只需执行 import config from 'config' 和 import { SOME_CONST } from 'constants'。

"moduleNameMapper": {
  "config$": "<rootDir>/src/config/test.js",
  "constants$": "<rootDir>/src/constants/index.js"
}

然而，在我的测试中，任何使用import { SOME_CONST } from 'constants'的文件总是会得到undefined值，而任何使用config的默认导出的文件都能正常工作。

这是一个已知的问题吗？我做错了什么吗？似乎无法确定。

- dougajmcdonald

---

你找到解决方案了吗？ 我也遇到了同样的问题。 - Subhendu Kundu

@SubhenduKundu 我没有找到完美的解决方案，但找到了一个变通方法。似乎 constants 是某种保留的导入。我在文件和 moduleNameMapper 中将其更改为 appconstants，现在一切都正常工作了。 - dougajmcdonald

Answer 1

我遇到了和你一样的问题，但最终我找到了这个GitHub问题来解决它。看起来constants是一个核心模块，因此在jest的模块映射之前被评估。我发现这条评论对我有用，它建议在测试文件中加入以下内容：

jest.mock('constants', () => require('path/to/your/constants'))

另一种选择是按照@dougajmcdonald在上面他的评论中提出的建议，将webpack别名从constants重命名为其他名称，例如app-constants。

- Nick Litwin

Answer 2

我也遇到了同样的挑战：使用 babel-6 配置 jest。

以前，我一直在使用 create-react-app (CRA)方法。当我遇到这个问题时，我开始真正欣赏 Facebook团队 所做的出色工作。

无论如何，接下来是我解决这个问题的步骤。 首先，我们需要澄清事情的来龙去脉。

• 要知道配置现代JavaScript工具是一件麻烦的事情，所以要有耐心
• Jest 24不再支持babel-6（这是我的整个挑战，升级到babel-7会带来许多其他变化，我想避免这种情况）
• 有很多关于如何配置jest与babel-7一起使用的文档，但是关于babel-6的文档却很少。

好的，既然这些问题都解决了，我们开始吧：

1. 根据官方jest文档（24.9）的建议，我更新了我的关键dependencies，以便与babel-6一起使用。但是在运行测试时出现了undefined的错误。

"dependencies": {
  "babel-core": "^6.26.3",
  "babel-jest": "^23.6.0",
  "babel-preset-env": "^1.7.0",
  "jest": "^24.0.0"
}

2. 我继续前进，注释掉一些行以确认是否能得到解决方法，但遗憾的是我从jest获得了更详细的错误信息（至少解释得很清楚，谢谢大家）。

截图1：注释掉 import * as C from ... 语句

截图2：尽管注释掉了import常量语句，但仍从jest收到错误消息。

3. 最终，这个方法行得通了，经过大量的“谷歌”搜索和试错，我终于偶然发现了一组可行的依赖组合。考虑到我一直在更改它们，我决定将它们保存为--devDependencies，set-up将babel-jest设置为我的.js代码的转换器，并更新了我的.babelrc babel配置文件。

// package.json

  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-jest": "21.2.0",
    "babel-loader": "7.1.2",
    "babel-preset-env": "1.6.0",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-0": "6.24.1",
    "jest": "21.2.1",
    "webpack": "3.6.0"
  },
  "jest": {
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    }
  }

// .babelrc

{
  "presets": [
    "env",
    "stage-0",
    "react"
  ]
}

- MwamiTovi

Answer 3

@mwamitovi 这可能是我找到的最好的答案。我知道看到 Jest <24 和 babel 6 可能有点奇怪，但有时候你会在遗留代码上工作。（注意：我正在使用 vue2.js）

我通过添加上述的包和 es2015 来使其工作，像这样（jest v23.x，babel 6）：

package.json:

 "devDependencies": {
    "@vue/test-utils": "^1.3.0",
    "axios-mock-adapter": "^1.21.2",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-jest": "^23.6.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "jest": "^23.6.0",
    "node-notifier": "^10.0.1",
    "vue-jest": "^3.0.7",
    "webpack": "^3.12.0",
}

jest.config.js:

module.exports = { "verbose": true, "testEnvironment": "jsdom", "moduleFileExtensions": [ "js", "json", "vue" ], "testMatch": [ "**/tests/*.test.(js|jsx|ts|tsx)" ], "transform": { ".*\.(vue)$": "/node_modules/vue-jest", ".*\.(js)$": "/node_modules/babel-jest" }, "testURL": "http://localhost/", "transformIgnorePatterns": [ "node_modules/(?!(p-retry)/)" ] }

and in your .babelrc

"env": { "test": { "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2", "es2015" ## this is key ], "plugins": ["transform-vue-jsx", "transform-runtime"] } }

- alreich