npm - Mocha 测试不能与 Webpack 和 mocha-loader 一起运行

转载作者：行者123 更新时间：2023-12-03 13:00:05

25

4

背景

我正在将一些 npm 脚本移植到 Webpack 加载器，以更好地了解 Webpack 的工作原理，除了 Mocha 测试之外，我的一切都正常工作:我有一个失败的测试，但它没有显示 Mocha 正在使用 mocha-loader 或者测试失败:

问题

我需要做什么不同的事情才能让所有 src/**/*.test.js 文件在 Webpack 中与 Mocha 一起运行？

重现步骤

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

最佳答案

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
    }
};

测试/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"
}

测试.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通过命令行执行相同的测试。

希望这有帮助。

关于npm - Mocha 测试不能与 Webpack 和 mocha-loader 一起运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32385219/

25

4

0

文章推荐： javascript - 我应该在任何地方使用 React.PureComponent 吗？

文章推荐： reactjs - 如何通过 Jest 测试 React PropTypes？

文章推荐： javascript - 箭头函数不应该返回赋值吗？

mocha.js - Mocha 有测试直播模式吗？
我正在使用 mocha 和 chai 进行 TDD 以测试一些 NodeJS 脚本，每次我想再次运行测试时都必须运行“mocha”。有没有办法设置 mocha 和 chai 在我保存源文件后立即运行
mocha.js - Mocha 重试整个套件不仅测试失败
如果任何测试失败，我正在尝试配置 mocha 以重试整个套件。我导航到一个 URL，然后填充一个表单并提交，然后用户被重定向，如果找到某个元素，则最后一次测试通过。如果找不到该元素，我需要再次导航
mocha.js - mocha - 如何列出将要执行的文件
我想知道是否有办法让 mocha 列出它将执行的所有测试。当我使用 mocha --help 列出它们时，我没有看到任何合理的选项；有几个报告者，但似乎没有一个旨在列出将要处理的文件(或命名将要运行的
mocha.js - Mocha Hook ，只有方法不起作用
before()、after()、beforeEach()、afterEach() 等 mocha Hook 无法正常工作。 only 方法也不起作用。 beforeEach 都没有被调用。我得到一个
mocha.js - Mocha beforeEach 没有运行
我已经看到很多关于此的问题，但所有修复都不适用于我的代码。我做错了什么？我的 beforeEach 没有被执行。这是单元测试代码: var assert = require('assert');
mocha.js - 在 mocha 测试之间共享资源
如何在 mocha 测试之间共享资源(例如连接)？ cookies.test.js: describe('Cookies', function() { it('setCookie()', func
mocha.js - 以编程方式使用时，Mocha 在第一次测试失败后存在
我正在尝试以编程方式运行 mocha。 runner的代码如下: var Mocha = require("mocha"); var mocha = new Mocha(); mocha.report
mocha.js - 为什么在运行 mocha 时找不到我的测试文件？
我正在遵循此 tutorial 的第 1 步我有以下文件夹结构: ├── lib │ ├── json │ │ ├── messages.json │ │ └── testMessages.json
mocha.js - 如何订阅 mocha 套件事件？
我希望能够扩展 mocha 测试结果并从可用的 mocha 对象中收听它们。首先，我正在寻找“通过”结果。看起来他们可能是从套件中订阅的，但我不确定如何...... 我尝试了以下我认为会听到我所有测
mocha.js - Mocha/Nightmare测试失败，但仍在等待超时
我正在运行此测试(简化)，该测试按预期失败了……但是，尽管失败了，但它仍要等待20秒的全部超时时间。如何使它立即失败？ it("should fail before timeout", functio
mocha - karma 与 Mocha 的区别
我是Java语言世界的新手，主要涉足OOP。我试图在网上查找Karma和 Mocha 之间的明显区别，但徒劳无功。我知道Karma是一个测试运行器，而Mocha是一个单元测试框架，但是Mocha也有自
mocha.js - 如何以编程方式跳过 Mocha 测试？
我有一段代码，其中某些测试在 CI 环境中总是会失败。我想根据环境条件禁用它们。如何在运行时执行期间以编程方式跳过 mocha 中的测试？最佳答案您可以通过在describe或it block
mocha.js - Mocha Chai - 测试对象的多个属性
我想使用 chai 应该断言检查我的响应对象是否包含提到的属性。下面是我的代码片段: chai.request(app) .post('/api/signup') .
mocha.js - 反转 Mocha 的差异颜色输出？
例如，默认情况下，背景颜色为绿色或红色。我想将绿色/红色作为前景，将背景作为我的默认颜色(白色)。因为在浅色终端配色方案上很难看到任何东西，因为前景是黑色的，而背景会变成红色或绿色。最佳答案在
mocha.js - 如何在 mocha 记者中获取测试的文件名
有没有办法在 mocha 记者中获取当前测试的文件名？我在基础和示例中找不到任何内容。最佳答案实际上，文件名在中传递给了 Suite文件 Mocha 中的字段从 this 开始拉取请求。只是现
mocha.js - 如何在 mocha 中测试类(class)？
在我走向 TDD 的过程中，我使用了 Mocha、chai 和 sinon。那里肯定有一个学习曲线。我的目标是编写一个测试来验证 method4 是否已执行。我如何做到这一点？ //MyData.
mocha.js - Chai Mocha : Identify should assertion
我正在使用mocha和chai作为断言。我在规范中有几个主张: Exp1.should.be.true Exp2.should.be.true Exp3.should.be.true 如果其中之一失
mocha.js - Mocha : async vs sync
根据 Mocha 文档，“Mocha 测试串行运行”这意味着按照它们的定义顺序。我的问题是:是什么让异步 (带有完成回调)测试不同于同步 ? 最佳答案您通过传递给 it 来告诉 Mocha 测
mocha.js - PureScript FFI 转 mocha
我正在尝试将 mocha 绑定(bind)写入 PureScript 并且对 Control.Monad.Eff 完全感到困惑 describe(function(){ //do stuff }
mocha.js - sequelize 函数不会在 Mocha 中引发异常
我对 mocha 框架有点陌生。此代码应该抛出异常，但不会。 (为简单起见，将所有代码放入测试中) describe("Test", function() { it("this should

首页

博学

6Ren·AI

商城