Mocha 测试不使用 Webpack 和 mocha-loader 运行

Question

背景

我正在将一些 npm 脚本移植到 Webpack 加载器，以更好地了解 Webpack 的工作原理，除了我的 Mocha 测试之外，我的所有东西都在工作：我有一个失败的测试，但它没有表明 Mocha 正在运行与 mocha-loader 或测试失败：

问题

在 Webpack 中使用 Mocha 将所有 src/**/*.test.js 文件转换为运行我需要做哪些不同的事情？

重现步骤

克隆https://github.com/trevordmiller/webpack-loaders-playground
运行 npm test 查看测试应该如何工作
运行 npm run dev 查看测试如何不运行使用 Webpack

Answer 1

Mocha 加载器不会在构建时运行测试，它用于创建一个专门包含您的测试的包，然后您可以从浏览器运行。

我建议为您的测试创建一个单独的 webpack 配置文件，然后您可以将其托管在使用与您的应用程序不同的端口的 webpack-dev-server 上。这是一个或多或少用于我自己项目的模式的示例（在撰写此答案时）：

webpack.tests.config.js

module.exports = {
    entry: 'mocha!./tests/index.js',
    output: {
        filename: 'test.build.js',
        path: 'tests/',
        publicPath: 'http://' + hostname + ':' + port + '/tests'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['babel-loader']
            },
            {
                test: /(\.css|\.less)$/,
                loader: 'null-loader',
                exclude: [
                    /build/
                ]
            },
            {
                test: /(\.jpg|\.jpeg|\.png|\.gif)$/,
                loader: 'null-loader'
            }
        ]
    },
    devServer: {
        host: hostname,
        port: port
    }
};

tests/index.js

// This will search for files ending in .test.js and require them
// so that they are added to the webpack bundle
var context = require.context('.', true, /.+\.test\.js?$/);
context.keys().forEach(context);
module.exports = context;

package.json

"scripts": {
    "test": "find ./ -name '*.test.js' | xargs mocha -R min -r babel/register",
    "devtest": "webpack-dev-server --config webpack.tests.config.js",
    "dev": "webpack-dev-server --config webpack.config.js"
}

test.html

<!DOCTYPE html>
<html>
    <head>
        <title>Mocha</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./node_modules/mocha/mocha.css" />
        <script src="/tests/test.build.js"></script>
    </head>
    <body>
    </body>
</html>

然后运行 npm run devtest，打开 http://localhost:<port you picked>/webpack-dev-server/test.html，mocha 应该运行你的测试。

如果您的模块不需要 CSS/LESS 或图像，您可以从 webpack.tests.config.js 中删除这些加载器。

启用热加载后，这是一个非常棒的设置，因为我可以在不同的浏览器选项卡中同时拥有我的应用程序和我的测试运行，然后更新我的代码并查看我的更改和我的测试重新运行马上宁。

您还可以运行 npm run test 通过命令行执行相同的测试。

希望这对您有所帮助。

Answer 2

我喜欢 JimSkerritt 的回答，但由于某种原因无法在我的计算机上运行。使用下面的两个配置文件，您可以通过以下方式运行应用程序：

npm start              // then http://localhost:8080/bundle

和运行你的测试：

npm test              // then http://localhost:8081/webpack-dev-server/test

两个服务器自动重新加载&&你可以运行同时！

配置文件

webpack.config.js

module.exports = {
    entry: "./index.js",
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

package.json

{
  "name": "2dpointfinder",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --inline",
    "test": "webpack-dev-server 'mocha!./tests/test.js' --output-filename test.js --port 8081"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^0.19.0",
    "style-loader": "^0.12.4"
  },
  "devDependencies": {
    "mocha": "^2.3.3",
    "mocha-loader": "^0.7.1",
    "should": "^7.1.0"
  }
}

Mocha 测试不使用 Webpack 和 mocha-loader 运行

Mocha tests don't run with Webpack and mocha-loader

mocha.js

npm

reactjs

webpack

webpack-dev-server

背景

问题

重现步骤

webpack.tests.config.js

tests/index.js

package.json

test.html

配置文件

webpack.config.js

package.json