Question

我正在尝试测试componentWillMount中的一个函数。

成分</ P>

componentWillMount = () => {
const {
  agents,
  match
} = this.props;
this.edit = false;
this.agent = {};
if (match.params.id) {
  this.edit = true;
  this.agent = getAgent(agents, match.params.id);
  if ("undefined" === typeof this.agent) {
    push("/agents");
  }
}
resetStatusMessage();
formResetError();
};

render = () => {
    const { form } = this.props;
    const agent = this.agent;
    this.avatar = agent.avatar;
    ...........................
}

我正在尝试测试是否调用了getAgent函数。我还需要检查resetStatusMessage（）和formResetError（）是否被调用。

试验：

it("should call getAgent when mounted", () => {
const match = {
params: {
  id: "1"
}
},
agents ={
loading: false,
byId : {
  1:{
    firstName: "abc",
    lastName: "xyz"
  }
},
avatar: "avatarUrl"
};
let mockGetAgent = jest.fn();
const store = configureStore();
const wrapper = mount(
<Provider store={store}>
  <AgentForm match={match} getAgent={mockGetAgent}/>
</Provider>
);
expect(wrapper).toBeDefined();
expect(mockGetAgent).toBeCalled();
});

但我的测试失败了这条消息：

TypeError: Cannot read property 'avatar' of undefined

我怎样才能解决这个问题？在我的反应项目中，我正在使用jest和酶进行测试。新的反应和酶。任何帮助都会非常明显。

Answer 1

道歉，我并不是说你需要把它当成道具。这仅在组件通常接收

$ gnocchi status
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>403 Forbidden</title>
</head><body>
<h1>Forbidden</h1>
<p>You don't have permission to access /v1/status
on this server.<br />
</p>
<hr>
<address>Apache/2.4.18 (Ubuntu) Server at 10.92.76.44 Port 8041</address>
</body></html>
 (HTTP 403)

函数作为道具时才有效。

我猜测getAgent是在与组件相同的文件中定义的函数，但在组件本身之外，并且您只导出组件？

如果是这种情况，当您安装组件时，它将在其范围内查找getAgent并尝试调用它。目前，您已经创建了一个名为getAgent的函数，但该组件从不调用mockGetAgent。我认为你需要做的是调用你的模拟mockGetAgent并让它返回一些东西（例如一个看起来像你的代理之一的对象），这样this.agent不是未定义的

另外，关于单元测试的一些注意事项：

您应该尝试单独测试组件。在这里，您同时测试getAgent和Provider，但鉴于他们每个人都做了特定的事情，您应该尝试测试他们每个人都在做自己的工作。
通过检查它所使用的每个函数都被调用来测试组件并不是非常有效。您应该尝试检查功能所做的工作是否已完成。例如。如果AgentForm函数获取有关代理的信息以便可以呈现它，那么您应该检查您的包装器是否包含该信息，而不是检查getAgent是否被调用

如何使用jest和酶对componentwillmount中的函数进行单元测试？

1 个答案: