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

Question

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.

I can't because it's in a private repository of the company where I work :( — Luis
– Luis, Commented May 14, 2020 at 20:38
Oh, I see. Then could you create a dummy repo that reproduces the problem? I'll try to do it myself if I find the time, but I'd say I could start debugging sooner if you would create a repo. Or even a gist that exposes the relevant files and their contents. — Andrei Gătej
– Andrei Gătej, Commented May 14, 2020 at 20:41
@AndreiGătej i have ready my dummy repo, here: github.com/luenmuvel/dummy-project-rollup-jest-issues I'm going to edit my question to have the repo and the instructions to run it. — Luis
– Luis, Commented May 14, 2020 at 21:34

Andrei Gătej · Accepted Answer · 2020-05-15 07:19:36Z

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';

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related