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

Posted 2023-02-22

【中文标题】如何同时观看运行 Jest 测试的 webpack-dev-server？

【英文标题】：How to watch webpack-dev-server running Jest tests at the same time?

【发布时间】：2017-12-18 17:54:35

【问题描述】：

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

感谢任何帮助。

【问题讨论】：

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

【参考方案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 开头即可开始使用。

【讨论】：

看起来使用起来很简单，但是，有没有什么方法可以在不安装这个包的情况下得到它呢？在此先感谢@CharlieBrown。

嗨@CharlieBrown，我测试了你的解决方案。它运行两个脚本，但不会一直关注我的代码更改。还是谢谢。

"test": "jest --watch"，如@o01所述

【参考方案2】：

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

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

【讨论】：

是的 - 将构建中的手表和测试中的手表结合起来并不会真正起作用（但如果我错了，请有人纠正我！）。所以在单独的终端中运行它们是有意义的。

您可以尝试使用 --parallel（例如 npm-run-all --parallel build test），但您会发现 jest --watch 的输出抑制了构建的输出（也许这很好）。