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?

Solution 1

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"
]

Solution 2

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!

Solution 3

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

Solution 4

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)

View more solutions

Comments

[wrslatz]

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).

[João Ignacio]

If you could provide an example, it would be awesome

[analytical_prat]

@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/(.*)": "<rootDir>/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