使用 Jest 测试 React 组件会出现“找不到模块”错误答案

【问题标题】：Testing React component with Jest gives 'Cannot find module' error使用 Jest 测试 React 组件会出现“找不到模块”错误
【发布时间】：2018-11-09 14:05:33
【问题描述】：

我正在尝试使用 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 别名配置：

别名：{ 组件：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 来解决这个问题的建议？

【问题讨论】：

Breadcrumb 文件的代码是什么样的？
我注意到在某些情况下，如果使用别名，jest 找不到模块，请尝试将其设为相对路径而不是别名。不确定它是否会起作用。
@Aron 它只是一个自定义的面包屑组件。尽可能简单。即使我删除了除指向文本组件（我使用的那个）之外的所有路径，我仍然会遇到同样的错误。

标签： reactjs react-native jestjs enzyme

【解决方案1】：

这个问题发生在我身上，因为该项目在 package.json 和 jest.config.js 中都有配置

package.json

"jest": {
    "moduleNameMapper": {
      "^components(.*)$": "<rootDir>/src/js/components$1",
    }
}

jest.config.js

module.exports = {
    testEnvironment: 'jest-environment-jsdom'
};

package.json moduleNameMapper 似乎被忽略了。

【讨论】：

【解决方案2】：

我认为在你的 jest 配置中添加一个模块路径会做你想做的事

jest.config.js

module.exports = {
    "modulePaths": [
        "src",
        "test"
    ],
    ...
}

编辑：哦，你的笑话配置在 package.json 中，所以它应该被添加到你的笑话条目中

【讨论】：