Jest тестирование Vue Single File Components с импортом плагинов Ionic Capacitor - PullRequest
Новая
       27

Jest тестирование Vue Single File Components с импортом плагинов Ionic Capacitor

0 голосов
/ 21 июня 2019

GitHub репо выпуска.

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

Приложение Vue было создано с использованием Vue CLI 3 (v3.4.0). Опции CLI включали модульное тестирование с использованием Jest. Я новичок в модульном тестировании вообще. Я наивно пытался высмеивать модуль @ конденсатор / ядро ​​до импорта компонента 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 напрямую в Vue SFC, как я видел в некоторых примерах или. ..?♂️.

Ответы [ 2 ]

0 голосов
/ 22 июня 2019

Комментарий @ jcesarmobile к OP, обновление @ конденсатора / ядра с версии 1.0.0 до 1.1.0 полностью решило проблему.

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

0 голосов
/ 21 июня 2019

РЕДАКТИРОВАТЬ

Несмотря на то, что это прошло испытание, обновление пакета @ конденсатор / ядро ​​до v1.1.0 (выпущено несколько часов назад) решило проблему,тоже.

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

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

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

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

С установленными испытаниями Jest пройдут летающие зеленые цвета.

...