单元测试组件DidMount React

Question

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

我不知道如何测试我要发送的对象，我还想测试我发送的对象基于标志更改的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",
subcategory: "f1",
type: "enabled",
},
};
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);
});

Answer 1

有很多错误，不确定你是否足够了解酶：

• 你不能像你那样修改文件中的变量(const flag，analytics.sendEvent(，因为在你的测试文件中，这些变量是无法被jest识别的，然而酶可以让你修改组件的状态，当然还有道具(稍后会详细介绍(
• 如果是这样的话，你的第一个expect语句是毫无意义的，它是同义重复的，因为你只需要创建一个变量，给它分配一个true，然后测试它是否是true
• 此外，您的上一个expect对我来说是一个错误(您是否在测试enzyme是否真的按预期安装了组件？(
• 同样，创建一个名称与组件内的变量(const obj(匹配的变量并不意味着什么，它与任何其他js文件一样
• .toBeCalled()只接受一个对象，而不接受expect语句

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

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);
});