如何使用 jest 测试 Vue.js 组件中方法的错误答案

【问题标题】：How to test an Error of a Method in a Vue.js Component using jest如何使用 jest 测试 Vue.js 组件中方法的错误
【发布时间】：2020-04-01 08:58:48
【问题描述】：

如何测试我的 Vue 组件的方法createUser()？我想测试 createUser() 方法是否会抛出 Error 如果 firstname < 2 例如。这怎么可能？

我不太熟悉测试 VUE 组件。这是我的第一次，所以我不知道如何访问 VUE 组件以及如何向组件提交例如用户名

<script>
import {ApiService} from '../ApiService.js';
import {User} from '../User.js';

//const API_URL = 'http://localhost:8080';
const apiService = new ApiService();

export default {
    name: "CreateUser",

    data() {
        return {
            input: {
                username: "",
                firstname: "",
                lastname: "",
                title: "",
                password: "",
                groupId: "",
                groups: [],
            },
        }
    },

    /.../

    methods: {

        getAllGroups() {
            apiService.getAllGroups().then((data) => {
                this.input.groups = data;
            });
        },

        createUser() {

            if (this.input.firstname == null || this.input.firstname.length < 2 || this.input.firstname > 50) {
                throw ("Firstname to short/long/empty");
            } else {
                let user = new User(this.input.username, this.input.lastname, this.input.title, this.input.firstname, this.input.password, this.input.groupId)

                apiService.createUser(user).then(() => {
                    location.reload()
                });
            }
        },

我尝试了以下方法，但有些不起作用

import { shallowMount } from '@vue/test-utils';
import UserModal from "../src/views/UserModal";

describe('UsarModal', () => {
    it('should throw error when first name is too short', () => {

        const myItems = [
            {
            username: "Heinz",
            firstname: "H",
            lasname: "Müller"}
        ]

        const wrapper = shallowMount(UserModal, {
            input: {
                myItems
            }
        })

        expect(wrapper.vm.createUser()).toThrow("Firstname to short/long/empty")
    })
})

【问题讨论】：

代码格式和语法修订。

标签： vue.js testing methods jestjs components

【解决方案1】：

因为在代码中，它抛出了一个错误，所以我们需要在我们的测试用例中添加一个 catch 块来测试这个场景。您的案例的 PFB 示例：

try {
    wrapper.vm.createUser();
  } catch (error) {
    expect(error).toBe('Firstname to short/long/empty');
  }

如果您遇到任何问题，请告诉我。

【讨论】：

【解决方案2】：

感谢您的提示！但仍有一些事情无法正常工作。在我看来，它不接受我的模拟数据作为输入。我想测试当我使用太短的用户名时是否出错。但即使我输入了足够长的用户名，try catch 块也会捕获我的错误，如您在附图中所见。

import {shallowMount} from '@vue/test-utils'
import UserModal from "./UserModal";

describe('ParentComponent', () => {
test("displays 'Emitted!' when custom event is emitted", () => {
    const wrapper = shallowMount(UserModal, {
                input: {
                    username: "asfsf",
                    firstname: "thomas",
                    lastname: "bird",
                    title: "Dr.",
                    password: "asdasda",
                    groupId: "2",
                    groups: [],}

    });

    try {
        wrapper.vm.createUser();
    } catch (error) {
        expect(error).toBe("username missing");
    }
})
});

Error Log

【讨论】：