Vue，Jest：如何模拟 element-ui 组件？找不到模块 element.css

Question

我的 vue 代码调用 element-ui 个模块：

// in main.js
import { Notification } from "element-ui";

起初，我的测试是投掷

Cannot find module 'Element' from 'test.js'

所以我用

模拟了模块

jest.mock('element-ui', () => ({
  Element: jest.fn(),
}))

然而它仍然出错

Cannot find module 'element-ui/lib/theme-default/element.css' from 'test.js'

我不知道如何通过这个。

有什么想法吗？谢谢。

如果我在 test.js 中导入 element-ui 组件：

ReferenceError: document is not defined

      at Object.<anonymous> (node_modules/element-ui/lib/utils/dom.js:22:39)
      at Object.<anonymous> (node_modules/element-ui/lib/utils/popup/popup-manager.js:9:12)
      at Object.<anonymous> (node_modules/element-ui/lib/utils/popup/index.js:14:21)

(Jest 21.2, vue-test-utils 1.0.0)

Answer 1

这有帮助：https://github.com/eddyerburgh/vue-hackernews/

我现在在 main.js 中导入所有 element-ui 相关组件，并且我模拟调用其组件之一的每个方法：

beforeEach(() => {
    // Mock this method that calls a Notification element-ui component.
    vm.notifyWarning = jest.fn();
  })

Answer 2

我所做的是在每个测试文件之前注册所有 Element-UI 组件。

jest.config.js (https://jestjs.io/docs/en/configuration#setupfiles-array)

module.exports = { ..., setupFiles: ['./jest/eachTest.js'], ... }

eachTest.js

import Vue from 'vue' import Element from 'element-ui' Vue.use(Element, {})

Vue，Jest：如何模拟 element-ui 组件？找不到模块 element.css

Vue, Jest: how to mock element-ui components ? cannot find module element.css

vue.js

jestjs

vue-test-utils