wrapper.find() 在单元测试中抛出错误

Question

我正在尝试对 Vue 组件进行单元测试。使用 wrapper.find() 时出现错误。

组件如下： 小吃吧.vue

<script>
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters({
      visibility: "snackbar/visibility",
      type: "snackbar/type",
      message: "snackbar/message"
    })
  },
  watch: {
    visibility(value) {
      if (value) {
        $("#snackbar").addClass("show " + this.type);
        setTimeout(() => {
          $("#snackbar").removeClass("show " + this.type);
          this.$store.dispatch("snackbar/close");
        }, 3000);
      }
    }
  }
};
</script>

<template>
  <div id="snackbar">{{ message }}</div>
</template>

在测试中，我想使用 wrapper.find() 获得一个 div 以小吃店为 id。

这是规格文件： 小吃吧.spec.js

import SnackBar from '../../../src/modules/Common/_components/snackbar.vue';

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

const localVue = createLocalVue()
localVue.use(Vuex)

describe('Snackbar component', () => {
  let store
  beforeEach(() => {
    let state = {
      isVisible: false,
      message: '',
      type: ''
    }

    let getters = {
      'snackbar/visibility': (state) => state.isVisible,
      'snackbar/type': (state) => state.type,
      'snackbar/message': (state) => state.message
    }

    store = new Vuex.Store({
      modules: {
        snackbar: {
          state,
          getters
        }
      }
    })
  })

  it('renders the correct markup', () => {
    let wrapper = mount(SnackBar, { localVue, store })
    let snackbar = wrapper.find('#snackbar');
    
    // some test code related to snackbar
  })
})

日志如下：

cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

30 05 2018 18:18:57.847:INFO [karma]：Karma v1.7.1 服务器开始于 http://0.0.0.0:9876/

30 05 2018 18:18:57.849:INFO [launcher]：以无限并发启动浏览器 PhantomJS

30 05 2018 18:18:57.855:INFO [启动器]：启动浏览器 PhantomJS

30 05 2018 18:18:58.293:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]：连接到套接字 UwfYAt7yHauyEGfNAAAA，ID 为 26585183

Snackbar 组件
✗ 呈现正确的标记
undefined 不是函数（评估 'vNodes.findIndex(function (node) { return vNode.elm === node.elm; })'）

    webpack:///node_modules/@vue/test-utils/dist/vue-test-utils.js:2887:48 <- index.js:145115:83  
    filter@[native code] 

    removeDuplicateNodes@webpack:///node_modules/@vue/test-utils/dist/vue-test-utils.js:2887:0 <- index.js:145115:23  

    findVNodesBySelector@webpack:///node_modules/@vue/test-utils/dist/vue-test-utils.js:2917:0 <- index.js:145145:30  

    findVnodes@webpack:///node_modules/@vue/test-utils/dist/vue-test-utils.js:2934:0 <- index.js:145162:30  

    find@webpack:///node_modules/@vue/test-utils/dist/vue-test-utils.js:2982:0 <- index.js:145210:27  

    find$$1@webpack:///node_modules/@vue/test-utils/dist/vue-test-utils.js:3272:0 <- index.js:145500:19  

    webpack:///test/unit/specs/snackbar.spec.js:38:32 <- index.js:142013:32  

PhantomJS 2.1.1 (Linux 0.0.0)：执行 1 of 1 (1 FAILED) 错误（0.622 秒 / 0.009 秒）

Answer 1

这是旧版本的 vue-test-utils 的问题。 IE 不支持 findIndex，因此我们已从最新版本中删除了 findIndex。

如果你无法更新到最新的@vue/test-utils，你可以在运行测试之前添加一个 findIndex polyfill——https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex#Polyfill。