類型錯誤：無法讀取 ReactJS Jest 測試中未定義的屬性“標題”

Question

這是我的 Entry.js 代碼

import React, { useState } from "react";
import EdiText from "react-editext";

export default function Entry({ entry, index, removeEntry }) {
  //eslint-disable-next-line
  const [value, setValue] = useState();

  const handleSave = value => {
    console.log(value);
    setValue(value);
  };
  const data = entry.title;

  return (
    <div className="entry" style={{ width: "50%" }}>
      <button
        className="deleteBttn"
        style={{ background: "red", float: "right" }}
        onClick={() => removeEntry(index)}
      >
        x
      </button>
      <EdiText
        className="editText"
        value={data}
        type="text"
        onSave={handleSave}
        buttonsAlign="before"
      />
    </div>
  );
}

這是 Entry.test.js。 我想檢查 Entry 組件是否正確呈現。

import React from "react";
import Enzyme, { mount, shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import ReactDOM from "react-dom";

import Entry from "../../components/Entry";

describe("Entry Component", () => {
  beforeAll(() => {
    Enzyme.configure({ adapter: new Adapter() });
  });

  it("renders correctly", () => {
    shallow(<Entry data={"entry sample"} />);
    const div = document.createElement("div");
    ReactDOM.render(<Entry />, div);
  });
});

當我運行測試時，它返回 TypeError 錯誤：無法讀取未定義的屬性“標題”

  10 |     setValue(value);
  11 |   };
> 12 |   const data = entry.title;

我究竟做錯了什么？

Answer 1

安裝該組件時，您沒有傳遞entry道具。 首先嘗試注銷entry ，看看它的價值是什么。 如果條目未定義，您將在嘗試訪問未定義內容的字段時遇到運行時錯誤。

改成

  it("renders correctly", () => {
    shallow(<Entry data={"entry sample"} entry={{title: "sometitle"}} />);
    const div = document.createElement("div");
    ReactDOM.render(<Entry entry={{title: "sometitle"}} />, div);
  });