0

该问题的GitHub 存储库。

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

Vue 应用程序是使用 Vue CLI 3 (v3.4.0) 创建的。CLI 选项包括使用 Jest 进行单元测试。我完全是单元测试的新手。在导入 Vue 组件之前，我曾天真地尝试过模拟 @ 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"
  ]
};

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

4

2 回答 2

0

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

修复：使电容器与 commonjs 兼容

于 2019-06-21T22:40:09.410 回答
0

编辑

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

按照关于模拟 Node 模块（特别是作用域模块）的 Jest 文档，我__mocks__在根目录下创建了一个文件夹，在其下创建了一个名为的目录，@capacitor并在其下创建了一个名为core.js. 所以我最终得到了这样的结构：

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

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

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

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

于 2019-06-21T18:24:19.843 回答