Vue单元测试输入值未设置

Posted 2023-03-13

【中文标题】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");
);