使用 Quasar-Framework 0.15 的 Jest 单元测试配置

Posted

技术标签:

【中文标题】使用 Quasar-Framework 0.15 的 Jest 单元测试配置【英文标题】:Jest unit testing config with Quasar-Framework 0.15 【发布时间】:2018-09-11 23:41:22 【问题描述】:

我在 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/$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"
    ]
  ,

【问题讨论】:

【参考方案1】:

1。问题

您的第三个错误发生是因为 Jest 不知道 &lt;q-page-sticky&gt; 是什么。你必须明确告诉它。

[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 文档了解更多信息。

Using with Vue Router Using with Vuex

【讨论】:

【参考方案2】:

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

【讨论】:

直到现在我才注意到我的问题中的第 3 点尚未得到回答......,所以任何人都可以将其添加到答案中?

以上是关于使用 Quasar-Framework 0.15 的 Jest 单元测试配置的主要内容,如果未能解决你的问题,请参考以下文章

我想在 python 中使用 while 循环创建简单列表 [0, 0.05, 0.10, 0.15,.....,1.00]

Android 开发学习进程0.15 adb

使用 MSVC 2015 编译 GRPC 0.15 以在 Windows 上与 Qt 5.6 一起使用

Druid 0.15 版本启动错误

mysql8.0.15出错

升级到 scikit 0.15 时导入错误,numpy 警告