当前位置: 代码迷 >> JavaScript >> 带有React js的Phantom js找不到更少的js文件
  详细解决方案

带有React js的Phantom js找不到更少的js文件

热度:96   发布时间:2023-06-05 09:40:00.0

我正在尝试基于此中使用的单元测试框架对React项目进行单元测试

我的项目的单元测试的设置与此完全相同。 我的问题是它似乎不支持更少的js文件。 每当我尝试运行测试文件较少的文件时,都会收到来自幻影js的错误消息

PhantomJS 1.9.8(Mac OS X 0.0.0)错误错误:在/Unit_Tests/main.js:26577找不到模块“ ./Dashboard.less”

我的main.js文件外观

/**
 * Test suite entry point
 */

// Babel Polyfill
import 'babel-core/polyfill';

import './routes/Home_Test';
//import './routes/Dashboard.less';

和我的karma.config.js

/**
 * This is the Karma configuration file. It contains information about this skeleton
 * that provides the test runner with instructions on how to run the tests and
 * generate the code coverage report.
 *
 * For more info, see: http://karma-runner.github.io/0.12/config/configuration-file.html
 */
module.exports = function(config) {
  config.set({

    /**
     * These are the files required to run the tests.
     *
     * The `Function.prototype.bind` polyfill is required by PhantomJS
     * because it uses an older version of JavaScript.
     */
    files: [
      './Unit_Tests/polyfill.js',
      './Unit_Tests/main.js'
    ],

    /**
     * The actual tests are preprocessed by the karma-webpack plugin, so that
     * their source can be properly transpiled.
     */
    preprocessors: {
      './Unit_Tests/main.js': ['webpack']
    },

    /**
     * We want to run the tests using the PhantomJS headless browser.
     * This is especially useful for continuous integration.
     */
    browsers: ['PhantomJS'],

    /**
     * Use Mocha as the test framework, Sinon for mocking, and
     * Chai for assertions.
     */
    frameworks: ['mocha', 'sinon-chai'],

    /**
     * After running the tests, return the results and generate a
     * code coverage report.
     */
    reporters: ['progress', 'coverage'],

    /**
     * When generating a code coverage report, use `lcov` format and
     * place the result in coverage/lcov.info
     *
     * This file will be sent to Coveralls by the `coveralls` npm script.
     */
    coverageReporter: {
      dir: 'coverage/',
      reporters: [
        { type: 'lcovonly', subdir: '.', file: 'lcov.info' },
        { type: 'html', subdir: 'html' }
      ]
    },

    /**
     * The configuration for the karma-webpack plugin.
     *
     * This is very similar to the main webpack.local.config.js, with the
     * exception of specifying an istanbul-transformer post loader so
     * that we can generate an accurate code coverage report.
     */
    webpack: {
      module: {
        loaders: [
          { test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader?stage=0"}
        ],
        postLoaders: [{
          test: /\.jsx?$/,
          exclude: /(test|node_modules)\//,
          loader: 'istanbul-instrumenter'
        }]
      },
      resolve: {
        extensions: ['', '.js', '.jsx']
      }
    },

    /**
     * Configuration option to turn off verbose logging of webpack compilation.
     */
    webpackMiddleware: {
      noInfo: true
    },

    /**
     * Once the mocha test suite returns, we want to exit from the test runner as well.
     */
    singleRun: true,

    /**
     * List of plugins
     */
    plugins: [
      'karma-mocha',
      'karma-webpack',
      'karma-coverage',
      'karma-sinon-chai',
      'karma-phantomjs-launcher'
    ],
  });
}

我一直在寻找有关如何对包含较少但找不到的文件进行单元测试的好答案。 我不太在乎仅对jsx文件进行CSS单元测试。

弄清楚了

    preprocessors: {
        './Unit_Tests/main.js': ['webpack'],
        '**/*.less': ['less']
    },

    webpack: {
        module: {
            loaders: [
                {test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader?stage=0"},
                {test: /\.less$/, loader: "style!css!less"}
            ],
            postLoaders: [{
                test: /\.jsx?$/,
                exclude: /(test|node_modules)\//,
                loader: 'istanbul-instrumenter'
            }]
        },
        resolve: {
            extensions: ['', '.js', '.jsx', '.css', '.less']
        }
    },

更改您的karma.config.js以包括以下内容

  相关解决方案