Ошибка типа: невозможно прочитать свойство 'title' из неопределенного в ReactJS Jest Test - PullRequest
0 голосов
/ 20 марта 2020

Это мой код для 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: Невозможно прочитать свойство 'title' из неопределенного

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

Что я делаю не так?

1 Ответ

0 голосов
/ 20 марта 2020

Вы не передаете опору 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);
  });
...