webpack 使用 mocha 和 chai 添加测试模块

Question

所以我刚刚开始使用 mocha 和 chai（在浏览器中测试），目前我的 webpack.config 应用程序文件如下所示：

    var webpack = require('webpack');

    module.exports ={
      entry: ["./js/app.js"],
      output: {
        path: "./js",
        filename:"bundle.js"
      },
      module:{
        loaders: [
          {
            test: [/\.es6$/, /\.js$/],
            exclude: /(css|plugins|node_modules)/,
            loader: 'babel-loader',
            query: {
              cacheDirectory: true,
              presets: ['react', 'es2015']
            }
          },
          {
            test: [/\.scss$/],
            loaders: ['style', 'css', 'sass']
          }
        ]
      },
      plugins:[
        new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery"
        })
      ],
      resolve: {
        extensions: ['', '.js', '.es6', '.jsx']
      },
      watch: false

    }

现在我的测试文件夹在根目录下，但假设我想使用import/export，并导入一些反应组件进行测试，最佳做法是什么？

我必须创建多个入口点和输出点吗？一个用于我的主要应用程序，一个用于测试内容，但我如何在不同的目录中输出包。还是我应该为测试文件夹本身创建另一个 webpack.config？

Answer 1

您编写的每个测试都将在其自己的 .js 文件中。您的测试运行器将独立执行您的每个测试文件。

此外，您的测试不会引用您的包，而是直接导入所需的文件。您不想在测试期间包含整个包，因为那样会添加很多您不需要的代码，并且会使您的测试开发变得混乱。仅包括必要的内容意味着干扰测试结果的内容要少得多。

可以找到一个有用的link，其中涵盖了测试 React 组件的设置：

https://www.toptal.com/react/how-react-components-make-ui-testing-easy

此外，Facebook 的 Reacts 测试实用程序页面：

https://facebook.github.io/react/docs/test-utils.html

webpack 使用 mocha 和 chai 添加测试模块

webpack adding testing module with mocha and chai

mocha.js

chai

reactjs

webpack