- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Jest 和 enzyme 来测试我的 react 组件。我还使用蓝图图标作为我的 react 组件中的依赖项之一。作为我的 webpack 配置的一部分,添加了以下内容:
config.resolve.alias = {
blueprintIcons: path.resolve('./node_modules/@blueprintjs/icons'),
blueprint: path.resolve('./node_modules/@blueprintjs/core')
};
以下内容添加为 jest 配置的一部分:
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: Cannot read property 'HOME' of undefined at IconNames.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
我尝试 mock 它,但不起作用(也许我做得不正确),但这是我正在使用的代码:
jest.mock('@blueprintjs/icons', () => (
{ IconNames: {HOME: 'home' }}));
最佳答案
对我来说,以下解决方案有效:
在 Jest 配置中:
moduleNameMapper: {
'^blueprint': '<rootDir>/node_modules/@blueprintjs/core',
'^@blueprintjs/(.*)$': '<rootDir>/node_modules/@blueprintjs/$1'
}
其余一切保持不变。
关于reactjs - 使用 jest 进行 React 测试不支持 webpack 别名中的 moduleNameMapper,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55266375/
我想应用一个 Jest 测试来 react 组件,我收到一个错误,上面写着: Jest encountered an unexpected token 当我尝试: import moment from
我正在尝试使用 vue-test-utils 和 Jest 测试 Vue CLI 项目。我正在使用 vue-material-design-icons 中的一些图标,但当我运行 Jest 时,它们并没
我在 component 中有一个文本文件(其中包括)路径下的文件夹:src/components/text然而,当 webpack 别名为 import Text from "components/
我正在使用 Jest 和 enzyme 来测试我的 react 组件。我还使用蓝图图标作为我的 react 组件中的依赖项之一。作为我的 webpack 配置的一部分,添加了以下内容: config.
我已经在 typescript 中使用我的 React-app 进行了测试,使用如下所示的 ts-jest。 import * as React from "react"; import * as r
我是一名优秀的程序员,十分优秀!