类型错误：无法读取 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);
  });