作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 Jest 测试 React 组件。
该组件的代码如下。
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Text } from 'components';
class App extends PureComponent {
static propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
displayed: PropTypes.bool,
};
static defaultProps = {
displayed: true
};
render = () => {
if (!this.props.displayed) {
return null;
}
const text = `${ this.props.name } is ${ this.props.age } years old.`
return (
<span>
<Text
text={ text }
/>
</span>
);
}
}
export default App;
测试代码很简单:
import React from 'react';
import { mount } from 'enzyme';
import App from './../App';
describe('App', () => {
let props;
let mountedApp;
const app = () => {
if (!mountedApp) {
mountedApp = mount(
<App { ...props } />
);
}
return mountedApp;
};
beforeEach(() => {
props = {
name: 'John',
age: 35,
displayed: undefined
};
mountedApp = undefined;
});
it('always renders a span', () => {
const spans = app().find('span');
expect(spans.length).toBeGreaterThan(0);
});
});
在我的项目中,我使用了一些通用组件,例如文本组件。组件的所有路径都在index.js 文件中设置。
文件示例代码:
export Button from 'src/Common/Components/Button';
export Text from 'src/Common/Components/Text';
export Breadcrumb from 'src/Common/Components/Breadcrumb';
这是我在 package.json 文件中使用的 Jest 配置。
"jest": {
"setupTestFrameworkScriptFile": "./Common/Components/setupTests.js",
"moduleFileExtensions": ["js", "jsx", ""],
"moduleNameMapper": {
"components(.*)$": "<rootDir>/Common/Static/index.js"
}
}
Webpack 别名配置:
alias: { components: path.resolve(__dirname, 'Common/Static/index.js'), },
我通过终端运行“npm test”,测试失败并显示以下消息:
Test suite failed to run
Cannot find module 'src/Common/Components/Button' from 'index.js'
6 | export Button from 'src/Common/Components/Button';
7 | export Text from 'src/Common/Components/Text';
> 8 | export Breadcrumb from 'src/Common/Components/Breadcrumb';
| ^
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:210:17)
at Object.<anonymous> (Common/Static/index.js:8:16)
当我删除测试时,所有路径都是正确的,并且代码运行顺利。我猜 Jest 无法获取 index.js 中包含的路径对于如何配置 Jest 来解决此问题有什么建议吗?
最佳答案
我认为在你的 Jest 配置中添加一个模块路径就可以达到你想要的效果
jest.config.js
module.exports = {
"modulePaths": [
"src",
"test"
],
...
}
编辑:哦,你的 Jest 配置在 package.json 中,所以应该将其添加到你的 Jest 条目中
关于reactjs - 使用 Jest 测试 React 组件会出现 'Cannot find module' 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50609397/
我是一名优秀的程序员,十分优秀!