您可能需要适当的加载程序来处理此文件类型，当前没有配置任何加载程序来处理此文件。摩卡酶+ Webpack

Question

我正在设置摩卡+柴+酶来测试我的反应成分。我已经如下设置了webpack.config.js文件

webpack.config.js

const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");

module.exports = {
    node: {
        fs: 'empty'
    },
    entry: "./App.js",
    output: {
        path: path.join(
            __dirname, '/prod'
        ),
        filename: "app.bundle.js",
    },
    module: {
        rules: [
            {
                test: /\.js$|jsx/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                }
            },
            { test: /\.js$|jsx/, use: 'mocha-loader' },
        ],
        options: {
            presets: ["es2015"]
        },
    },
    resolve: {
        extensions: ['*', '.js', '.jsx'],
    },
    plugins: [
        new HtmlPlugin({
            template: './public/index.html'
        })
    ]
}

webpack.config.test.js

const webPackExternals = require（'webpack-node-externals']

module.exports = {
    mode:'development',
    target: 'node',
    externals: [webPackExternals()],
    module: {
        rules: [
            {
                test: /\*.test\.js$/,
                use: ['mocha-loader'],
                exclude: /node_modules/,
            },
            { test: /\.css$/, use: 'css-loader' },
        ]
    },
}

package.json

{
  "name": "tobacco-free",
  "version": "1.0.0",
  "description": "",
  "main": "App.js",
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --mode development --open --hot",
    "start": "serve ./prod",
    "test": "mocha-webpack --webpack-config webpack.config.test.js \"./src/**/*.test.js\"",
    "coverage": "nyc --reporter=lcov --reporter=text npm run test"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "istanbul-instrumenter-loader": "^3.0.1",
    "mapbox-gl": "^1.8.1",
    "nyc": "^15.0.0",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "serve": "^11.3.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "7",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "chai": "^4.2.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "html-webpack-plugin": "^3.2.0",
    "mocha": "^7.1.1",
    "mocha-loader": "^4.0.2",
    "mocha-webpack": "2.0.0-beta.0",
    "webpack-dev-server": "^3.10.3",
    "webpack-node-externals": "^1.7.2"
  }
}

当我进行纱线测试时，出现此错误https://github.com/amkayondo/imgBank/blob/master/Annotation%202020-03-21%20173230.jpg

You may need an appropriate loader to hand
le this file type, currently no loaders are 
configured to process this file.

但是我不知道它需要什么加载器，因为我在webpack.config.js中添加了use：['mocha-loader']。请帮助我解决这个错误

Answer 1

我将mocha-loader替换为babel-loader以使摩卡能够理解.jsx文件我还用测试替换了test: /\*.test.js$\/：/\.js$|jsx/使摩卡可以访问test及其component我还将解析键添加到webpack.config.test.js文件中的resolve: { extensions: ['*', '.js', '.jsx'],}，以使Mocha能够读取js和jsx文件

修改后的webpack.config.test.js

const webPackExternals = require('webpack-node-externals')

module.exports = {
    mode:'development',
    target: 'node',
    externals: [webPackExternals()],
    module: {
        rules: [
            {
                test: /\.js$|jsx/,
                use: 'babel-loader',
                exclude: /node_modules/,
            },
            { test: /\.css$/, use: 'css-loader' },
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx'],
    },
}