Jest 单元测试配置与 Quasar-Framework 0.15
Jest unit testing config with Quasar-Framework 0.15
我在 Quasar 版本 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 存储有关。
任何建议/最佳实践如何让它工作?我跟随 this,并进行了以下设置:
.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/.vue",
"src/components/([^\.]*)$": "<rootDir>/src/components/.js",
"^vue$": "vue/dist/vue.common.js",
"src/([^\.]*)$": "<rootDir>/src/.js",
"src/([^\.]*).vue$": "<rootDir>/src/.vue",
"(.*)/(.*).vue$": "/.vue",
"(.*)/(.*)/(.*).vue$": "//.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"
]
},
我收到了相同的警告(1 和 2)。对我来说,它使用了错误的 mount
。我使用了 Vue 的 mount
函数而不是 @vue/test-utils
中的函数。我不知道为什么它现在可以工作,但对我来说就是这样。
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-router' 是什么一样简单。您可能已经对此很熟悉了。唯一不同的是我们这里要在测试环境中使用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。参考
以上是一个通用的解决方案,不仅仅适用于Quasar框架。您可以查看以下官方 vue-test-util
文档以获取更多信息。
我在 Quasar 版本 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 存储有关。
任何建议/最佳实践如何让它工作?我跟随 this,并进行了以下设置: .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/.vue",
"src/components/([^\.]*)$": "<rootDir>/src/components/.js",
"^vue$": "vue/dist/vue.common.js",
"src/([^\.]*)$": "<rootDir>/src/.js",
"src/([^\.]*).vue$": "<rootDir>/src/.vue",
"(.*)/(.*).vue$": "/.vue",
"(.*)/(.*)/(.*).vue$": "//.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"
]
},
我收到了相同的警告(1 和 2)。对我来说,它使用了错误的 mount
。我使用了 Vue 的 mount
函数而不是 @vue/test-utils
中的函数。我不知道为什么它现在可以工作,但对我来说就是这样。
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-router' 是什么一样简单。您可能已经对此很熟悉了。唯一不同的是我们这里要在测试环境中使用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。参考
以上是一个通用的解决方案,不仅仅适用于Quasar框架。您可以查看以下官方 vue-test-util
文档以获取更多信息。