Как проверить ввод в Vue test utils - PullRequest
0 голосов
/ 08 марта 2020

Привет, у меня есть ввод, где я набираю текст, и после нажатия кнопки «Пуск» текст отображается в другом div с выводом идентификатора, я пытаюсь проверить это поведение, но после Vue .nextTick ничего не изменится, может кто-нибудь мне помочь ??

Я понимаю, что этот код бесполезен, это просто симуляция большого проекта

// .vue file
<template>
  <div>
    <input type="text" v-model="text" id="input" />
    <button @click="run" id="run" ref="run">Run</button>
    <button @click="reset" id="reset" ref="reset">reset</button>
    <div ref="output" id="output"></div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      text: ""
    };
  },
  methods: {
    run() {
      let output = document.getElementById("output");
      output.innerHTML = this.text;
    },
    reset() {
      let output = document.getElementById("output");
      this.text = "";
      output.innerHTML = "";
    }
  }
};
</script>

<style>
#output {
  width: 100px;
  background-color: black;
  color: white;
}
</style>


// .test 

import App from '../src/test.vue'
import { mount } from '@vue/test-utils'
import Vue from 'vue'

test('isWorking', async () => {
    const wrapper = mount(App)
    wrapper.setData({ text: 'hello' })
    let run = wrapper.find({ ref: 'run' })
    run.trigger('click')
    await Vue.nextTick()
    expect(wrapper.text()).toContain('hello')
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...