javascript - 如何将 Mocha 测试文件与 Webpack 流程集成？

Question

我有一个 JS 类，我想为其编写测试。我安装了 Mocha 。在项目根目录中创建了一个文件 test.js 。我现在可以像这样在其中运行测试

var assert = require('assert');

describe('Arithmetic', function() {
    describe('Plus', function() {
        it('1 + 1 equals 2', function() {
        assert.equal(1+1, 2);
        });
    });
});

一切都好!我不确定如何测试我的文件，因为它包含很多 ES6 内容。例如导入像

import someDependency from 'resources/assets/js/someDependencyToMyClass';

如何让 mocha 知道我的 package.json/webpack 进程？或者我应该只测试代码的转译版本？

<小时/>

我尝试自己设置一个测试类并使用 Node 运行，但随后我绕过了所有 Babel 内容，因此它无法工作。除了 SPA (React) 之外，我还考虑过制作一个测试页面，但我不想让实际代码变得困惑。你会怎么做？

此外，这是我的项目 package.json。

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.17",
        "babel-preset-react": "^6.23.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^1.0",
        "lodash": "^4.17.4",
        "mocha": "^5.0.0",
        "react": "^15.4.2",
        "react-dom": "^15.4.2",
        "testing": "^1.1.1"
    },
    "dependencies": {
        "bootstrap": "^4.0.0",
        "popper.js": "^1.12.9",
        "react-redux": "^5.0.6",
        "redux": "^3.7.2"
    }
}

Answer 1

您可能需要引入 mocha-webpack ( https://github.com/zinserjan/mocha-webpack )，以便根据您的 webpack 配置预编译您的代码。然后，您可以简单地在 package.json 中创建一个测试脚本，指向您的 webpack 配置，如下所示:

“脚本”:{
"test": "mocha-webpack --webpack-config=webpack.config.js 测试/*.js"
}。

运行 npm test 将正确预编译您的代码。希望它能为您指明正确的方向。