Vue单元测试输入值未设置
Posted
技术标签:
【中文标题】Vue单元测试输入值未设置【英文标题】:Vue Unit test Input value not set 【发布时间】:2021-09-13 18:48:13 【问题描述】:我正在使用带有 typescript 的 Vue,并尝试对登录页面的输入值进行单元测试。 测试设置输入值,然后检查该值是否等于输入的值,除了检查的值返回为空“”,我不知道为什么。
主页.vue:
<form class="form" @submit.prevent="submit">
<input
id="userNameTextInput"
v-model="username"
placeholder="Name"
minlength="2"
/><br />
<input
id="passwordTextInput"
type="password"
v-model="password"
placeholder="Password"
minlength="8"
/><br />
<button
id="submitButton"
color="white"
background="darkslateblue"
type="submit"
@click="submit"
>
Submit
</button>
<div id="incorrectLoginBlock" v-show="toggleIncorrectLogin">
<p>Incorrect Membername or Password</p>
</div>
</form>
主页.spec.ts:
import HomePage from '@/components/HomePage.vue';
import mount, VueWrapper from '@vue/test-utils';
describe('HomePage.vue', () =>
let wrapper: VueWrapper<any>;
beforeEach(() =>
wrapper = mount(HomePage);
);
it('Incorrect login pops up', async () =>
const userTextInputIncorrect = wrapper.find('#userNameTextInput');
userTextInputIncorrect.setValue('wrongPass');
expect(userTextInputIncorrect.element.textContent).toContain(
'incorrectName',
);
错误:
expect(received).toContain(expected) // indexOf
预期的子字符串:“不正确的名称”
收到的字符串:“”
const userTextInputIncorrect = wrapper.find('#userNameTextInput');
userTextInputIncorrect.setValue('wrongPass');
expect(userTextInputincorrect.element.textContent).toBe('incorrectName');
【问题讨论】:
您可能需要等待userTextInputIncorrect.setValue('wrongPass');
。 next.vue-test-utils.vuejs.org/guide/essentials/…
【参考方案1】:
它应该可以工作:
it("Incorrect login pops up", async () =>
const userTextInputIncorrect = wrapper.find("#userNameTextInput");
await userTextInputIncorrect.setValue("wrongPass");
expect(
(userTextInputIncorrect.element as htmlInputElement).value
).toContain("incorrectName");
);
【讨论】:
以上是关于Vue单元测试输入值未设置的主要内容,如果未能解决你的问题,请参考以下文章