web-dev-qa-db-ja.com

ステートレスコンポーネントをテストする方法

以下のコンポーネントをテストしようとしていますが、エラーが発生します。これは、いくつかのデータを含む機能コンポーネントです。

以下のコンポーネントは、親コンポーネントから情報のリストを受け取り、レンダリングします。その動作は完全ですが、テストケースを作成する場合、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：「undefined」または「null」と一致できません。

reactjsunit-testingjest
5
Mukesh

mountInfoToolTipの場合、コンポーネント内でdata propを分解しようとしている間、小道具を渡しません。

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

したがって、次のように修正できます。

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

関連する質問。

5
Tomasz Mularczyk