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

Question

我正在使用 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
  }
}

感谢任何帮助。

Answer 1

将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 test start"
}

您只需在终端上以 npm run dev 开头即可开始使用。

Answer 2

将package.json 中的测试脚本从"test": "jest" 更改为"test": "jest --watch"。

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