Testing React component with Jest gives 'Cannot find module' error

Question

I am trying to test a React component using Jest.

The component's code is the following.

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;

The test code is as simple as this:

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);
    });
});

In my project I am using some Common Components such as Text Component. All the paths of the Components are set in an index.js file.

File sample code:

export Button from 'src/Common/Components/Button';
export Text from 'src/Common/Components/Text';
export Breadcrumb from 'src/Common/Components/Breadcrumb';

This is the Jest configuration I am using in package.json file.

"jest": {
    "setupTestFrameworkScriptFile": "./Common/Components/setupTests.js",
    "moduleFileExtensions": ["js", "jsx", ""],
    "moduleNameMapper": {
      "components(.*)$": "<rootDir>/Common/Static/index.js"
    }
  }

Webpack alias config:

alias: { components: path.resolve(__dirname, 'Common/Static/index.js'), },

I am running 'npm test' through terminal and the test fails with the following message:

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)

All the paths are correct and the code runs smoothly when I remove the test. I guess that Jest cannot get the paths included in index.js Is there any suggestion on how to configure Jest to override this problem?

I noticed in some cases jest doesn't find modules if aliases are used, try making it a relative path instead of alias. Not sure if it's going to work. — remelkabir
– remelkabir, Commented May 30, 2018 at 17:44
@Aron it is just a custom Breadcrumb Component. As simple as it gets. Even if I remove all the paths except the one that points to Text Component (the one I use) I still get the same kind of error. — MavrosGatos
– MavrosGatos, Commented May 31, 2018 at 7:22

Ji aSH · Accepted Answer · 2018-05-31 20:53:47Z

3

I think adding a module path to your jest config will do what you want

jest.config.js

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

edit: Oh your jest config is in package.json, so it should rather be added to your jest entry there

answered May 31, 2018 at 20:53

Ji aSH

3,4841 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Grazer · Accepted Answer · 2019-01-11 15:19:58Z

0

This issue happened for me because the project had configurations in both package.json and 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 appears to be ignored.

answered Jan 11, 2019 at 15:19

Grazer

3754 silver badges17 bronze badges

Collectives™ on Stack Overflow

Testing React component with Jest gives 'Cannot find module' error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related