Vue测试模拟传递给组件的功能道具

时间:2019-02-14 17:47:53

标签: vue.js vue-component

我才刚刚开始使用vue test utils和jest研究vue组件 我找不到模拟传递给组件的函数属性的好例子,所以想知道即时通讯是否正确。

我的组件

<template>
 <div>
<div id="main">
  {{ msg }}
</div>
<span id="subject">{{ msgDetails }}</span>
<div id="item1">
  {{ item1 }}
</div>
<div id="item2">
  {{ item2 }}
</div>
  </div>
</template>
<script>
export default {
name: "Sample",
props: {
    setMessageDetails: Function,
    functionToMock: Function
},

data () {
    return {
        msg: "Hello",
        msgDetails: this.setMessageDetails(),
        item1: this.functionToMock(),
        item2: this.functionToMock()
    };
},
computed: {

},
methods: {

}
};
</script>

测试

import { mount } from "@vue/test-utils";
import Sample from "./sample.vue";

describe("Sample", () => {
it("is a Vue instance", () => {
    const mock = jest.fn();

    mock.mockReturnValueOnce("Name").mockReturnValueOnce("Role");

    const wrapper = mount(Sample, {
        propsData: {
            setMessageDetails: function () {return "msgDetails";},
            functionToMock: mock
        }
    });
    expect(wrapper.isVueInstance()).toBeTruthy();


    console.log(wrapper.html());

    expect(wrapper.find("#main").text()).toBe("Hello");
    expect(wrapper.find("#subject").text()).toBe("msgDetails");
    expect(wrapper.find("#item1").text()).toBe("Name");
    expect(wrapper.find("#item2").text()).toBe("Role");
});
});

这行得通,但是我想知道是否还有其他更好的方法,某些内置的实用工具可能会丢失?

0 个答案:

没有答案