我正在尝试测试下面的组件但是得到错误,它是一个带有一些数据的功能组件。
以下组件接收来自父组件和渲染的信息列表,其工作完美,但在编写测试用例时,使用jest和酶失败
import React from "react";
export const InfoToolTip = data => {
const { informations = [] } = data.data;
const listOfInfo = () => {
return informations.map((info, index) => {
const { name, id } = info;
return [
<li>
<a
href={`someURL?viewMode=id`}
>
{name}
</a>
</li>
];
});
};
return (
<div className="tooltip">
<ul className="desc">{listOfInfo()}</ul>
</div>
);
};
测试用例
import React from "react";
import { shallow, mount } from "enzyme";
import { InfoToolTip } from "../index.js";
describe("InfoToolTip", () => {
it("tooltip should render properly",() => {
const wrapper = mount(<InfoToolTip />);
});
});
错误: TypeError:无法匹配&#39; undefined&#39;或者&#39; null&#39;。
答案 0 :(得分:2)
当您mount
InfoToolTip
在组件中没有传递任何道具时,您会尝试解构data
道具:
const { informations = [] } = data.data;
所以你可以这样修理它:
const wrapper = mount(<InfoToolTip data={{}} />);