React/Mocha Testing: can't find imported components

Question

I have a similar problem as this question:

Unable to import a React Component in my Mocha test

The problem is that I have incorporated both of these changes and Mocha is still not detecting my "import" statements when I try to test components.

I see in my callstack (attached at bottom), I am loading babel-register.

Files are as follow

file structure

/client
    /src
      /components
         //test components
      /containers
    /test
      /components
      /dom.js && helper.js

package.json

"babel": {
    "presets": ["es2015"]
  }
"scripts": {
    "start": "node bin/server.js",
    "test": "mocha --compilers js:babel-register \"./test/**/*.js\" --require ignore-styles",
    "test:watch": "npm run test -- --watch"
  },

mocha.opt file

--require ./test/test_helper.js
--require ./test/dom.js 
--recursive

EDIT: added import statements from component file

//From component

import { Modal } from 'components/Modal'

//Modal component

export class RecipeModal extends Component {

this is the call stack/error message I receive when I try to run mocha

Warning: require('react/addons') is deprecated. Access using require('react-addons-{addon}') instead.
Error: Cannot find module 'components/RecipeModal'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:286:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (index.js:11:1)
    at Module._compile (module.js:434:26)

    at loader (/Users/ACKeepingitCoo/Desktop/ketoBot/client/node_modules/babel-register/lib/node.js:158:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/ACKeepingitCoo/Desktop/ketoBot/client/node_modules/babel-register/lib/node.js:168:7)

    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (Recipes_test.js:2:1)
    at Module._compile (module.js:434:26)
    at loader (/Users/ACKeepingitCoo/Desktop/ketoBot/client/node_modules/babel-register/lib/node.js:158:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/ACKeepingitCoo/Desktop/ketoBot/client/node_modules/babel-register/lib/node.js:168:7)

    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at /Users/ACKeepingitCoo/Desktop/ketoBot/client/node_modules/mocha/lib/mocha.js:219:27
    at Array.forEach (native)
    at Mocha.loadFiles (/Users/ACKeepingitCoo/Desktop/ketoBot/client/node_modules/mocha/lib/mocha.js:216:14)
    at Mocha.run (/Users/ACKeepingitCoo/Desktop/ketoBot/client/node_modules/mocha/lib/mocha.js:468:10)
    at loadAndRun (/Users/ACKeepingitCoo/Desktop/ketoBot/client/node_modules/mocha/bin/_mocha:359:22)
    at Object.<anonymous> (/Users/ACKeepingitCoo/Desktop/ketoBot/client/node_modules/mocha/bin/_mocha:376:3)
    at Module._compile (module.js:434:26)
    at Object.Module._extensions..js (module.js:452:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:475:10)
    at startup (node.js:117:18)
    at node.js:951:3

Other (possibly relevant information)

I am running node version manager (node 4.0) because for some reason, using a newer version of node throws an error.

Thanks a lot for the help!

The `from` value of your import suggests that you have a `node_modules/components`, but you don't. When you're not testing the code are you bundling it with something that aliases those paths? If so you'll have to account for that somehow with your test setup. See also http://stackoverflow.com/questions/36943118/shorten-es2015-import-paths/36944166#36944166. — JMM, May 05 '16 at 15:55
perfect. I found some resources on it. you're right that I was using webpack's resolve: modulesDirectories to refer to them — Anthony Chung, May 05 '16 at 16:01

score 2 · Accepted Answer · edited May 23 '17 at 12:07

2

Thanks to @JMM for helping me isolate the source

If you are using aliases in webpack to resolve directory paths, you should include them in your mocha run script or mock-require them with node modules

Using webpack aliases in mocha tests

edited May 23 '17 at 12:07

Community

1
1

answered May 05 '16 at 16:09

Anthony Chung

1,467
2
22
44

React/Mocha Testing: can't find imported components

1 Answers1