使用 Ionic Capacitor 插件导入 Jest 测试 Vue 单文件组件

Question

我正在使用 Vue 和 Capacitor 构建一个 Ionic 应用程序。我正在使用 vue-test-utils + Jest 设置单元测试。 Jest 单元测试未能尝试将 Capacitor 插件导入 Vue 单文件组件。

Vue 应用程序是使用 Vue CLI 3 (v3.4.0) 创建的。 CLI 选项包括使用 Jest 的单元测试。我完全是单元测试的新手。在导入 Vue 组件之前，我天真地尝试了 mocking @capacitor/core 模块；这没有帮助。

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/"
  },
  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 做一些不同的事情，我不知道我是否应该像我在某些 examples 中看到的那样直接在 Vue SFC 中导入 Capacitor 插件，或者... ‍♂️.

Answer 1

编辑

虽然这使测试通过了，但将 @capacitor/core 软件包升级到 v1.1.0（几小时前刚刚发布）也解决了这个问题。

按照 mocking Node modules 上的 Jest 文档 - 特定范围的模块 - 我在根目录下创建了一个 __mocks__ 文件夹，在其下创建了一个名为 @capacitor 的目录并在调用了 core.js。所以我最终得到了这样的结构：

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

在 core.js 中，我导出了由我正在测试的 Vue 组件导入的部分（目前只有 Plugins 和 Plugins.Filesystem）：

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

有了这些，Jest 测试就以飞扬的绿色通过了。

Answer 2

根据@jcesarmobile 对 OP 的评论，将@capacitor/core 从版本 1.0.0 更新到 1.1.0 完全解决了这个问题。

Fix: make capacitor compatible with commonjs

使用 Ionic Capacitor 插件导入 Jest 测试 Vue 单文件组件

Jest testing Vue Single File Components with Ionic Capacitor plugin imports

ionic-framework

vue.js

jestjs

vue-test-utils

capacitor