Jest-тестирование однофайловых компонентов Vue с импортом плагина Ionic Capacitor

GitHub repo с описанием проблемы.

Я создаю приложение Ionic, используя Vue и Capacitor. Я настраиваю модульные тесты с помощью vue-test-utils + Jest. Модульные тесты Jest не могут импортировать плагины Capacitor в однофайловые компоненты Vue.

Приложение Vue было создано с использованием Vue CLI 3 (v3.4.0). Опции интерфейса командной строки включали модульное тестирование с использованием Jest. Я вообще новичок в модульном тестировании. Я наивно пробовал издеваться над над модулем @campitor / core до импорт компонента Vue; это не помогло.

jest.config.js (по умолчанию Vue CLI)

module.exports = {
  moduleFileExtensions: ["js", "jsx", "json", "vue"],
  transform: {
    "^.+\\.vue$": "vue-jest",
    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
      "jest-transform-stub",
    "^.+\\.jsx?$": "babel-jest"
  },
  transformIgnorePatterns: ["/node_modules/"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1"
  },
  snapshotSerializers: ["jest-serializer-vue"],
  testMatch: [
    "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
  ],
  testURL: "http://localhost/",
  watchPlugins: [
    "jest-watch-typeahead/filename",
    "jest-watch-typeahead/testname"
  ]
};

MyComponent.vue

<template>...</template>
<script>
import { Plugins } from '@capacitor/core'
const { Filesystem } = Plugins
...
</script>

MyComponent.spec.js

import { shallowMount } from "@vue/test-utils";
import Component from "@/components/MyComponent.vue";
...

Я ожидаю, что тест пройдет без проблем. Вместо этого я получаю следующее сообщение об ошибке, когда Jest пытается импортировать компонент в строке 2 файла спецификации:

TypeError: Cannot destructure property `Filesystem` of 'undefined' or 'null'.

      35 | <script>
      36 | import { Plugins } from '@capacitor/core'
    > 37 | const { Filesystem } = Plugins

Plugins не определен в строке 36, поэтому строка 37 жалуется, когда пытается деструктурировать Filesystem из нее.

Однако в браузере объект Filesystem выглядит следующим образом:

{
  "config": {
     "name": "Filesystem",
     "platforms": ["web"]
  },
  "loaded": false,
  "listeners": {}, 
  "windowListeners":{},
  "DEFAULT_DIRECTORY": "DATA",
  "DB_VERSION": 1,
  "DB_NAME": "Disc",
  "_writeCmds": ["add","put","delete"]
}

Я не знаю, в чем проблема. Я не знаю, следует ли мне делать что-то другое с Jest, я не знаю, не следует ли мне импортировать плагины Capacitor непосредственно в SFC Vue, как я видел в некоторых examples или ... ????‍♂️.


ionic-framework jestjs vue.js capacitor vue-test-utils
person Caleb Bergman    schedule 21.06.2019    source источник
comment
попробуйте обновить конденсатор до 1.1.0, он был выпущен несколько часов назад и включал исправление, связанное с Jest   -  person jcesarmobile    schedule 22.06.2019
comment
Ага, это ... это сделало ???? Спасибо   -  person Caleb Bergman    schedule 22.06.2019

Ответы (2)


arrow_upward
0
arrow_downward

ИЗМЕНИТЬ

Несмотря на то, что тест прошел в прошлом, обновление пакета @capitor / core до версии 1.1.0 (выпущенной всего несколько часов назад) также решило проблему.

Следуя документации Jest по имитирующим модулям узлов - модулям с определенной областью видимости - Я создал папку __mocks__ в корневом каталоге, создал под ней каталог с именем @capacitor и создал файл под с именем core.js. В итоге я получил такую ​​структуру:

.
├─__mocks__
│ └─ @capacitor
│    └─ core.js

Внутри core.js я экспортирую части, которые импортированы тестируемыми мной компонентами Vue (в настоящее время только Plugins и Plugins.Filesystem):

// core.js
module.exports = {
  Plugins: {
    Filesystem: {}
  }
}

Когда они установлены, тест Jest проходит с зеленым цветом.

person Caleb Bergman    schedule 21.06.2019

arrow_upward
0
arrow_downward

Согласно комментарию @ jcesarmobile к OP, обновление @ Capacitor / core с версии 1.0.0 до 1.1.0 полностью решило проблему.

Исправлено: сделайте конденсатор совместимым с commonjs

person Caleb Bergman    schedule 21.06.2019