Rollup aliases and Jest: Cannot find module 'global/http' from 'src/index.js'

user_1555250 0
Viewed 758

I'm using vanilla javascript in a project with Rollup. I'm using and I had installed Jest for first time, and after doing some research on my problem, I have a basic setup:

// jest.config.js
module.exports = {
  coverageDirectory: 'coverage',
  moduleFileExtensions: ['js'],
  moduleNameMapper: {
    '^applicationRoot/(.*)$': '<rootDir>/src/$1',
  },
};

I am using the rollup-plugin-alias library and this is an example from my rollup.config.js

// rollup.config.js
// ...
alias({
      resolve: ['.js'],
      applicationRoot: __dirname + '/src',
      entries: [
        {
          find: 'global/http',
          replacement: `${__dirname}/src/global/http/index.js`,
        },
      ]})

All classes in my library reside in the ./src directory. If in my input file (./src/index.js) I have the following lines:

// ./src/index.js
import Http from 'global/http';
export class MyClass {

}

In my test file I have:

// ./src/index.spec.js
import { MyClass } from './index';

In the terminal I get the following error:

 ● Test suite failed to run

    Cannot find module 'global/http' from 'src/index.js'

    Require stack:
      src/index.js
      src/index.spec.js
    > 1 | import Http from 'global/http';

What else should i do? Thanks for any help or comment.

[Edited]

I have created a dummy repository with a structure similar to that described above:

https://github.com/luenmuvel/dummy-project-rollup-jest-issues

In this case all they have to do is clone the project and run "npm i" or "yarn".

In the browser it does work: You just have to run:

  • "npm run build" or "yarn build"
  • see the output in the browser terminal.

Running jest doesn't work. You just have to run: - "npm run t" or "yarn t" - Wait for the output.

rollupjs rollup jestjs alias javascript
1 Answers

As far as I can tell, the problem was that in your .spec file you were importing the raw file, not the compiled one.

The compiled file is the one rollup outputs, depending on your output options. For example, here's how you configured it:

output: {
  file: "dist/bundle.js",
  format: "umd",
  name: "testing",
},

The built file is at dist/bundle.js, but in your .spec file you imported it like this:

import MyClass from "./index";

Not only this, but you're also making use of some plugins, which have an effect on the final output.

Not sure if this comparison would be right, but it's like you'd want to import a TS file from a JS file. The mistake you'd be making is sort of the same.

Also notice that index does not have default exports:

export class MyClass { }

The solution I came up with is to use the jest's moduleNameMapper option to map the index.js to the file that would be outputted by rollup:

// jest.config.js
module.exports = {
  coverageDirectory: "coverage",
  moduleFileExtensions: ["js"],
  moduleNameMapper: {
    "^applicationRoot/(.*)$": "<rootDir>/src/$1",
  },
  moduleNameMapper: {
    "./index.js": "../dest/bundle.js"
  }
};

And the spec file would import the file like this:

import { MyClass } from './index.js';
user_96326210
Related