用离子电容插件导入Jest测试Vue单文件组件

Question

GitHub回购的问题。

我正在用Vue和Capacitor开发一个Ionic应用程序。我正在使用vue-test-utils + Jest设置单元测试。Jest单元测试无法将电容插件导入Vue单个文件组件。

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行中未定义，因此，当它试图从第36行构造Filesystem时，第37行会发出抱怨。

然而，在浏览器中，Filesystem对象如下：

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

我不知道问题在哪里。我不知道我是否应该对Jest做一些不同的事情，我不知道我是否不应该像我在某些示例或者.‍♂️中看到的那样，直接在Vue SFCs中导入电容插件。

Answer 1

Per @jcesarmobile对OP的评论，将@电容器/核心的版本从1.0.0升级到1.1.0，完全解决了这个问题。

修正:使电容器与普通产品兼容。

Answer 2

编辑

尽管这使得测试通过了，但是将@电容/核心包升级到v1.1.0 (几个小时前刚刚发布)也解决了这个问题。

在模拟节点模块上的Jest文档之后--特别是作用域模块--我在根目录下创建了一个__mocks__文件夹，在它下面创建了一个名为@capacitor的目录，并在名为core.js的目录下创建了一个文件。所以我最终得到了这样的结构：

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

在core.js内部，我导出由我正在测试的Vue组件导入的部分(目前只有Plugins和Plugins.Filesystem)：

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

有了这些地方，Jest考试通过了飞黄腾达的绿色。