使用jest的React测试不支持来自webpack别名的moduleNameMapper
使用jest的React测试不支持来自webpack别名的moduleNameMapper
提问于 2019-03-21 01:01:53
我正在使用jest和酶来测试我的react组件。我还使用蓝图图标作为react组件中的一个依赖项。作为我的webpack配置的一部分，添加了以下内容：
config.resolve.alias = {
blueprintIcons: path.resolve('./node_modules/@blueprintjs/icons'),
blueprint: path.resolve('./node_modules/@blueprintjs/core')
};下面是作为jest config的一部分添加的：
rootDir: '.',
roots: [
'<rootDir>/__test__/'
],
transformIgnorePatterns: [
'<rootDir>/node_modules/'
],
transform: {
'^.+\\.jsx?$': 'babel-jest'
},
testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.jsx?$',
moduleDirectories: ['node_modules'],
moduleFileExtensions: [
'js',
'jsx',
'json',
'node'
],
moduleNameMapper: {
'\\.(css|scss)$': 'identity-obj-proxy',
blueprintIcons: '<rootDir>/node_modules/@blueprintjs/core'
blueprint: '<rootDir>/node_modules/@blueprintjs/core'
},
snapshotSerializers: ['enzyme-to-json/serializer']
};下面是我的组件：
import React, { Component } from 'react';
import Icon from 'blueprint';
import IconNames from 'blueprintIcons';
class Foo extends Component {
render() {
return (
<div>
<p>Hello Foo</p>
<Icon icon={IconNames.HOME} iconSize={Icon.SIZE_LARGE}/>
</div>
);
}
}
export default Foo;这是我的foo.test.js
import React from 'react';
import Foo from '../../src/Components/Foo';
import Adapter from 'enzyme-adapter-react-16';
import Enzyme, { mount, shallow } from 'enzyme';
describe('Reviews component', () => {
it('render component when loading in progress', () => {
const mountedComponent = mount(<Foo />);
});
});当我尝试测试该组件时，测试失败，出现以下错误
TypeError:无法读取IconNames.HOME处未定义的属性“”HOME“”
下面是在我的package.json中指定的一些包
"babel-cli": "6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.0.1",
"babel-loader": "7.1.4",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.4",
"jest": "^23.1.0",
"jest-html-reporter": "^2.3.0",
"@blueprintjs/core": "^2.3.1",
"react": "16.2.0"我使用的是react 16.2.0
我试着模拟它，但不起作用(可能我做得不正确)，但以下是我正在使用的代码：
jest.mock('@blueprintjs/icons', () => (
{ IconNames: {HOME: 'home' }}));回答 2
Stack Overflow用户
发布于 2019-06-10 23:01:58
我认为模拟是一种可能的解决方案-不确定代码不能工作的确切原因(可能是因为它不在default键中，或者模拟的名称不正确)，但您可以尝试其他方法。
- 在您的Jest配置中，添加以下内容：
"setupFiles": [
"./__mocks__/mockIcons.js"
],- 在根文件夹中创建
/__mocks__文件夹 - 使用以下代码在
mockIcons.js中创建__mocks__：
jest.mock("blueprint", () => ({
default: {
Icon: { SIZE_LARGE: 'large' }
}
}))
jest.mock("blueprintIcons", () => ({
default: {
IconNames: { HOME: 'home' }
}
}))如果其他都不起作用，请尝试使用@blueprintjs/icons作为模拟名称。
Stack Overflow用户
发布于 2019-06-12 06:46:17
对我来说，以下解决方案起作用了：
在jest config中：
moduleNameMapper: {
'^blueprint': '<rootDir>/node_modules/@blueprintjs/core',
'^@blueprintjs/(.*)$': '<rootDir>/node_modules/@blueprintjs/$1'
}休息，一切都保持不变。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55266375
复制相关文章
相似问题