Question

尝试使用Jest和Utils测试我的Vue JS应用程序的点击事件时出现此错误

我有这个错误

Testing native dom events › calls increment method when button is clicked

    expect(jest.fn()).toHaveBeenCalled()

    Expected mock function to have been called, but it was not called.

      34 |     //find the button and trigger click event
      35 |     wrapper.find('button').trigger('click');
    > 36 |     expect(change).toHaveBeenCalled();
         |                    ^
      37 | })
      38 |
      39 | })

      at Object.it (tests/unit/form.spec.js:36:20)

我的Vue文件是

<template>
  <div>

    <div>
      <input type="text" v-model="count">
      <button @click="increment">Increment</button>
      <p> {{newCount}} </p>
    </div>

    <div>
      <input type="text" v-model="text">
      <button class="test-test" @click="change">Change</button>
      <p id="myText"> {{newText}} </p>
    </div>

  </div>
</template>

<script>
export default {
  data: function() {
    return {
      count:"",
      newCount: '',
      text:"",
      newText: "",
    };
  },
  methods: {
    increment() {
      this.newCount = this.count.split("").reverse().join("")
    },
    change() {
      this.newText = this.text
      document.getElementById("myText").style.fontSize = "xx-large"
    }
  }
};
</script>

我的测试文件是

import { shallowMount } from '@vue/test-utils';

import Post from '@/components/Form.vue';

describe('Testing native dom events', () => {
  const wrapper = shallowMount(Post);

  it('calls increment method when button is clicked', () => {
      const increment = jest.fn(); // mock function

      // updating method with mock function
      wrapper.setMethods({ increment });

      //find the button and trigger click event
      wrapper.find('button').trigger('click');
      expect(increment).toBeCalled();
  })

  it('reverse the string', () => {

    wrapper.setData({ count: 'Yoo' });
    wrapper.setData({ newCount: 'ooY' });
    expect(wrapper.vm.newCount)
        .toEqual('ooY');
  })

  it('calls increment method when button is clicked', () => {
    const change = jest.fn(); // mock function

    // updating method with mock function
    wrapper.setMethods({ change });

    //find the button and trigger click event
    wrapper.find('button').trigger('click');
    expect(change).toBeCalled();
})

})

我尝试消除按钮元素和子测试中的一个，并且它起作用了，但是如果将它们放在一起，似乎未调用seoncd按钮，您有什么建议吗？

谢谢

Zaid

预期已调用了模拟函数，但未调用。 Vue-Jest-Utils

0 个答案: