您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。摩卡酵素 + webpack答案

【问题标题】：You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. mocha enzyme + webpack您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。摩卡酵素 + webpack
【发布时间】：2020-07-02 11:51:50
【问题描述】：

我正在设置 mocha + chai + 酶来测试我的反应成分。我已经如下设置了 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']。请帮我解决这个错误

【问题讨论】：

当然，mocha 自己如何理解 .jsx 文件？这不是 Javascript，您也需要那里的 babel 加载器。
@Mike'Pomax'Kamermans 我该如何申请
什么意思？您实际上已经在非测试捆绑任务中使用了 js/jsx 的 babel-loader。至于使用加载器的更多细节，webpack.js.org/concepts/loaders 是权威来源，webpack.js.org/configuration/module/#ruleuse 解释了一种文件类型的多个加载器。
@Mike'Pomax'Kamermans 谢谢我用你的概念修复了这个错误
可能值得再次删除这个问题 - 多个加载器是很常见的事情，并且已经有相当数量的教程和 SO 问题/答案。

标签： javascript mocha.js enzyme

【解决方案1】：

我将 mocha-loader 替换为 babel-loader 以使 mocha 能够理解 .jsx 文件我还将 test: /\*.test.js$\/ 替换为 test: /\.js$|jsx/ 以使 mocha 能够访问 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'],
    },
}

【讨论】：