Question

您好，我在输入文字的地方输入了内容，然后单击运行按钮后，在另一个具有id输出的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')
})

如何在Vue测试工具中测试输入

0 个答案: