vue.js - 如何解决单元测试中ElementUI未知元素警告？

Question

我正在使用 <el-buton> 测试组件来自元素加

我没有直接使用，<el-button>位于我的 Connect 组件内部

import { shallowMount } from '@vue/test-utils'
import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from '@/components/connect'

const store = createStore({
  state() {
    return {
      user: {},
    }
  },
  mutations: {},
})

let wrapper
const app = createApp(App)
app.use(store)

beforeEach(() => {
  wrapper = shallowMount(App, {
    propsData: {},
    global: {
      plugins: [store],
    },
   
  })
})

我在组件的所有测试中收到此警告:

If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

也在github上询问:https://github.com/element-plus/element-plus/issues/5830

Answer 1

我不知道你所说的“我不直接使用”是什么意思，但是警告告诉你 Jest 在浅安装期间遍历组件的 DOM 时发现了这个标签，并且它没有不知道如何解决它，因为它既不是 native DOM 标记，也不是已知组件。

重要说明:Jest 在浅安装时 stub 子组件这一事实并不意味着它无法解析它们。

1. 如果<el-button>与当前测试无关，只需忽略此警告。
   开 Jest :“但我不知道 <el-button> 是什么!”
   你:“没关系，你不需要。”
2. 如果<el-button>与测试无关，但警告让您烦恼，要么声明 <el-button>一个 Web 组件(这是错误的，但它告诉 Jest 忽略它)，按照警告中显示的链接和说明进行操作；或在此测试套件中手动 stub (将其替换为空 <div /> ):

import { config } from '@vue/test-utils'

config.stubs['el-button'] = '<div />'

如果<el-button>与当前测试相关，您必须将 ElementUI 添加到包装器实例的全局变量中。
这将使您的包装器知道 ElementUI 的每个组件和指令是什么。这并不意味着他们不会被打倒。它们会的，但 Jest 会知道它正在 stub 什么，最重要的是，它将解决它们的依赖关系:

import ElementUI from 'element-ui';

beforeEach(() => {
  wrapper = shallowMount(App, {
    propsData: {},
    global: {
      plugins: [store, ElementUI],
    },
  });
});

事实上，这是提供它们的正确方法，因为当您使用 app.use(SomePlugin) 将它们安装在根实例上时，这就是将它们提供给实际应用程序中的实例的方式。 .

---

您应该对应用程序中使用的所有其他插件执行此操作。如果它变得过于重复，请创建一个辅助函数，将当前测试的组件及其设置作为参数传递，返回 wrapper它具有您的应用程序的所有功能。

一些纯粹主义者可能会说:“但我不想使用所有全局插件来测试我的组件，我只想使用它使用的插件来测试它。”
恕我直言，这是错误的。即使组件只使用一些全局提供的插件，它也会在提供所有插件的上下文中运行(实时)。因此，如果某些全局插件和当前组件之间存在任何冲突，您可能想从这个测试中了解它，而不是从 github 问题中了解。

通用包装工厂示例:

import { shallowMount, mount } from '@vue/test-utils'
import SomePlugin from 'some-library';
import SomeOtherPlugin from 'some-other-library';
import { createStore } from 'vuex'

export const useWrapper = (component, setup, shallow = true) => {
  const store = createStore({ /* ... */ });
  return (shallow ? shallowMount : mount)(component, {
    globals: {
      plugins: [SomePlugin, SomeOtherPlugin, store]
    },
    ...setup,
  })
}

注意这甚至允许您覆盖 globals ，通过setup ，如果您愿意的话，但是，恕我直言，由于上述原因，这不是一个好主意。

现在您可以导入 useWrapper在您的所有测试中，这些测试更加无样板:

import { useWrapper } from '../path-to-helpers';
import SomeComponent from '@/components/SomeComponent.vue'

//...
describe('SomeComponent', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = useWrapper(SomeComponent, {
      propsData: {} // extend as needed
    });
  });

  it('should do stuff...', () => {
    // expect it does stuff...
  })
});

当您需要mount时而不是shallowMount ，通过false作为 useWrapper 的第三个参数.