修复Jest jsdom test environment报错 配置跳过UI测试

基础信息 #

• 技术栈：Jest + Webpack，基于ES6 Modules规范开发
• 测试需求：仅校验JavaScript核心业务逻辑，不涉及UI层代码，期望Jest运行测试时自动跳过导入的UI相关文件，只执行目标测试文件内的函数逻辑校验
• 运行环境：Chromebook搭载Linux系统，开发工具为VS Code

故障表现 #

测试套件原本可正常运行，在主JS文件中新增DOM渲染文件导入语句import './display.js'后，所有测试运行时均弹出consider using the jsdom test environment报错；如果移除该导入语句，Jest会抛出文件解析失败错误，提示代码或依赖使用了非标准JavaScript语法，或Jest未配置对应语法支持。

已尝试无效方案 #

• 安装jsdom依赖，问题未解决
• 在package.json的Jest配置项中添加collectCoverageFrom: ['!src/display.js']规则排除display.js文件，配置未生效

相关代码与配置 #

1. 主文件导入代码 #

import './display.js';
import './style.css';
import {pubSub, ps} from './subscriptions.js';
import {Gameboard, tiles} from './gameboard.js'

2. package.json核心配置 #

{
  "name": "battleship",
  "jest": {
    "collectCoverageFrom": [
      "!src/display.js"
    ]
  },
  "version": "1.0.0",
  "scripts": {
    "test": "jest --coverage",
    "build": "webpack",
    "watch": "jest --watch *.js"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.18.6",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "jest": "^28.1.2",
    "jsdom": "^20.0.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  }
}

3. webpack.config配置 #

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
      index: './src/index.js',
      print: './src/print.js',
      display: './src/display.js',
      subscriptions: './src/subscriptions.js'
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: 'Battleship',
      }),
    ],
     output: {
      filename: '[name].bundle.js',
       path: path.resolve(__dirname, 'dist'),
       clean: true,
     },
     module: {
        rules: [
          {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader'],
          },
        ],
      },
   };

4. index.js测试用例代码 #

import {Ship, Players, playerBoats} from './index';

test('factory function returns object', () => {
    expect(Ship('Carrier', 5)).toMatchObject({
        boatName: 'Carrier',
        length: 5,
        hitSpot: [],
        sunk: false,
    });
})

test('when hit, factory function returns modified object', () => {
    expect(Ship('Destroyer', 2).isHit(1, playerBoats)).toMatchObject({
        boatName: 'Destroyer',
        coordinates: [],
        length: 2,
        hitSpot: [1],
        sunk: false,
    });
})

test('player can attack computer multiple times', () => {
    expect(Players().Player().playerAttack(4)).toMatchObject({
        boatName: 'Carrier',
        coordinates: [2, 3, 4],
        length: 5,
        hitSpot: [2, 4],
        sunk: false,
    })
})

内容的提问来源于stack exchange，提问作者itsaflamingo