Error: Cannot find module './package' from 'index.js'

[goivemaster]

getting this error when trying to import shallow from enzyme in test component for the first time.

[ljharb]

What version of enzyme? Can you include a sample of how you're importing shallow?

[goivemaster]

my enzyme version is 2.2.0

this is how i import shallow

import { shallow } from "enzyme";

this is the stack trace for the error

Error: Cannot find module './package' from 'index.js'
    at Loader._resolveNodeModule (/home/silver/projects/pipernew/client/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:431:11)
    at Object.<anonymous> (/home/silver/projects/pipernew/client/node_modules/cheerio/index.js:11:19)
    at Object.<anonymous> (/home/silver/projects/pipernew/client/node_modules/enzyme/build/ReactWrapper.js:13:16)

I have now added json to the moduleFileExtensions config for jest in my project which resolves the issue. I have submitted a pr to change the docs accordingly.

[ljharb]

ah ok, so it's specific to jest mocking. thanks for clarifying

[ItsCosmo]

This is not specific to Jest. It is related to cheerio. In my case it was happening with karma configured using webpack. I provided a workaround here: cheeriojs/cheerio#836

[ljharb]

Hmm - that seems like an issue with webpack then. implicit .json is part of node's require(), so if a tool doesn't support it, then it's broken ¯_(ツ)_/¯

[ItsCosmo]

It might be a little more complicated than that. I left out some details in my response. I had webpack configured to resolve to a source folder as follows:

resolve: {
    root: path.resolve("./src"),
    extensions: ['', 'js', 'jsx']
}

It looked to me like because cheerio was doing require("./package"), the lack of extension was causing webpack to look under the .src/ folder for the file. The workaround I provided forced the .json extension, thus bypassing the resolve.

Yes, the require("./package") statement in cheerio's index.js is legit, but then again so is the webpack configuration. Webpack does provide a plugin for dealing with weird things like this, so maybe this is just one of those things ¯_(ツ)_/¯

[ttrmw]

With @goivemaster's fix my colleague is seeing this issue intermittently unless they run jest with the --runInBand flag.

The error I see is:

● AppControls › it should render link text
  - TypeError: _cheerio2.default.load is not a function
        at render (../node_modules/enzyme/build/render.js:30:31)
        at Object.eval (__tests__/AppControls-test.js:14:66)
        at handle (../node_modules/worker-farm/lib/child/index.js:41:8)
        at process.<anonymous> (../node_modules/worker-farm/lib/child/index.js:47:3)
        at emitTwo (../events.js:87:13)
        at process.emit (../events.js:172:7)
        at handleMessage (../internal/child_process.js:689:10)
        at Pipe.channel.onread (../internal/child_process.js:440:11)

Failure moves around tests intermittently as mentioned unless tests are run in a single thread (--runInBand).

The plot thickens - on my machine I see intermittent failures without the --runInBand flag, but with it I consistently see failures wherever enzyme's render or shallow methods are called.

The render failures are as above, whilst the shallow failures tend to be.. weirder, tests like:

  it("should render the dashboard links", () => {                                 
    const appControls = shallow(<AppControls />);                                 
    expect(appControls.find('.app-control-link').length).toBe(2);                 
  });

producing:

 FAIL  __tests__/AppControls-test.js (0.156s)
● AppControls › it should render the dashboard links
  - Expected: 1 toBe: 2
        at Object.eval (__tests__/AppControls-test.js:10:58)

and:

  it("sets normal image src", () => {                                             
    const loading = shallow(<Loading />);                                         
    const loadingImg = loading.find("img");                                       
    expect(loadingImg.node.props.src).toBe(PathHelpers.LOADING);                  
  });

resulting in:

 FAIL  __tests__/Loading-test.js (0.08s)
● Loading › it sets normal image src
  - TypeError: Cannot read property 'src' of undefined
        at Object.eval (__tests__/Loading-test.js:26:33)

[ttrmw]

FYI I think it must have been a fluke that this worked with --runInBand on my colleague's machine - he too is now seeing intermittent failures.

I see that we are not the only ones having this issue, #309 looks to be related

[calclavia]

I can replicate this issue with Jest and React Native.

[blainekasten]

What version of jest?
On Sun, Jun 26, 2016 at 2:13 AM Henry Mao [email protected] wrote:

I can replicate this issue with Jest and React Native.

—
You are receiving this because you are subscribed to this thread.

Reply to this email directly, view it on GitHub
#286 (comment), or mute
the thread
https://github.com/notifications/unsubscribe/ACx-ty0rU6kD0QJ5VUauXoWV73Xdw3NDks5qPiaRgaJpZM4H79Xn
.

[calclavia]

@blainekasten Version 13 (the newest one). "enzyme": "^2.3.0"

"jest": {
    "verbose": true,
    "scriptPreprocessor": "<rootDir>/jest.js",
    "testPathDirs": ["src"],
    "testPathIgnorePatterns": [
      "/node_modules/"
    ],
    "testFileExtensions": [
      "ts",
      "tsx"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "unmockedModulePathPatterns": [
      "react",
      "react-native",
      "enzyme",
      "chai",
      "react-addons-test-utils",
      "rxjs"
    ],
    "collectCoverage": true,
    "coverageDirectory": "out/coverage",
    "haste": {
      "defaultPlatform": "ios",
      "platforms": [
        "ios",
        "android"
      ],
      "providesModuleNodeModules": [
        "react",
        "react-native"
      ]
    }
  }

[blainekasten]

Are you also using the import syntax? Try using commonjs require()

[calclavia]

@blainekasten I tried both using const { shallow } = require('enzyme'); and es6 imports. Same error.

[aj0strow]

If you add json to module file extensions, it works.

"jest": {
    "moduleFileExtensions": [
      "js",
      "json"
    ]
}

[calclavia]

@aj0strow Thanks, that worked perfectly!

[aweary]

Thanks @aj0strow! I'm closing this as it seems resolved, and it's not actually an enzyme issue, so nothing actionable for us.

[arfordweb]

I know this is closed, but it seems that if setting the "moduleFileExtensions" property without adding "json" causes an issue, then this is an issue with Jest, if it causes an issue in the execution of one of its dependencies.

Enzyme is using Cheerio 0.20.0. In Cheerio 0.22.0, they added an explicit .json extension to their import statement in their index.js. So, revving your dependency should fix the issue.

Here's their changlog: https://github.com/cheeriojs/cheerio/blob/master/History.md
One item in the latest release is: add extension for JSON require call

[ljharb]

This is definitely a webpack and/or jest bug. json files are automatically requireable sans extension in node, so anything that doesn't do that by default is broken.

[nickkhall]

I know this post is closed, but I'd like to share the silly solution that solved my issue.

The problem in my case was someone was importing the component from the HOC (index.js) that exports the component with withStyles() instead of the importing the component itself in the test. (import component from './component';)

Therefore the solution was to import the component from the exported component and not the HOC or connected component.

[ljharb]

@nickkhall that's not actually the right solution :-) you want .dive(), and never to export anything unwrapped just for tests (or make any changes to production code, just for tests)