如何测试无状态组件

时间:2018-03-24 18:08:36

标签: reactjs unit-testing jest

我正在尝试测试下面的组件但是得到错误,它是一个带有一些数据的功能组件。

以下组件接收来自父组件和渲染的信息列表,其工作完美,但在编写测试用例时,使用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;。

1 个答案:

答案 0 :(得分:2)

当您mount InfoToolTip在组件中没有传递任何道具时,您会尝试解构data道具:

const { informations = [] } = data.data;

所以你可以这样修理它:

const wrapper = mount(<InfoToolTip data={{}} />);

Related question.