Cannot find module 'react/addons' from test js

[buddyp450]

Running iojs ./node_modules/jest-cli/bin/jest.js via script in package.json results in:

Using Jest CLI v0.4.3
Waiting on 1 test...
 FAIL  __tests__\BuildingTable-test.js (1.265s)
? BuildingTable > it encountered a declaration exception
  - Error: Cannot find module 'react/addons' from 'C:\Git\react\__tests__\BuildingTable-test.js'
      at Loader._getNormalizedModuleID (C:\Git\react\node_modules\jest-cli\src\HasteModuleLoader\HasteModuleLoader.js:360:15)
      at Loader._shouldMock (C:\Git\react\node_modules\jest-cli\src\HasteModuleLoader\HasteModuleLoader.js:566:23)
      at Loader.requireModuleOrMock (C:\Git\react\node_modules\jest-cli\src\HasteModuleLoader\HasteModuleLoader.js:934:12)
      at Object.runContentWithLocalBindings (C:\Git\react\node_modules\jest-cli\src\lib\utils.js:376:17)
      at Loader._execModule (C:\Git\react\node_modules\jest-cli\src\HasteModuleLoader\HasteModuleLoader.js:250:9)
      at Loader.requireModule (C:\Git\react\node_modules\jest-cli\src\HasteModuleLoader\HasteModuleLoader.js:916:12)
      at jasmineTestRunner (C:\Git\react\node_modules\jest-cli\src\jasmineTestRunner\jasmineTestRunner.js:245:16)
      at C:\Git\react\node_modules\jest-cli\src\TestRunner.js:372:12
      at _fulfilled (C:\Git\react\node_modules\jest-cli\node_modules\q\q.js:798:54)
      at self.promiseDispatch.done (C:\Git\react\node_modules\jest-cli\node_modules\q\q.js:827:30)
      at Promise.promise.promiseDispatch (C:\Git\react\node_modules\jest-cli\node_modules\q\q.js:760:13)
      at C:\Git\react\node_modules\jest-cli\node_modules\q\q.js:574:44
      at flush (C:\Git\react\node_modules\jest-cli\node_modules\q\q.js:108:17)
      at doNTCallback0 (node.js:415:9)
      at process._tickCallback (node.js:344:13)

My building test js:

jest.dontMock('../app/views/building-table/BuildingTable');
jest.dontMock('es6-promise');
require('es6-promise').polyfill();

describe('BuildingTable', function() {
    var React = require('react/addons')

    it(`should at least make it this far`, () => {
         expect(true).toBe(true);
    });
})

Still very new to this so apologies if I'm missing something obvious.

> iojs --version
v2.0.1
> npm --version
2.9.0

My package.json:

{
  "name": "JSDependencyHell",
  "version": "0.0.1",
  "scripts": {
    "init": "npm install & iojs ./node_modules/jspm/jspm.js install",
    "start": "iojs ./node_modules/gulp/bin/gulp.js",
    "test": "iojs ./node_modules/jest-cli/bin/jest.js"
  },
  "jest": {
    "scriptPreprocessor": "./node_modules/babel-jest",
    "unmockedModulePathPatterns": [
      "react",
      "immutable"
    ],
    "testPathIgnorePatterns": [
      "/node_modules/",
      "/jspm_modules/"
    ],
    "testFileExtensions": [
      "jsx",
      "js"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx"
    ]
  },
  "jspm": {
    "directories": {
      "lib": "lib",
      "packages": "jspm_modules"
    },
    "dependencies": {
      "bootstrap": "github:twbs/bootstrap@^3.3.4",
      "es6-promise": "npm:es6-promise@^2.0.1",
      "font-awesome": "npm:font-awesome@^4.3.0",
      "jquery": "github:components/jquery@^2.1.3",
      "jsx": "github:zcregan/plugin-babeljsx@^0.2.0",
      "lodash": "npm:lodash@^3.3.0",
      "lodash-node": "npm:lodash-node@^3.2.0",
      "page": "npm:page@^1.6.1",
      "pleasejs": "npm:pleasejs@^0.4.2",
      "react": "npm:react@^0.13.2",
      "react-grid-layout": "npm:react-grid-layout@^0.8.1",
      "react-resizable": "npm:react-resizable@^0.3.2",
      "react-select": "npm:react-select@^0.3.2",
      "reactable": "npm:reactable@^0.10.1",
      "readable-stream": "npm:readable-stream@^1.1.13",
      "reflux": "npm:reflux@^0.2.5",
      "stream-browserify": "npm:stream-browserify@^1.0.0"
    },
    "devDependencies": {
      "babel": "npm:babel-core@^5.1.13",
      "babel-runtime": "npm:babel-runtime@^5.1.13",
      "core-js": "npm:core-js@^0.9.4"
    }
  },
  "devDependencies": {
    "babel-core": "^5.3.3",
    "babel-jest": "^5.2.0",
    "browser-sync": "^2.7.1",
    "gulp": "^3.8.11",
    "gulp-less": "^3.0.0",
    "gulp-load-plugins": "^0.8.0",
    "gulp-react": "^2.0.0",
    "gulp-shell": "^0.3.0",
    "gulp-util": "^3.0.3",
    "http-proxy": "^1.8.1",
    "jest-cli": "^0.4.3",
    "jspm": "^0.15.1",
    "jspm-git": "^0.3.2",
    "systemjs-builder": "^0.9.0"
  }
}

