使用 web 组件测试 vue

Question

我的应用程序正在使用 astrouxds Web 组件，我在我的测试中收到一条警告，我想修复它。我也不确定如何断言 Web 组件中的值。

  console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
    [Vue warn]: Unknown custom element: <rux-toggle> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
    
    found in
    
    ---> <App>
           <Root>

我已经设置了一个示例应用程序here。它以rux-toggle 为例。

应用程序在.vue 文件中有一个简单的模板和脚本。

<template>
  <div id="app">
    <rux-toggle
        id="app-toggle"
        :checked="toggle"
        @click.prevent="toggle = !toggle"></rux-toggle> {{ toggle }}
  </div>
</template>

<script>

export default {
  name: 'App',
  computed: {
    toggle: {
      get() {
        return this.$store.state.toggle
      },
      set(value) {
        this.$store.commit('setToggle', value)
      }
    }
  }
}
</script>

测试使用mount 创建包装器并测试是否检查了 Web 组件。

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();
    localVue.use(Vuex);
    store = new Vuex.Store(storeConfig);
    wrapper = mount(App, {store, localVue});
  });

  it("test toggle default", () => {
    const result = wrapper.find('#app-toggle').checked;
    expect(result).toEqual(true);
  })
})

测试失败：

Error: expect(received).toEqual(expected) // deep equality

Expected: true
Received: undefined

我不确定如何获取 Web 组件的 checked 值以正确执行断言。

我尝试过的事情

1. 从 shallowMount 切换到 mount
2. 使用 Vue.component(rux-toggle, RuxToggle) 全局注册
3. 已将 Vue.config.productionTip = false 添加到笑话设置中

Answer 1

rux-toggle 组件仅在main.js 中注册，导致您观察到的警告/错误。

关于你的尝试：

1. 从 shallowMount 切换到 mount

自定义元素必须由您自己的代码显式注册，mount 不会为您这样做。

1. 使用 Vue.component(rux-toggle, RuxToggle) 全局注册

@astrouxds/rux-toggle 中的RuxToggle 是一个LitElement，不满足Vue.component() expects 的Vue 组件定义的要求。

1. 将Vue.config.productionTip = false 添加到笑话设置中

这只是禁用了有关在生产中使用开发人员构建的浏览器控制台警告，与自定义元素或组件注册无关。也许您打算使用Vue.config.ignoredElements = ['rux-toggle']，它会静音有关未知自定义元素的警告（这在单元测试中实际上是不必要的），但它不会注册自定义元素。

解决方案

在您的测试中正确使用rux-toggle：

1. 创建一个注册 rux-toggle 的 Jest 设置文件。导入它就足够了，因为自定义元素注册会作为副作用发生。

   // tests/jest.setup.js
   import '@astrouxds/rux-toggle'
   

2. 配置 Jest 以使用设置文件：

   // jest.config.js
   module.exports = {
     setupFiles: ['<rootDir>/tests/jest.setup.js'],
   }
   

3. 配置 Jest 转译 @astrouxds/rux-toggle:

   // jest.config.js
   module.exports = {
     transformIgnorePatterns: ['/node_modules//(?!@astrouxds/rux-toggle)'],
   }
   

4. 您的项目使用jest 24.9.0，它依赖于不支持自定义元素的jsdom 15。要在此版本的 Jest 中启用自定义元素，请安装 jest-environment-jsdom-sixteen：

   npm install -D jest-environment-jsdom-sixteen
   

5. 配置 Jest 以使用该测试环境：

   // jest.config.js
   module.exports = {
     testEnvironment: 'jest-environment-jsdom-sixteen',
   }
   

6. 更新您的测试以使用attributes('checked') 读取checked 属性，并验证值为"true"（属性是字符串值）：

   it("test toggle default", () => {
     const result = wrapper.find('#app-toggle').attributes('checked');
     expect(result).toEqual('true');
   })
   

GitHub PR