使用 Mocha 的 VueX 单元测试每次第一次运行都会失败答案

【问题标题】：VueX Unit Tests with Mocha fail every first run使用 Mocha 的 VueX 单元测试每次第一次运行都会失败
【发布时间】：2021-09-28 13:38:55
【问题描述】：

我是 VueJS 和 Vuex 的新手，但有点用谷歌搜索。现在，经过大量的挖掘和尝试，我用 mocha 实现了第一个单元测试。它工作正常，但是：

当我运行 npm run test 时，它首先失败。如果我再次运行相同的命令，而不做任何更改，它就像一个魅力。

现在这是我的代码：

package.json

    "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service test:unit"
  },
  "dependencies": {
    "@capacitor/android": "^2.4.6",
    "@capacitor/cli": "^2.4.6",
    "@capacitor/core": "^2.4.6",
    "chai": "^4.3.4",
    "core-js": "^3.6.5",
    "mocha": "^9.1.2",
    "mustache": "^4.1.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-unit-mocha": "^4.5.13",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/test-utils": "^1.0.0-beta.10",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "esm": "^3.2.25",
    "node-sass": "^5.0.0",
    "sass-loader": "10.1.1"
  },

/tests/unit/test.spec.js

import { expect } from "chai";
import STORE from '/src/components/user/store';

let to      = (promise) => {
       return promise.then(([err, data]) => {
          return [err, data];
       })
       .catch(err => [err]);
    };

// ## GETTERS
describe('getters', () => {
  it('USER', () => {
    // mock state
    const state = { 
      currentUser: {
        testy: 4
      }
    };
    // assert result
    expect(STORE.getters.user(state).testy).to.equal(4)
  })
})

以下是我 bash 的日志： 第一次（失败）测试

$ npm run test

> testy@0.1.0 test C:\...
> vue-cli-service test:unit

 WEBPACK  Compiling...

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
 ERROR  Failed to compile with 1 error

 error  in ./tests/unit/test.spec.js

Module Error (from ./node_modules/eslint-loader/index.js):

C:\...\tests\unit\test.spec.js
   4:5  error  'to' is assigned a value but never used  no-unused-vars
  12:1  error  'describe' is not defined                no-undef
  13:3  error  'it' is not defined                      no-undef

✖ 3 problems (3 errors, 0 warnings)


 @ ./node_modules/mochapack/lib/entry.js 7:0-51

 WEBPACK  Failed to compile with 1 error(s)

Error in ./tests/unit/test.spec.js

  Module Error (from ./node_modules/eslint-loader/index.js):

  C:\...t\tests\unit\test.spec.js
     4:5  error  'to' is assigned a value but never used  no-unused-vars
    12:1  error  'describe' is not defined                no-undef
    13:3  error  'it' is not defined                      no-undef

  ✖ 3 problems (3 errors, 0 warnings)

 ERROR  mochapack exited with code 1.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! testy@0.1.0 test: `vue-cli-service test:unit`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the noir_client@0.1.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\...debug.log

第二次测试

$ npm run test

> testy@0.1.0 test C:\...
> vue-cli-service test:unit

 WEBPACK  Compiling...

 DONE  Compiled successfully in 437ms

 WEBPACK  Compiled successfully in 437ms

 MOCHA  Testing...



  getters
    √ USER


  1 passing (3ms)

 MOCHA  Tests completed successfully

抱歉格式错误，先在这里发帖 :)

【问题讨论】：

标签： vue.js unit-testing mocha.js vuex vuejs3

【解决方案1】：

我希望您已经找到了解决这个问题的方法，但是当我遇到同样的问题时，我正在分享我的解决方案。在您的 package.json 文件中，您可以通过添加来编辑您的 eslintConfig 部分：

"overrides": [
  {
    "env": {
      "mocha": true
    },
    "files": [
      "**/src/**/*.spec.{j,t}s?(x)"
    ]
  }

注意属性的排序。 “Env”排在第一位。希望对您有所帮助；）

【讨论】：