如何使用 jest 和 eslint 在 vue.js 中定义 describe()、it() 和 expect()？答案

【问题标题】：How to define describe(), it() and expect() in a vue.js using jest & eslint?如何使用 jest 和 eslint 在 vue.js 中定义 describe()、it() 和 expect()？
【发布时间】：2021-12-30 18:01:06
【问题描述】：

在这种情况下如何定义describe()、it()和expect()？？我得到： No files found in C:\Users\tarek\Dogalu\dogalu_frontend_v2. Make sure Jest's configuration does not exclude this directory. To set up Jest, make sure a package.json file exists. Jest Documentation: facebook.github.io/jest/docs/configuration.html Files: "C:\Users\tarek\Dogalu\dogalu_frontend_v2\tests\unit\Gridcard.test.js"

[

这是我的 Jest 测试，但我只得到未定义的函数。我几乎尝试了所有东西，包括 npm install --g eslint npm install --g jest

这是我的.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]

}

这是我的package.json

  "name": "dogalu_frontend_v2",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": "16.x",
    "npm": "8.x"
  },
  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@pixi/filter-kawase-blur": "^4.1.5",
    "bootstrap": "^5.1.3",
    "bootstrap-icons": "^1.7.2",
    "boxicons": "^2.1.1",
    "core-js": "^3.6.5",
    "debounce": "^1.2.1",
    "hsl-to-hex": "^1.0.0",
    "pixi.js": "^6.2.0",
    "simplex-noise": "^3.0.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vue/test-utils": "^2.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^7.0.0",
    "jest": "^25.5.4",
    "jest-fetch-mock": "^3.0.3",
    "supertest": "^6.1.6",
    "typescript": "~3.9.3",
    "vue-jest": "^5.0.0-0"
  }
}

那么我该如何定义 describe()、it() 和 expect() ？并提前感谢

【问题讨论】：

标签： javascript vue.js jestjs eslint jest-fetch-mock

【解决方案1】：

解决方案是为类命名 Gridcard.spec.js 而不是 Gridcard.test.js

【讨论】：

这个解决方案没有意义。类名不允许使用点。问题中没有显示任何课程。这看起来更像是一个文件名，但之前和之后的唯一区别是文件名后面附加了一个空格，这对文件系统也应该没有影响。
看起来是 .test.js 的意思，不是吗？
@EstusFlask @tony19 确切地说是Gridcard.spec.js 而不是Gridcard.test.js
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。