node.js - cannot - Módulo no encontrado: Error: No se puede resolver el módulo ''react-addons-test-utils''

cannot find module http errors

Question

Tengo un proyecto ES6 en el que utilizo el paquete web para convertir el código del cliente a ES5. El proyecto usa ReactJS en el lado del cliente, por lo que, naturalmente, las pruebas de la unidad usan React TestUtils. En la actualización más reciente (0.14), React cambió la forma en que se importan varios módulos (incluido TestUtils). Quiero actualizar, pero no puedo entender cómo hacer que las pruebas de la unidad funcionen después de cambiar las importaciones.

Cuando intento ejecutar las pruebas, recibo los siguientes mensajes:

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

En mis archivos tests_auth.jsx y test_modal.jsx, comienzo las siguientes importaciones:

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

El script de prueba en mi package.json es:

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

Mis dependencias relevantes son:

  "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"
  }

Mi karma.config.js es:

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''
        ]
    });
};

Finalmente, mi estructura de archivos se ve así:

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

Claramente, tengo algo mal configurado, pero me está costando mucho trabajo descifrar de qué se trata. ¿Alguien ha encontrado un problema similar? ¿Alguien más familiarizado con Karma, Webpack o React 0.14 sabe lo que estoy haciendo mal?

Answer 1

Me siento bastante tonto ahora mismo. Olvidé agregar ''react-addons-test-utils'' a mi paquete.json.