时间戳

首页 > 解决方案 > 如何在 Vue 测试文件中使用嵌套数据属性和挂载方法

javascript - 如何在 Vue 测试文件中使用嵌套数据属性和挂载方法

问题描述

我正在尝试使用 Vue test utils 和 jest 来测试用户输入和提交。我遇到了几个错误，如果有人能给我指出一个非常好的使用 Vue 的 TDD 指南，我会很高兴。

零件

<template>
<div class="container">
<div class="col-md-6">
                  <label for="firstname" class="form-group-placeholder"></label>
                  <input id="firstname" type="text" v-model="details.firstname" />
              </div>
              <div class="col-md-6">
                  <label for="lastname" class="form-group-placeholder"></label>
                  <input id="lastname" type="text" v-model="details.lastname" />
              </div>
            <div class="col-md-6">
                  <label for="email" class="form-group-placeholder"></label>
                  <input id="email" type="email" v-model="details.email" />
              </div>

            <div class="col-md-6">
                  <label for="password" class="form-group-placeholder"></label>
                  <input id="password" type="password" v-model="details.password" />
              </div>

<div class="col-md-12">
                <button class="btn" @click="registerUser">
                  Create an account
                </button>
              </div>
</div>
</template>
<script>
export default {
  name: "Register",
  data() {
    return {
      details: {
        firstname: null,
        lastname: null,
        email: null,
        password: null
      }
    };
  },
  methods: {
    async registerUser() {
      try {
        let response = await this.$axios.post(
          "/register",
          this.details
        );
        
      } catch (error) {
        
      }
    }
  }
};
</script>

测试

import {  shallowMount } from "@vue/test-utils";
import Register from "../register";

describe("RegisterSponsor", () => {

  it("Will trigger an action with default object when form is submited", async () => {
    const expectedData = {
      firstname: null,
      lastname: null,
      email: null,
      password: null
    };
    const RegisterUser = jest.fn();
    const wrapper = shallowMount(Register, {
      data() {
        return {
          details: {
            expectedData
          }
        };
      },
methods: {
    registerUser()
}
    });
    wrapper.find("button").trigger("click");
    await wrapper.vm.$nextTick();

    expect(RegisterUser).toHaveBeenCalled();
  });
});

我在这里遇到了几个错误，例如“TypeError: Cannot read property 'firstname' of undefined”和[Vue warn]: Error in data(): "TypeError: Cannot read property 'params' of undefined" 提交触发器也不起作用。老实说，文档可能会更好。

标签： javascriptvue.jsjestjsvue-test-utils

解决方案

首先，当您安装组件时，无需传递data和methods参数，data()您的组件将自动设置，您将使用现有methods的组件。其次，如果你想断言它registerUser被调用，你应该像这样监视那个方法：

jest.spyOn(wrapper.vm, 'registerUser')

第三，如果您在单击按钮后没有检查组件的 DOM 结构，则可以摆脱$nextTick调用。

综上所述，测试应如下所示：

describe("RegisterSponsor", () => {

  it('Will trigger an action with default object when form is submited', async () => {
    const wrapper = shallowMount(Register);
    jest.spyOn(wrapper.vm, 'registerUser')
    await wrapper.find('button').trigger('click');
    expect(wrapper.vm.registerUser).toHaveBeenCalled();
  });
});

推荐阅读