使用Vue test-utils,我需要测试通过prop填充的特定输入元素的值。我想出了如何使用其ID查找元素的方法:
it("Address should render Street 1", () => {
const street1 = wrapper.find('#street1') // this works
expect(street1).toEqual('223 Some Street Rd') // nope
expect(street1.text()).toEqual('223 Some Street Rd') // seemed good at the time
expect(street1.value()).toEqual('223 Some Street Rd') // grasping at straws - no love
});
但是我无法弄清楚如何访问输入的“值”。
任何帮助都将受到感激
答案 0 :(得分:1)
我假设您的组件看起来像这样:
<input id="street1" type="text" v-model="street1" >
然后您可以尝试
expect(street1.element.value).toEqual('223 Some Street Rd');
例如
import { mount } from "@vue/test-utils";
import Input from "./Input";
describe("Input", () => {
const mountInput = (propsData = {}) => {
return mount(Input, {
propsData
});
};
it("Address should render Street 1", () => {
const wrapper = mountInput();
const street1 = wrapper.find('#street1')
expect(street1.element.value).toEqual('223 Some Street Rd');
});
});
答案 1 :(得分:0)
根据vue-test-utils documentation,您可以使用propsData
或setProps将道具添加到组件中。
import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'
const wrapper = mount(Foo, {
propsData: {
myProp: '223 Some Street Rd' // I am assuming the prop's value is '223 Some Street Rd'
}
})
const street1 = wrapper.find('#street1')
expect(street1.text()).toBe('223 Some Street Rd'); //.toEqual should also work
或者
import { mount } from '@vue/test-utils';
import Foo from './Foo.vue';
const wrapper = mount(Foo);
wrapper.setProps({ myProp: '223 Some Street Rd' }) // I am assuming the prop's value is '223 Some Street Rd'
const street1 = wrapper.find('#street1')
expect(street1.text()).toBe('223 Some Street Rd'); //.toEqual should also work