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

Question

我的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:UsersSummerCodesandboxsrccomponentstests
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，但随后它抱怨<App />组件内部的actions/app.actions。

模块名称映射器配置：

/* 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",
}
}
}

Answer 1

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

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

另请参阅：为什么建议使用link:协议而不是别名进行路径映射？