wrapper.find () выдает ошибку в модульном тестировании

Question

Я пытаюсь выполнить модульное тестирование компонента Vue.Я получаю сообщение об ошибке при использовании wrapper.find ().

Компонент имеет следующий вид: snackbar.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>

В тестировании я хочу получить div с идентификатором закуски в качестве идентификатора с использованием wrapper.find ().

Это файл спецификации: закусочная.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 / unit / karma.conf.js --single-run

30 05 2018 18: 18: 57.847: ИНФОРМАЦИЯ [karma]: Сервер Karma v1.7.1 запущен в http://0.0.0.0:9876/

30 05 2018 18: 18: 57.849: ИНФОРМАЦИЯ [модуль запуска]: запуск браузера PhantomJS с неограниченным параллелизмом

30 05 2018 18: 18: 57.855: INFO [модуль запуска]: запуск браузера PhantomJS

30 05 2018 18: 18: 58.293: INFO [PhantomJS2.1.1 (Linux 0.0.0)]: подключен к сокету UwfYAt7yHauyEGfNAAAA с идентификатором 26585183

компонент Snackbar
ders отображает правильную разметку
undefined не является функцией (вычисляя vNodes.findIndex (функция)(узел) {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 из 1 (1 СБОЙ) ОШИБКА (0.622сек / 0,009 сек)

Answer 1

Это проблема со старой версией vue-test-utils.findIndex не поддерживается в IE, поэтому мы удалили findIndex из последних версий.

Если вы не можете выполнить обновление до последней версии @ vue / test-utils, вы можете добавить полифилл findIndex перед запуском тестов - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex#Polyfill.