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

Posted 2023-02-22

【中文标题】如何使用 jest 测试 Vue.js 组件中方法的错误

【英文标题】：How to test an Error of a Method in a Vue.js Component using jest

【发布时间】：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")
    )
)

【问题讨论】：

代码格式和语法修订。

【参考方案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