删除Jest错误“考虑使用jsdom测试环境”

Question

上下文如下:我正在学习使用Jest进行单元测试。我目前的环境是与Webpack开玩笑，因为我正在使用ES6模块。在我当前的项目中，我只测试JavaScript逻辑，而不是UI。理想情况下，Jest将跳过导入的文件，只在当前文件中测试函数。测试套件正常工作，直到我将一个DOM呈现文件导入我的主JS文件(import './display.js')。我在运行的每个测试中都看到了这个错误。

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

如果不添加import './display.js'，则会得到以下错误: Jest解析文件失败。例如，当您的代码或其依赖项使用非标准的JavaScript语法时，或者当Jest未配置为支持此类语法时，就会发生这种情况。

我也尝试过安装jsdom，但是什么也没有发生。我还尝试将'./display.js‘添加到我的package.json中的一个排除文件列表中，但这也不起作用。我使用了: collectCoverageFrom：'!src/display.js‘

这是我的package.json：

{
  "name": "battleship",
  "jest": {
    "collectCoverageFrom": [
      "!src/display.js"
    ]
  },
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "jest --coverage",
    "build": "webpack",
    "watch": "jest --watch *.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/itsaflamingo/Battleship.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/itsaflamingo/Battleship/issues"
  },
  "homepage": "https://github.com/itsaflamingo/Battleship#readme",
  "devDependencies": {
    "@babel/preset-env": "^7.18.6",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "jest": "^28.1.2",
    "style-loader": "^3.3.1",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  },
  "dependencies": {
    "acorn": "^8.7.1",
    "acorn-import-assertions": "^1.8.0",
    "ajv": "^6.12.6",
    "ajv-keywords": "^3.5.2",
    "ansi-regex": "^5.0.1",
    "boolbase": "^1.0.0",
    "browserslist": "^4.21.1",
    "buffer-from": "^1.1.2",
    "camel-case": "^4.1.2",
    "caniuse-lite": "^1.0.30001361",
    "chrome-trace-event": "^1.0.3",
    "clean-css": "^5.3.0",
    "clone-deep": "^4.0.1",
    "colorette": "^2.0.19",
    "commander": "^2.20.3",
    "cross-spawn": "^7.0.3",
    "css-select": "^4.3.0",
    "css-what": "^6.1.0",
    "cssesc": "^3.0.0",
    "dom-converter": "^0.2.0",
    "dom-serializer": "^1.4.1",
    "domelementtype": "^2.3.0",
    "domhandler": "^4.3.1",
    "domutils": "^2.8.0",
    "dot-case": "^3.0.4",
    "electron-to-chromium": "^1.4.173",
    "enhanced-resolve": "^5.10.0",
    "entities": "^2.2.0",
    "envinfo": "^7.8.1",
    "es-module-lexer": "^0.9.3",
    "escalade": "^3.1.1",
    "eslint-scope": "^5.1.1",
    "esrecurse": "^4.3.0",
    "estraverse": "^4.3.0",
    "events": "^3.3.0",
    "fast-deep-equal": "^3.1.3",
    "fast-json-stable-stringify": "^2.1.0",
    "fastest-levenshtein": "^1.0.12",
    "find-up": "^4.1.0",
    "function-bind": "^1.1.1",
    "glob-to-regexp": "^0.4.1",
    "graceful-fs": "^4.2.10",
    "has": "^1.0.3",
    "has-flag": "^4.0.0",
    "he": "^1.2.0",
    "html-minifier-terser": "^6.1.0",
    "htmlparser2": "^6.1.0",
    "icss-utils": "^5.1.0",
    "import-local": "^3.1.0",
    "interpret": "^2.2.0",
    "is-core-module": "^2.9.0",
    "is-plain-object": "^2.0.4",
    "isexe": "^2.0.0",
    "isobject": "^3.0.1",
    "jest-worker": "^27.5.1",
    "jsdom": "^20.0.0",
    "json-parse-even-better-errors": "^2.3.1",
    "json-schema-traverse": "^0.4.1",
    "kind-of": "^6.0.3",
    "loader-runner": "^4.3.0",
    "locate-path": "^5.0.0",
    "lodash": "^4.17.21",
    "lower-case": "^2.0.2",
    "lru-cache": "^6.0.0",
    "merge-stream": "^2.0.0",
    "mime-db": "^1.52.0",
    "mime-types": "^2.1.35",
    "nanoid": "^3.3.4",
    "neo-async": "^2.6.2",
    "no-case": "^3.0.4",
    "node-releases": "^2.0.5",
    "nth-check": "^2.1.1",
    "p-limit": "^2.3.0",
    "p-locate": "^4.1.0",
    "p-try": "^2.2.0",
    "param-case": "^3.0.4",
    "pascal-case": "^3.1.2",
    "path-exists": "^4.0.0",
    "path-key": "^3.1.1",
    "path-parse": "^1.0.7",
    "picocolors": "^1.0.0",
    "pkg-dir": "^4.2.0",
    "postcss": "^8.4.14",
    "postcss-modules-extract-imports": "^3.0.0",
    "postcss-modules-local-by-default": "^4.0.0",
    "postcss-modules-scope": "^3.0.0",
    "postcss-modules-values": "^4.0.0",
    "postcss-selector-parser": "^6.0.10",
    "postcss-value-parser": "^4.2.0",
    "pretty-error": "^4.0.0",
    "punycode": "^2.1.1",
    "randombytes": "^2.1.0",
    "rechoir": "^0.7.1",
    "relateurl": "^0.2.7",
    "renderkid": "^3.0.0",
    "resolve": "^1.22.1",
    "resolve-cwd": "^3.0.0",
    "resolve-from": "^5.0.0",
    "safe-buffer": "^5.2.1",
    "schema-utils": "^3.1.1",
    "semver": "^7.3.7",
    "serialize-javascript": "^6.0.0",
    "shallow-clone": "^3.0.1",
    "shebang-command": "^2.0.0",
    "shebang-regex": "^3.0.0",
    "source-map": "^0.6.1",
    "source-map-js": "^1.0.2",
    "source-map-support": "^0.5.21",
    "strip-ansi": "^6.0.1",
    "supports-color": "^8.1.1",
    "supports-preserve-symlinks-flag": "^1.0.0",
    "tapable": "^2.2.1",
    "terser": "^5.14.1",
    "terser-webpack-plugin": "^5.3.3",
    "tslib": "^2.4.0",
    "update-browserslist-db": "^1.0.4",
    "uri-js": "^4.4.1",
    "util-deprecate": "^1.0.2",
    "utila": "^0.4.0",
    "watchpack": "^2.4.0",
    "webpack-merge": "^5.8.0",
    "webpack-sources": "^3.2.3",
    "which": "^2.0.2",
    "wildcard": "^2.0.0",
    "yallist": "^4.0.0"
  },
  "keywords": []
}

这是我的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'],
          },
        ],
      },
   };

这是我正在为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,
    })
})

我在Chromebook上运行Linux，并使用VS代码，我不确定这是否有区别。我只想能够跳过Jest的UI测试。

Answer 1

当我为这件事挣扎了一段时间后回来回答。我的问题是，我没有分离我的UI和逻辑，jest不接受DOM方法或选择器，除非指定。