如何同时观看webpack-dev-server和Jest测试运行？

Question

如何同时观看webpack-dev-server和Jest测试运行？

8

我正在使用Webpack、Webpack-dev-server和Jest测试套件开展React项目。我的问题是：如何通过Webpack-dev-server运行一个监听脚本，并允许Jest观察我的测试是否失败？

例如：我在想在package.json文件中添加以下代码：

"scripts": {
  "build": "NODE_ENV=production webpack -p --config webpack.config.js",
  "watch": "webpack-dev-server --progress --colors --hot --inline && npm run test",
  "test": "jest"
      }

显然，这不起作用。

下面是我的 package.json 文件和 webpack.config.js 文件。

package.json

{
"scripts": {
    "build": "NODE_ENV=production webpack -p --config webpack.config.js",
    "watch": "webpack-dev-server --progress --colors --hot --inline",
    "test": "jest"
  },
  "author": "Resultados Digitais",
  "license": "ISC",
  "jest": {
    "transform": {
      ".*": "./node_modules/babel-jest"
    },
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./__mocks__/fileMock.js",
      "\\.(css|less)$": "identity-obj-proxy"
    },
    "unmockedModulePathPatterns": [
      "node_modules/react/",
      "node_modules/enzyme/"
    ]
  }
  . . .
}

webpack.config.json

var path = require('path');
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: ['babel-polyfill', './src/js/index.jsx'],

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  module: {
    rules: [
      {
        enforce: "pre",
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
      },
      {
         test: /\.jsx?$/,
         exclude: [/node_modules/],
         use: [{
           loader: 'babel-loader',
           options: { presets: ['es2015', 'react', 'stage-0'] }
         }]
      },
      { 
        test: /\.css$/, 
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader'}
        ]
      },
      {
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader'},
          { loader: 'less-loader' },
        ]
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: {
          loader: 'url?limit=10000!img?progressive=true'
        }
      },
      { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' }
    ]
  },

  resolveLoader: { moduleExtensions: ["-loader"] },

  devtool: 'source-map',

  resolve: {
    extensions: ['*', '.js', '.jsx']
  },

  plugins: [
    new CopyWebpackPlugin([
      { from: './src/html' },
      { from: './src/img/favicon.ico', to: './img'}
    ])
  ],

  devServer: {
    inline: true,
    hot: true,
    contentBase: path.join(__dirname, 'dist'),
    port: 5000
  }
}

感激任何帮助。

- Pablo Darde

我认为应该有一个名为jest-loader的加载器，它使用webpack loader api，在发出资源之前运行jest，然后生成覆盖报告或发出错误。不幸的是，我找不到这样的加载器，也许你可以写一个。 - ifmos

2个回答

3

把package.json文件中的测试脚本从 "test": "jest" 改为 "test": "jest --watch"。

然后只需使用两个终端：在一个终端中运行npm run watch，在另一个终端中运行npm run test。

- o01

1

是的 - 在你的构建上放一个监视器和在你的测试上放一个监视器并不能真正起作用（但如果我错了，请有人纠正我！）。因此，在单独的终端中运行它们是有意义的。 - Sam Kenny

你可以尝试使用 --parallel（例如 npm-run-all --parallel build test），但你会发现 jest --watch 命令的输出会压制 build 命令的输出（也许这样做没问题）。 - Sam Kenny

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CharlieBrown · Accepted Answer

请将 npm-run-all 安装为开发依赖项，它允许您同时运行多个脚本。 https://www.npmjs.com/package/npm-run-all 例如，假设以下"start"和"test"脚本都能单独工作：

{
  "test": "jest --watch",
  "start": "webpack-dev-server --progress --colors --hot --inline",
  "dev": "npm-run-all --parallel test start"
}

你只需要在终端中输入npm run dev即可开始使用。