Would really appreciate even a point in the right direction.. thanks!

[techapman]

I'm having the same problem. Anyone else?

[island205]

+1

> Jest@1.0.0 test /Users/island205/github/ReactUnitTesting/Jest
> jest

Using Jest CLI v0.4.5
Waiting on 2 tests...
 PASS  __tests__/sum-test.js (0.037s)
Waiting on 1 test...
 FAIL  __tests__/fetchCurrentUser-test.js (0.05s)
● fetchCurrentUser › it calls into $.ajax with the correct params
  - Error: Cannot find module 'jquery' from '/Users/island205/github/ReactUnitTesting/Jest/__tests__'
      at Function.module.exports (/Users/island205/github/ReactUnitTesting/Jest/node_modules/jest-cli/node_modules/resolve/lib/sync.js:32:11)
      at Loader._nodeModuleNameToPath (/Users/island205/github/ReactUnitTesting/Jest/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:503:22)
      at Loader._moduleNameToPath (/Users/island205/github/ReactUnitTesting/Jest/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:471:19)
      at Loader._getNormalizedModuleID (/Users/island205/github/ReactUnitTesting/Jest/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:358:31)
      at Loader._shouldMock (/Users/island205/github/ReactUnitTesting/Jest/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:566:23)
      at Loader.requireModuleOrMock (/Users/island205/github/ReactUnitTesting/Jest/node_modules/jest-cli/src/HasteModuleLoader/HasteModuleLoader.js:934:12)
      at Timer.listOnTimeout (timers.js:110:15)

1 test failed, 1 test passed (2 total)
Run time: 2.359s

➜  Jest  node -v
v0.12.4
➜  Jest  npm -v
2.10.1

[marcelopv]

I solved the issue changing the version of npm to 0.10.

[buddyp450]

I don't consider this a fix as npm and iojs weren't even the same thing as of the writing of this issue. I had to upgrade npm for other reasons which then led to this problem. Going backwards doesn't solve the problem for me.

[ProggerPete]

I suspect you want to stop requiring 'react/addons' which is deprecated and instead start requiring '/react/addons/thespecificaddonyouwant'

Solved a similar issue for me with jspm.

[buddyp450]

My original problem stemmed from not having react in node_modules since I use jspm. System JS provides my mapping to the correct locations but I don't know how to properly use these things in conjunction when testing server-side.

Any thoughts on this are appreciated.

[ProggerPete]

If you want to run node stuff you'll probably need to npm install react as well as jspm install. Node doesn't know anything about jspm installed modules. Possibly you can tell one how to find things in the other, but I haven't tried.

[buddyp450]

@ProggerPete the problem with this is that all of my modules use import statements that go looking for things using the SystemJS loader. For instance, in my BuildingTable.jsx my import looks like:

import React from 'react'
import Submodule from 'api/submodule'
import Util from 'util/MyUtil'
...

So that when the imports resolve for my test runner it's trying to look inside of node_modules for things that don't exist. Granted I could install react under node_modules using npm install react --save-dev to only have it in my development environment but that doesn't answer for my Submodule and Utils. Keep in mind I don't want to have to change this style because it works fine as it is just not for unit testing.

