当前位置:  开发笔记 > 编程语言 > 正文

找不到模块:错误:无法解析模块'react-addons-test-utils'

如何解决《找不到模块:错误:无法解析模块'react-addons-test-utils'》经验,为你挑选了1个好方法。

我有一个ES6项目,我使用webpack将客户端代码转换为ES5.该项目在客户端使用ReactJS,因此,单元测试自然会使用React TestUtils.在最新的更新(0.14)中,React 更改了几个模块的导入方式(包括TestUtils).我想更新,但我无法弄清楚如何在更改导入后使单元测试工作.

当我尝试运行测试时,我收到以下消息:

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 (/node_modules/karma-webpack/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:107:10)
    at MemoryFileSystem.readFile (/node_modules/karma-webpack/node_modules/webpack-dev-middleware/node_modules/memory-fs/lib/MemoryFileSystem.js:297:21)
    at doRead (/node_modules/karma-webpack/index.js:156:26)
    at Plugin.readFile (/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 /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 /public/test/pages
 @ ./public/test/pages/test_auth.jsx 17:28-62

在我的tests_auth.jsx和test_modal.jsx文件中,我开始以下导入:

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

我的package.json中的测试脚本是:

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

我的相关依赖是:

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

我的karma.config.js是:

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

最后,我的文件结构如下所示:

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

我显然有一些配置错误,但我在弄清楚它是什么时遇到了很多麻烦.有谁遇到过类似的问题?更熟悉Karma,Webpack或React 0.14的人是否知道我错了什么?



1> CivBase..:

我现在觉得很蠢.我忘了在我的package.json中添加'react-addons-test-utils'.

推荐阅读
小白也坚强_177
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有