Module not found: Error: Cannot resolve module 'react-addons-test-utils'

Question

I have an ES6 project in which I use webpack to convert the client code to ES5. The project uses ReactJS on the client side so, naturally, the unit tests use the React TestUtils. In the most recent update (0.14), React changed how several modules are imported (including TestUtils). I want to update, but I cannot figure out how to make the unit tests work after changing the imports.

When I attempt to run the tests, I get the following messages:

04 12 2015 12:40:48.038:ERROR [karma]: { [Error: no such file or directory]
  code: 'ENOENT',
  errno: 34,
  message: 'no such file or directory',
  path: '/_karma_webpack_/public/test/main.js' }
Error: no such file or directory
    at MemoryFileSystem.readFileSync (<project>/node_modules/karma-webpack/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:107:10)
    at MemoryFileSystem.readFile (<project>/node_modules/karma-webpack/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:297:21)
    at doRead (<project>/node_modules/karma-webpack/index.js:156:26)
    at Plugin.readFile (<project>/node_modules/karma-webpack/index.js:160:3)
    at doNTCallback0 (node.js:419:9)
    at process._tickCallback (node.js:348:13)
Hash: dee787e2bee8303745db
Version: webpack 1.12.9
Time: 3657ms
                               Asset      Size  Chunks       Chunk Names
                 public/test/main.js   1.71 MB       0       public/test/main.js
5044d04bf14a5de57d08.hot-update.json  35 bytes               
chunk    {0} public/test/main.js (public/test/main.js) 1.6 MB [rendered]
    [0] ./public/test/main.js 176 bytes {0} [built]
    [1] ...

ERROR in ./public/test/common/test_modal.jsx
Module not found: Error: Cannot resolve module 'react-addons-test-utils' in <project>/public/test/common
 @ ./public/test/common/test_modal.jsx 13:28-62

ERROR in ./public/test/pages/test_auth.jsx
Module not found: Error: Cannot resolve module 'react-addons-test-utils' in <project>/public/test/pages
 @ ./public/test/pages/test_auth.jsx 17:28-62

In my tests_auth.jsx and test_modal.jsx files, I begin the following imports:

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';

The test script in my package.json is:

PHANTOMJS_BIN=./node_modules/.bin/phantomjs && ./node_modules/karma/bin/karma start karma.config.js

My relevant dependencies are:

  "devDependencies": {
    "chai": "^3.4.1",
    "chai-as-promised": "^5.1.0",
    "coveralls": "^2.11.4",
    "karma": "^0.13.9",
    "karma-chai": "^0.1.0",
    "karma-chai-as-promised": "^0.1.2",
    "karma-chai-plugins": "^0.6.1",
    "karma-coverage": "^0.5.2",
    "karma-mocha": "^0.2.0",
    "karma-phantomjs-launcher": "^0.2.1",
    "karma-sinon-chai": "^1.0.0",
    "karma-webpack": "^1.7.0",
    "mocha": "^2.3.3",
    "phantomjs": "^1.9.18",
    "react-hot-loader": "^1.3.0",
    "webpack-dev-server": "^1.10.1"
  },
  "dependencies": {
    "react": "0.14.3",
    "react-dom": "0.14.3",
    "webpack": "^1.12.1"
  }

My karma.config.js is:

var webpack = require('webpack');

module.exports = function(config) {
    'use strict';

    config.set({
        files: [
            './public/test/polyfill.js',
            './public/test/main.js'
        ],
        preprocessors: {
            './public/test/main.js': [
                'webpack'
            ]
        },
        browsers: [
            'PhantomJS'
        ],
        frameworks: [
            'mocha',
            'sinon-chai',
            'chai-as-promised',
            'chai'
        ],
        reporters: [
            'progress',
            'coverage'
        ],
        coverageReporter: {
            dir: 'coverage/',
            reporters: [
                {
                    type: 'lcovonly',
                    subdir: '.',
                    file: 'lcov.info'
                }, {
                    type: 'html',
                    subdir: 'html'
                }
            ]
        },
        webpack: {
            plugins: [
                new webpack.HotModuleReplacementPlugin(),
                new webpack.NoErrorsPlugin()
            ],
            module: {
                loaders: [
                    {
                        test: /\.jsx?$/,
                        exclude: /node_modules/,
                        loader: 'babel-loader?stage=0'
                    }
                ]
            },
            resolve: {
                extensions: [
                    '',
                    '.js',
                    '.jsx'
                ],
                modulesDirectories: [
                    'node_modules',
                    'public/src',
                    'public/test'
                ]
            }
        },
        webpackMiddleware: {
            noInfo: true
        },
        singleRun: true,
        plugins: [
            'karma-mocha',
            'karma-webpack',
            'karma-coverage',
            'karma-sinon-chai',
            'karma-chai',
            'karma-chai-plugins',
            'karma-chai-as-promised',
            'karma-phantomjs-launcher'
        ]
    });
};

Finally, my file structure looks something like this:

karma.config.js
package.json
node_modules/
public/
    app.js
    index.html
    src/
        main.jsx
    test/
        main.js
        polyfill.js
        pages/
            test_auth.jsx
        common/
            test_modal.jsx

I clearly have something configured wrong, but I am having a lot of trouble figuring out what it is. Has anyone encountered a similar problem? Does someone more familiar with Karma, Webpack, or React 0.14 know what I'm dong wrong?

Answer 1

I feel pretty dumb right about now. I forgot to add 'react-addons-test-utils' to my package.json.