React测试库自定义设置import test-utils:未安装的模块.无法解析路径

Question

我试图为我的自定义test-utils目录(https://testing-library.com/docs/react-testing-library/setup#configuring-jest-with-test-utils)配置jest绝对路径，但我得到错误无法找到模块'test-utils'/无法解析路径

我的文件夹树

-src/
--utils/
---test-utils/
----test-utils.js
----custom-queries.js
-jest.config.js
-jsconfig.json

我jest.config.js

module.exports = {
transform: {
'^.+\.jsx?$': 'babel-jest',
},
testEnvironment: 'jsdom',
moduleNameMapper: {
'\.(css|less)$': 'identity-obj-proxy',
},
moduleDirectories: [
'node_modules',
'src',
'utils',
'test-utils',
],
};

我jsconfig.json

{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"test-utils": ["./utils/test-utils"]
}
},
"include": ["src"],
"exclude": ["node_modules"]
}

我的组件测试

import { render } from 'test-utils';
import React from 'react';
import '@testing-library/jest-dom/extend-expect';
import Alert from './alert';
describe('Alert', () => {
test('Renders Alert component', () => {
const { getByRole } = render(<Alert message="Success!" />);
const alert = getByRole(/alert/);
expect(alert).toHaveTextContent('Success!');
});
});

Answer 1

test-utils是您的自定义模块，您可以为其指定路径别名以及如何在jsconfig.json中解析它，如下所示:

"compilerOptions":{
"baseUrl":"src",
"paths":{
"test-utils": ["./utils/test-utils"]
}
}

同样的方式，你需要告诉Jest如何解决它与jest.config.js中的moduleNameMapper选项，如下所示:

moduleNameMapper: {
'test-utils/(.*)": "<rootDir>/src/utils/test-utils/$1',
},

官方文档参见:https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring

类似的问题参见:Jest找不到别名路径，React: Jest配置问题与路径别名和如何在React项目中使用Typescript + Jest路径别名