单元测试 componentDidMount React

问题描述

学习反应笑话和酶试图对一些我不知道如何进行单元测试的东西进行单元测试，这是我所拥有的和我尝试过的

我不确定如何测试我发送的对象，而且我想测试 if else 条件，其中我发送的对象根据标志发生变化。

知道如何测试等待提供程序的 const a1 和 const 1

async componentDidMount() {
    
    await this.loadLogin();
    const a1 = await providers.login();
    const b1 = await providers.reset();
    const flag = true;
        
    if (flag !== null) {
        analytics.sendEvent({
            event: {
                workflow: "a1",subcategory: "f1",type: "enabled",},});
    } else {
        analytics.sendEvent({
            event: {
                workflow: "b1",subcategory: "f2",type: "disabled",});
    }
}

到目前为止的单元测试

test("componentDidMount",async () => {
    wrapper = mount(component());
    const instance = wrapper.instance();
    instance.componentDidMount();

    const obj = {
        event: {
            workflow: "a1",};

    const flag = jest.fn();
    flag.mockReturnValue(true);
    analytics.sendEvent = jest.fn();
    expect(flag).toBeTruthy();
    expect(analytics.sendEvent).toBeCalledWith(expect.objectContaining(obj));
    expect(wrapper).toHaveLength(1);
});

出现错误

expect(jest.fn()).toBeCalledWith(...expected)

    Expected: ObjectContaining {"event": {"subcategory": "f1","type": "enabled","workflow": "a1"}}

    Number of calls: 0

       analytics.sendEvent = jest.fn();
      expect(flag).toBeTruthy();
    expect(analytics.sendEvent).toBeCalledWith(expect.objectContaining(obj));
         |                                     ^
       expect(wrapper).toHaveLength(1);
       });

解决方法

错误不少，不知道你对酶的了解是否足够：

• 你不能像你那样修改文件中的变量 (const flag,analytics.sendEvent)，因为在你的测试文件中，这些只是开玩笑无法识别的，但是酶可以让你修改组件的状态和当然是道具（稍后会详细介绍）；
• 如果是这样，你的第一个 expect 语句是没有意义的，它是同义反复的，因为你只是创建一个变量，给它分配一个 true，然后测试它是否是 true;
• 此外，您的最后一个 expect 对我来说是个谜（您是否在测试 enzyme 是否真的按预期安装了组件？）；
• 再次重申，您创建的变量名称与组件内的变量 (const obj) 相匹配并不意味着什么，它就像任何其他 js 文件；
• .toBeCalled() 只接受一个对象，而不接受 expect 语句。

我的建议是使用 axios-mock-adapter 模拟 adapter 中的网址/方法，并测试您组件的 obj 块中的实际 else：>

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

test("componentDidMount",async () => {
    const obj ={
        event: {
            workflow: "b1",subcategory: "f2",type: "disabled",},};

    const url = 'http://your/api/path'; // that's the url the obj is sent to at analytics.sendEvent
    const mock = new MockAdapter(axios);
    mock.onPost(url,obj)
            .reply(200,'success');
    const spy = jest.spyOn(mock,'onPost');

    wrapper = mount(component());
    const instance = wrapper.instance();
    instance.componentDidMount();
    expect(spy).toHaveBeenCalledWith(url,obj);
});