@alenov
Программист

Взаимодействие VUE-компонентов через VUEX: как протестировать?

Доброго дня!
Проект на VUE.
Простой пример. Есть 2 компонента - A и B. Есть VUEX-storage. Компоненты взаимодействуют друг с другом, обмениваясь данными через storage. Например, если компонент A устанавливает в какой-то элемент storage некое значение, компонент B это видит и выполняет какие-то действия, или просто отображает изменение. Как это протестить?

B.vue
<template>
  <div>
    <div id="box">
        Actual value is: {{someValue}}
    </div>
  </div>
</template>

<script>
  export default {
    computed: {
        someValue () {
            return this.$store.state.someValue
        }
    }
  }
</script>


B.spec.js
import { mount } from '@vue/test-utils'
import store from '@/./store'
import B from "@/components/B"

describe('Interaction', () => {
  let wrapper
  beforeEach(() => {
    wrapper = mount(B, { store })
  })

  it('works', () => {
    wrapper.vm.$store.dispatch('setSomeValue', 'Any value')
    s = wrapper.find('#box')
    expect(s.text()).toBe('Any value')
  })
})


Тест падает.
  • Вопрос задан
  • 66 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы