Testing React component with Jest gives 'Cannot find module' error
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
MavrosGatos
Updated on June 22, 2022Comments
-
MavrosGatos almost 2 years
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?
-
Aron almost 6 yearsWhat does the code of your
Breadcrumb
file look like? -
remelkabir almost 6 yearsI 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.
-
MavrosGatos almost 6 years@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.
-