当前位置： 文江博客话题详情

删除开玩笑的错误，请考虑使用JSDOM测试环境”。

发布于 2025-02-13 23:23:09 字数 6769 浏览 0 评论 0原文

上下文如下：我正在学习开玩笑的学习单元测试。当我使用ES6模块时，我目前的环境是与WebPack开玩笑。在我当前的项目中，我只是测试JavaScript逻辑，而不是UI。理想情况下，Jest会跳过我的导入文件，并且仅在当前文件中的测试功能。测试套件一直按预期工作，直到我将DOM渲染文件导入到我的主JS文件（导入'./display.js'）中。我在每次运行的测试中都会看到此错误。

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

如果我不添加导入'./display.js'，我会得到此错误： 开玩笑未能解析文件。例如，当您的代码或其依赖项使用非标准JavaScript语法或不配置为支持此类语法时，这会发生这种情况。

我也尝试安装JSDOM，但什么也没有发生。 我还尝试在我的package.json中的一个排除文件列表中添加'./display.js'，但这也没有用。 我用过： collectCoverCoverageFrom：['！src/display.js']

是我的

{
  "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": []
}

。

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'],
          },
        ],
      },
   };

这

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,
    })
})

软件包 我不确定这是否有所作为。我只想能够跳过开玩笑的​​UI测试。

原文

the context is the following: I am learning unit testing using Jest. My current enviroment is Jest with Webpack as I am using ES6 Modules. In my current project, I'm only testing JavaScript logic, not the UI. Ideally, Jest would skip over my imported files and only test functions in my current file. The test suite was working as expected, until I imported a DOM rendering file into my main JS file (import './display.js'). I see this error in every test I run.

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

If I don't add import './display.js', I get this error:
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

I did try installing jsdom as well, but nothing happens.
I also tried adding './display.js' to an excluded files list in my package.json, but that didn't work either.
I used:
collectCoverageFrom: ['!src/display.js']

This is my 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": []
}

This is my 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'],
          },
        ],
      },
   };

This is the test I am running for 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,
    })
})

I am running Linux on Chromebook and using VS Code, I'm not sure if that makes a difference. I just want to be able to skip UI tests with Jest.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

日暮斜阳 2025-02-20 23:23:10

当我为此挣扎一段时间时，回到回答。我的问题是我没有分开我的UI和逻辑，除非指定，否则JEST不接受DOM方法或选择器。

Came back to answer as I struggled with this for a while. My issue was that I was not separating my UI and logic, and jest does not accept DOM methods or selectors unless specified.

回复 原文
~没有更多了~

关于作者

箜明

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

夢野间

文章 0 评论 0

百度③文鱼

文章 0 评论 0

小草泠泠

文章 0 评论 0

zhuwenyan

文章 0 评论 0

weirdo

文章 0 评论 0

坚持沉默

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文