REACT Jest - Test suite failed to run

Question

I have created sample react project and added JEST, enzyme dependencies to test my component. But getting below error while running test suite: ERROR: Cannot find module 'components/Add' from 'App.js'

However, Jest was able to find:
    'components/Add.js'

You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['web.js', 'js', 'web.ts', 'ts', 'web.tsx', 'tsx', 'json', 'web.jsx', 'jsx', 'node'].

See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string

However, Jest was able to find:
    './App.css'
    './App.js'
    './App.test.js'

You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['web.js', 'js', 'web.ts', 'ts', 'web.tsx', 'tsx', 'json', 'web.jsx', 'jsx', 'node'].

See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string

  1 | import React from 'react';
> 2 | import Add from 'components/Add';
    | ^
  3 |
  4 |
  5 | function App() {

  at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:259:17)
  at Object.<anonymous> (src/App.js:2:1)

Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 4.035s Ran all test suites.

Can anyone please help to resolve this issue, will be happy to share more details.

Answer 1

Have you tried to use a relative import instead?

import Add from './components/Add';

Let me know if it helps :)

Answer 2

The way your imports are written, you're probably using aliases for your paths. If you're using webpack, check webpack.config.json for resolve.alias field to confirm this.

If you do have aliases set up, You will have to add them to your jest configurations also. This is done using moduleNameMapper. For example,

{
  "moduleNameMapper": {
    "components/(.*)$": "<rootDir>/PATH_TO_COMPONENTS/$1",
  }

}