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单元测试输入值未设置的主要内容,如果未能解决你的问题,请参考以下文章

带有笑话的Vue Cli单元测试如何运行单个测试

单元测试 Vue JS 和 Vue 资源时状态不变

Vue 路由器的注入在 Je​​st 单元测试期间失败

三步快速掌握“基于vue框架”的前端单元测试方法

Vue 单元测试 使用mocha+jest

Vue.js—单元测试