使用类星体框架0.15的Jest单元测试配置

Question

我在类星体版本0.14下进行了Jest测试。目前，一些简单的测试和所有快照测试都通过了，但是对于一些测试，我一直得到: 1。

console.error node_modules/vue/dist/vue.common.js:593
      [Vue warn]: Error in config.errorHandler: "TypeError: Cannot read property 'form' of undefined"

和2：

console.error node_modules/vue/dist/vue.common.js:1743
      TypeError: Cannot read property 'getters' of undefined

和3：

console.error node_modules/vue/dist/vue.common.js:593
  [Vue warn]: Unknown custom element: <q-page-sticky> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

1和2似乎与Jest不识别组件中的$v.form和vuex存储有关。

有什么建议/最佳实践，如何使这一工作？我遵循了这，并具有以下设置：.babelrc：

{
  "presets": [
    [ "env", {"modules": false} ],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "presets": [
        [
          "env",
          {
            "targets": {
              "node": "current"
            }
          }
        ]
      ],
      "plugins": [
        [
          "module-resolver",
          {
            "root": [
              "./src"
            ],
            "alias": {
              "quasar": "quasar-framework/dist/quasar.mat.esm.js",
              "^vue$": "vue/dist/vue.common.js"
            }
          }
        ]
      ]
    }
  }
}

在package.json内部：

  "jest": {
    "testMatch": [
      "<rootDir>/src/**/?(*.)(spec).js?(x)"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>/src/e2e/"
    ],
    "moduleNameMapper": {
      "src/components/([^\\.]*).vue$": "<rootDir>/src/components/$1.vue",
      "src/components/([^\\.]*)$": "<rootDir>/src/components/$1.js",
      "^vue$": "vue/dist/vue.common.js",
      "src/([^\\.]*)$": "<rootDir>/src/$1.js",
      "src/([^\\.]*).vue$": "<rootDir>/src/$1.vue",
      "(.*)/(.*).vue$": "$1/$2.vue",
      "(.*)/(.*)/(.*).vue$": "$1/$2/$3.vue"
    },
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "collectCoverageFrom": [
      "**/*.{vue}"
    ],
    "coverageDirectory": "<rootDir>/src/components/coverage",
    "transformIgnorePatterns": [
      "node_modules/core-js",
      "node_modules/babel-runtime",
      "node_modules/lodash",
      "node_modules/vue"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    },
    "snapshotSerializers": [
      "<rootDir>/node_modules/jest-serializer-vue"
    ]
  },

Answer 1

我有同样的警告(1和2)。对我来说，它使用了错误的mount。我使用的是Vue的mount函数，而不是@vue/test-utils中的函数。我不知道为什么现在起作用了，但对我来说是这样的。

Answer 2

1.问题

第三个错误发生是因为Jest不知道<q-page-sticky>是什么。你得直截了当地说出来。

[Vue warn]: Unknown custom element: <q-page-sticky> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

2.解决办法

它就像告诉Vue 'Vuex‘是什么，或者什么是’vue-路由器‘一样简单。你可能已经对此很熟悉了。唯一的区别是我们必须在测试环境中使用localVue。

import { shallowMount, createLocalVue } from "@vue/test-utils";
import MyComponent from "@/components/MyComponent";

// I see that you already alias "quasar" in your .babelrc,
// otherwise replace "quasar" with "quasar-framework/dist/quasar.mat.esm.js"
import Quasar, { q-page-sticky } from "quasar";
// or if you are using a lot of Quasar components then do
// import Quasar, * as All from "quasar";

describe("Something Something", () => {
  const localVue = createLocalVue();
  localVue.use(Quasar, { components: ["q-page-sticky"]});
  // or if you are using a lot of Quasar components then do
  // localVue.use(Quasar, { components: All, directives: All, plugins: All });  

  const wrapper = shallowMount(MyComponent, {
    localVue,
  });

  it("works", () => {
    expect(wrapper.isVueInstance()).toBe(true);
  });
})

3.参考资料

以上是一个通用的解决方案，不仅适用于类星体框架。您可以查看以下官方vue-test-util文档以获得更多信息。

• 与Vue路由器一起使用
• 与Vuex一起使用