How to test a stateless component

问题

I am trying to test below component but getting error, its a functional component with some data.

The below component receive list of informations from parent component and renders, its work perfectly, but when writing test cases its failing using jest and enzyme

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

Test case

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

Error: TypeError: Cannot match against 'undefined' or 'null'.

回答1:

When you mount InfoToolTip you don't pass any props while in component you try to destructure data prop:

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

So you could fix it this way:

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