In a browser environment I can load up SystemJS from my jspm_modules, resolve my config.js import script which handles all the "System.config" stuff for SystemJS including setting my baseURL, paths, map and then finally import my main app.

I'm not sure really where-in the problem lies: do I have a ridiculous project setup? Most of my modules are inside of jspm_modules but I have other modules throughout my project that I like being able to reference like import api from 'api/someapi', import someStore from 'stores/some-store', and import FancyFrame from 'layout/frames/FancyFrame'.

Each of those top level names reference areas of my project. Some may reference npm modules, some may reference app modules, some are bitbucket/github/vendor modules.... point being... MODULES EVERYWHERE. Luckily SystemJS saves the day by allowing me to properly map things to where they should be found.

[buddyp450]

Having re-read my last comment I see this as more of an issue with my project setup and SystemJS than Jest now.

[cpojer]

Feel free to reopen if this is still an issue with the latest version of jest (0.7.1+).

[erquhart]

@cpojer are you saying Jest now works with ES6 modules via jspm/System.js?

[cpojer]

No, did I say anything like this?

[erquhart]

The OP distilled his issue in a recent comment, namely:

the problem with this is that all of my modules use import statements that go looking for things using the SystemJS loader

He then closed with this:

Having re-read my last comment I see this as more of an issue with my project setup and SystemJS than Jest now.

Your response:

Feel free to reopen if this is still an issue with the latest version of jest (0.7.1+).

That led me to believe that his issue, incompatibility with the SystemJS module loader, is expected to be resolved in Jest 0.7.1+. Obviously not the case, given your response.

That said, do you know if this is on the roadmap?

[cpojer]

It is unlikely there'll be official support for this library unless it is a community contribution.

[erquhart]

Understood, thanks for clarifying.

[mseimys]

+1

I also have similar problem: but using Webpack, not SystemJS to bundle things. As @buddyp450, I have a separate folder for shared in-house developed modules next to node_modules, called mycompany_modules and importing them like: import {Reporting} from "reporting";

To get that running I updated Webpack config to include additional directory and it works like a charm:
resolve: { modulesDirectories: ["node_modules", "mycompany_modules"] }

However, it seems jest config is missing such feature, right? If I copy mycompany_modules/reporting to node_modules/reporting - it can find it. But it would be great if I could separate them: node_modules is really big, and it is not under version control :)

[yoavniran]

posting here in case others like me get here when searching for a solution to using Jest with a JSPM-based app.

I've written a Gulp plugin to help run Jest with JSPM/SystemJS apps: gulp-jest-jspm.

to use it, you dont even have to be using Gulp, you can simply use its getJestConfig() method to generate the config for you before you run Jest.

[ArmorDarks]

@buddyp450 Did you come up with your own solution?

[buddyp450]

@ArmorDarks no, sorry. This was from a short foray into evaluating jest that I took a while back ago. My tests currently do not use jest.

[ArmorDarks]

@buddyp450 Thanks for reply!

You mean, it's easier to use JSPM/SystemJS with other test runners? I thought that issue with deps resolution will be relatively same everywhere....

[yoavniran]

hi @ArmorDarks ,
If youre a System JS user I created gulp-jest-jspm to work around the dependency issues so you can use Jest easily.

[ArmorDarks]

@yoavniran Hi! We've seen your plugin, of course, thanks for it. We're still looking into it as possible solution, but since it doesn't fit in our current pipeline well, we really hope that #2445 will be merged soon and it will provide more practical way.

Though, it will still require additional function, which will "transpile" SystemJS mappings to understandable for Jest ones, and some API's of gulp-jest-jspm seems to be already solving this issue. Maybe it would be good idea to separate API from gulp task, and make gulp task depend on it, so that API would be much easier to use in Grunt or in .jestrc?

[yoavniran]

@ArmorDarks
cool, so actually the logic to get the mapping for Jest is available as a separate function in the same package which you can use today outside of gulp.

My original thinking was to separate the logic to its own package but due to time constraints I didnt get to it and was waiting for the need to arise. If it will be useful for you Ill be happy to separate them into different packages.

[ArmorDarks]

@yoavniran yeah, it would be logical to separate them. Because, well, it's kinda strange to require whole Gulp plugin to invoke its method in Grunt environment :)

I think we should wait for #2445 PR to be merged first. So far it seems to be ignored for quite a while...

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.