Karma js不会提供图片文件

时间:2015-07-26 23:02:03

标签: javascript node.js reactjs phantomjs karma-mocha

Karma js似乎无法提供我项目中的任何图像。我目前的业力配置如下:

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: [
            {pattern: "src/assets/images/*.png", watched: false, included: false, served: true},
            './Unit_Tests/polyfill.js',
            './Unit_Tests/main.js'

        ],

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


        /**
         * 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"},
                    {test: /\.less$/, loader: "style!css!less"}
                ],
                postLoaders: [{
                    test: /\.jsx?$/,
                    exclude: /(test|node_modules)\//,
                    loader: 'istanbul-instrumenter'
                }]
            },
            resolve: {
                extensions: ['', '.js', '.jsx', '.css', '.less']
            }
        },

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

我总是收到这个错误:

  Error: Cannot find module "../assets/images/downloadios.png"

如果我使用此设置运行它:

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: [
            'src/**/*.png',
            './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'],
            '**/*.less': ['less']
        },


        /**
         * 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"},
                    {test: /\.less$/, loader: "style!css!less"}
                ],
                postLoaders: [{
                    test: /\.jsx?$/,
                    exclude: /(test|node_modules)\//,
                    loader: 'istanbul-instrumenter'
                }]
            },
            resolve: {
                extensions: ['', '.js', '.jsx', '.css', '.less']
            }
        },

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

我收到此错误:

SyntaxError: Parse error
at path/to/src/assets/images/downloadandroid.png:1

我现在已经过了几个小时了,似乎无法找到让这件事情快乐的组合。我不明白我做错了什么我看过所有可以找到的业力js例子,似乎没什么用。

1 个答案:

答案 0 :(得分:2)

因此,当我将以下内容添加到我的karma.config.js时,它将清除此问题

        webpack: {
        module: {
            loaders: [
                {test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader?stage=0"},
                {test: /\.less$/, loader: "style!css!less"},


               {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}

            ],
            postLoaders: [{
                test: /\.jsx?$/,
                exclude: /(test|node_modules)\//,
                loader: 'istanbul-instrumenter'
            }]
        },
        resolve: {
            extensions: ['', '.js', '.jsx', '.css', '.less']
        }
    },
  

{test:/.( png | .jpg)$ /,loader:'url-loader?limit = 8192'}