Javascript Jest单元测试配置与Quasar Framework 0.15

我在Quasar版本0.14下进行了一些玩笑测试。目前，一些简单测试和所有快照测试都通过了，但对于一些测试，我不断得到： 一,

和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.

在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"
    ]
  },

“开玩笑”：{
“测试匹配”：[
“/src/***/？（*）（spec.js？（x）”
],
“testPathIgnorePatterns”：[
“/src/e2e/”
],
“moduleNameMapper”：{
“src/components/（[^\\.]*）.vue$”：“/src/components/$1.vue”，
“src/components/（[^\\.]*）$”：“/src/components/$1.js”，
“^vue$”：“vue/dist/vue.common.js”，
“src/（[^\\.]*）$”：“/src/$1.js”，
“src/（[^\\.]*）.vue$”：“/src/$1.vue”，
“（.*）/（.*）.vue$”：“$1/$2.vue”，
“（.*）/（.*）/（.*）.vue$”：“$1/$2/$3.vue”
},
“moduleFileExtensions”：[
“js”，
“json”，
“vue”
],
“CollectionCoverage from”：[
“***.{vue}”
],
“coverage目录”：“/src/components/coverage”，
“transformIgnorePatterns”：[
“节点模块/核心js”，
“节点\模块/babel运行时”，
“节点_模块/lodash”，
“节点单元模块/vue”
],
“转变”：{
“^.+\.js$”：“/node\u modules/babel jest”，
“*\ \（vue）$”：“/node\u模块/vue笑话”
},
“快照序列化程序”：[
“/node\u模块/jest序列化程序vue”
]
},

我收到了相同的警告（1和2）。对我来说，它使用了错误的

挂载

。我使用了Vue的

mount

函数，而不是中的函数。我不知道为什么它现在能工作，但我就是这么想的。

1。问题 发生第三个错误是因为Jest不知道什么是

。你必须明确地说出来

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

3.参考 以上是一个普遍的解决方案，不仅适用于类星体框架。有关详细信息，您可以查看以下官方

vue test util

文档

---

现在我注意到我问题中的第3点尚未得到回答…，所以任何人都可以将此添加到答案中？

  "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"
    ]
  },

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

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