我才刚刚开始使用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");
});
});
这行得通,但是我想知道是否还有其他更好的方法,某些内置的实用工具可能会丢失?