Конфигурация Jest для юнит-тестирования с Quasar-Framework 0.15

У меня были Jest тесты, работающие под Quasar версии 0.14. В настоящее время некоторые простые тесты и все тесты моментальных снимков проходят, но для некоторых тестов я продолжаю получать: 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"
    ]
  },
Источник

2 ответа

Решение

У меня были такие же предупреждения (1 и 2). Для меня это было неправильно mount, Я использовал Vue's mount функция вместо того, что в @vue/test-utils, У меня нет объяснения, почему это работает сейчас, но это было для меня.

Источник

1. Проблема

Ваша третья ошибка произошла, потому что Джест не знает, что такое <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. Ссылка

Вышесказанное является общим решением и может использоваться не только с квазар-фреймворком. Вы можете оформить заказ следующего официального vue-test-util документы для получения дополнительной информации.

Источник
Другие вопросы по тегам