Jest: cannot find module required inside module to be tested (relative path)

Question

I have this component:

import React from 'react';
import VideoTag from './VideoTag';
import JWPlayer from './JWPlayer';

class VideoWrapper extends React.Component {
//... component code
}

That based on some logic renders another component inside ( VideoTag or JWPlayer) but when I try to test it in a jest file i get the error:

Cannot find module './VideoTag'

The three coponents are in the same directory that's why it actually works when I transpile it and see it in action in a browser but looks like Jest is having problems resolving those relative paths, this is the jest file:

jest.dontMock('../src/shared/components/Video/VideoWrapper.jsx');

import React from 'react';
import ReactDOM from 'react-dom';
TestUtils from 'react-addons-test-utils';

import VideoWrapper from '../src/shared/components/Video/VideoWrapper.jsx';

describe('VideoWrapper tests', () => {
  it('Render JWPlayer', () => {

      let vWrapper = TestUtils.renderIntoDocument(
      < VideoWrapper model={model} />
  );

  });
});

The error is at line:

import VideoWrapper from '../src/shared/components/Video/VideoWrapper.jsx';

How do I tell jest how to handle relative paths?

score 15 · Answer 1 · answered Aug 21 '19 at 16:28

15

I also had to add the moduleNameMapper to my jest configuration for my tsconfig path maps in order to get my tests to recognize the path maps I had setup. Something like this:

"moduleNameMapper": {
      "^yourPath/(.*)": "<rootDir>\\yourPath\\$1"
    }

Hopefully this will help someone down the line!

answered Aug 21 '19 at 16:28

Justin

683
8
24

2

This just saved me, thank you!!! I had multiple libraries locally with `tsconfig` managing their `paths` and I guess `jest` or `typescript` wasn't mapping the module imports correctly for source files (even though it worked fine for imports in the test files). – wrslatz Nov 21 '19 at 14:47
If you could provide an example, it would be awesome – João Ignacio Jul 19 '21 at 23:44
@JoãoIgnacio suppose you are importing this in your original js file `import * as Components from '/static/myApp/js/components.js'`. Then in moduleNameWrapper you will have the following: `"^/static/myApp/js/(.*)": "/myProject/myApp/static/myApp/js/$1"`. Please note I am using a Django project and app as an example. See how **/static/myApp/js/** is placed in the moduleNameWrapper – analytical_prat Nov 14 '21 at 12:25
Note that if you run `jest --watch` and then start editing the jest config, it seems to pick it up and re-run, but it is not actually reloading the config. Just use plain `jest` and invoke manually while working this out. – Gabe Johnson Aug 11 '22 at 16:10

score 13 · Accepted Answer · answered Feb 14 '16 at 13:46

13

The problem were not the paths, It was looking for modules only with .js extension, it worked after adding the .jsx in the jest configuration:

"moduleFileExtensions": [
  "js",
  "jsx"
]

answered Feb 14 '16 at 13:46

ferflores

1,084
3
18
35

score 1 · Answer 3 · answered Jun 08 '17 at 10:47

1

You don't need to add moduleFileExtensions in the configuration for these two options since jest uses ['js', 'jsx', 'json', 'node'] as default file extensions. (Unless you want to specifically skip any option that is)

answered Jun 08 '17 at 10:47

Sahil Jain

3,649
2
14
16

score 1 · Answer 4 · answered Jun 22 '20 at 16:27

1

In my case the issue was the import is also case sensitive. Check your import statement and ensure that it matches the filename exactly!

answered Jun 22 '20 at 16:27

user2490003

10,706
17
79
155

score 0 · Answer 5 · answered Apr 25 '18 at 06:55

For others ending up here trying to use Jest with TypeScript: you need to include ts in the moduleFileExtensions, e.g.:

"moduleFileExtensions": [
  "js",
  "jsx",
  "json",
  "node",
  "ts"
]

You also need a transform for *.ts files:

transform: {
  "^.+\\.vue$": "vue-jest",
  "^.+\\.js$": "babel-jest",
  "^.+\\.(ts|tsx)$": "ts-jest"
},

Jest: cannot find module required inside module to be tested (relative path)

5 Answers5

Linked