Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов, в настоящее время загрузчики не настроены для обработки этого файла. мокко энзим + пачка

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' },
        ]
    },
}

пакет. 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.

Но я не знаю, какой загрузчик ему нужен потому что я добавил use: ['mocha-loader'] В thewebpack.config. js. Пожалуйста, помогите мне с этой ошибкой

Answer 1

Я заменил mocha-loader на babel-loader, чтобы позволить mocha понять файлы .jsx. Я также заменил test: /\*.test.js$\/ на тест: /\.js$|jsx/, чтобы позволить mocha получить доступ к тесту и его компонент Я также добавляю ключ разрешения к resolve: { extensions: ['*', '.js', '.jsx'],} в файле webpack.config.test. js, чтобы 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'],
    },
}