Question

我正在使用Vue和Capacitor构建Ionic应用程序。我正在使用vue-test-utils + Jest设置单元测试。开玩笑的单元测试无法尝试将电容器插件导入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/$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尝试在spec文件的第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中导入电容器插件，或者... ?‍♂️。

Answer 1

EDIT

尽管这已经过去了，但将@ 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

开玩笑用离子电容器插件导入测试Vue单个文件组件

2 个答案: