How to test a stateless component

Question

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'.

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

Related question.