Vue测试astrouxds web component遇未知组件警告及断言失败如何解决

1. 修复「Unknown custom element」警告 #

该警告的原因是rux-开头的组件属于标准Web Components，并非Vue组件，不需要使用Vue.component注册，只需要告诉Vue忽略对应前缀的自定义元素即可。
因为你使用了createLocalVue创建了隔离的Vue测试实例，只需在beforeEach钩子中给localVue添加如下配置：

localVue.config.ignoredElements = [/^rux-/]

2. 修复Web Component属性断言失败问题 #

wrapper.find()返回的是Vue Test Utils的包装器对象，本身不携带自定义元素的DOM属性，你需要先通过.element属性拿到原生DOM节点，再读取对应属性即可。
把测试用例中的取值逻辑修改为：

const result = wrapper.find('#app-toggle').element.checked;

如果遇到属性更新不及时的场景，可以在取值前添加await wrapper.vm.$nextTick()，确保DOM已经完成更新。 #

为什么你之前尝试的方案无效 #

• 切换shallowMount/mount：这两个方法只会影响Vue组件的渲染逻辑，对原生Web Components无影响，也无法解决标签识别问题
• 用Vue.component注册：Web Components不是Vue组件，用Vue的组件注册逻辑无法识别
• 关闭productionTip：该配置只影响生产环境启动提示，和自定义元素识别、属性读取完全无关

修改后完整测试代码 #

import Vuex from 'vuex';
import {createLocalVue, mount} from '@vue/test-utils';
import storeConfig from '@/store'
import App from '@/App'

describe("App", () => {
  let localVue;
  let store;
  let wrapper;

  beforeEach(() => {
    localVue = createLocalVue();
    // 忽略rux开头的自定义元素，消除警告
    localVue.config.ignoredElements = [/^rux-/]
    localVue.use(Vuex);
    store = new Vuex.Store(storeConfig);
    wrapper = mount(App, {store, localVue});
  });

  it("test toggle default", () => {
    // 先获取原生DOM节点再读取checked属性
    const result = wrapper.find('#app-toggle').element.checked;
    expect(result).toEqual(true);
  })
})

内容的提问来源于stack exchange，提问作者John Mercier