CRA + Yarn 2 + jsconfig.json = 无法运行单元测试答案

【问题标题】：CRA + Yarn 2 + jsconfig.json = Can't run unit testsCRA + Yarn 2 + jsconfig.json = 无法运行单元测试
【发布时间】：2021-04-26 04:19:36
【问题描述】：

我的jsconfig.json 文件中有以下配置：

{
  "compilerOptions": {
    "baseUrl": "./src"
  },
  "include": ["src"]
}

这让我可以这样做：

import { App } from 'components'
import * as actions from 'actions/app.actions'

而不是这个：

import { App } from '../components'
import * as actions from '../actions/app.actions'

为了开始进行单元测试，我在src/components/tests 中创建了一个简单的App.test.jsx

import { render } from '@testing-library/react'
import { App } from 'components'

it('renders without crashing', () => {
  render(<App />)
})

但是，当我运行 yarn test（这是 react-scripts test 的糖）时，它会抛出这个丑陋的错误：

 FAIL  src/components/tests/App.test.jsx
  ● Test suite failed to run

    Your application tried to access components, but it isn't declared in your dependencies; 
this makes the require call ambiguous and unsound.

    Required package: components (via "components")
    Required by: C:\Users\Summer\Code\sandbox\src\components\tests\

      23714 |     enumerable: false
      23715 |   };
    > 23716 |   return Object.defineProperties(new Error(message), {
            |                                  ^
      23717 |     code: { ...propertySpec,
      23718 |       value: code
      23719 |     },

      at internalTools_makeError (.pnp.js:23716:34)
      at resolveToUnqualified (.pnp.js:24670:23)
      at resolveRequest (.pnp.js:24768:29)
      at Object.resolveRequest (.pnp.js:24846:26)

似乎 Jest（或 Yarn？）认为 components 是一个节点包，因为它不知道我的 jsconfig.json 中的绝对导入设置。有没有办法让它知道？还是我必须在 0% 覆盖率和相对进口之间做出选择？

我已经尝试在我的package.json 中的"jest" 下输入"moduleNameMapper"，就像文档解释的那样，但它没有帮助。我得到了同样的错误 + 之后又出现了一个错误。

我也尝试将测试文件中的components 更改为../components，但它抱怨actions/app.actions 在<App /> 组件内。

模块名称映射器配置：

/* package.json */
{
  /* ... */
  "jest": {
    "moduleNameMapper": {
      "actions(.*)$": "<rootDir>/src/actions$1",
      "assets(.*)$": "<rootDir>/src/assets$1",
      "components(.*)$": "<rootDir>/src/components$1",
      "mocks(.*)$": "<rootDir>/src/mocks$1",
      "pages(.*)$": "<rootDir>/src/pages$1",
      "reducers(.*)$": "<rootDir>/src/reducers$1",
      "scss(.*)$": "<rootDir>/src/scss$1",
      "store(.*)$": "<rootDir>/src/store$1",
      "themes(.*)$": "<rootDir>/src/themes$1",
      "api": "<rootDir>/src/api.js",
    }
  }
}

【问题讨论】：

你能分享你尝试过的配置moduleNameMapper吗？
@tmhao2005 我会把它编辑成问题
嗯。事情看起来不错。无论如何，您是否有一个最小的可重复存储库？
@tmhao2005 还没有。我有点希望我不是唯一一个在 VS Code 中通过绝对导入在 Yarn 2 上使用 CRA 并在 Jest 中编写单元测试的人。？？？我很快就会看到把一些东西放在一起~ish。

标签： jestjs create-react-app yarnpkg-v2 vscode-jsconfig

【解决方案1】：

这是因为 Yarn 控制了解析管道，因此不知道来自第三方配置的解析指令（如 moduleNameMapper）。

这并不是说你没有选择，但具体来说，这里的修复是避免moduleNameMapper，而是利用内置的link: 依赖协议。这还有其他优点，例如与所有工具（TS、Jest、ESLint...）兼容，无需将别名移植到每种配置格式。

另请参阅：Why is the link: protocol recommended over aliases for path mapping?

【讨论】：