Как проверить методы, переданные компоненту

Question

Я изо всех сил пытался точно определить, как решить эту проблему, я пытался возиться с фиктивными данными и различными подходами, и я все еще ищу решения в Интернете.

Мне любопытно, как я могу настроить свой тест, чтобы он определял истинное состояние (тема CardTopic === "Реагировать") и затем вызывал соответствующую функцию.

Тест

  it("should invoke renderReview if the local state topic equals 'React'", () => {
    wrapper = shallow(<CardTopic topic="React" />);
    wrapper.find("section").simulate("click");
    expect(wrapper.instance().handleClick).toEqual(renderReview);
  });

Error

TypeError: this.props.renderReview is not a function

      11 |   handleClick = () => {
      12 |     this.state.topic === "React"
    > 13 |       ? this.props.renderReview()
         |                    ^
      14 |       : this.props.renderNotFound();
      15 |   };
      16 |   render() {

Answer 1

Простое исправление.Вам просто нужно снабдить ваш компонент некоторыми фиктивными функциями jest.fn() реквизитами.

Пожалуйста, прочитайте больше о: опишите блоки и beforeEach и afterEach методы.

Например:

import React from "react";
import { shallow } from "enzyme"
import CardTopic from '../path/to/CardTopic";

// jest mocked functions -- defined here for ease of use throughout the test
const renderReview = jest.fn(); 
const renderNotFound = jest.fn();

// define any initial props (this.props) the component uses   
const initialProps = {
  renderReview,
  renderNotFound,
  ...etc
}

describe("Card Topic", () => {

  let wrapper;
  beforeEach(() => {
    wrapper = shallow(<CardTopic {...initialProps } />); // this resets wrapper for each test (removes any state that was set)
  });

  afterEach(() => {
    renderReview.mockClear(); // resets the mock information (number of times it's been called);
    renderNotFound.mockClear(); // resets the mock information (number of times it's been called);
    wrapper.unmount(); // unmounts each wrapper instance after each test 
  });

  it("renders renderReview if the local state topic equals 'React'", () => {
    wrapper.setState({ topic: "React" }); // set wrapper's "topic" state
    wrapper.update(); // update the wrapper with this new state

    wrapper.instance().handleClick(); // invoke the method

    expect(renderReview).toHaveBeenCalledTimes(1); // expect a mock function to be called
    expect(renderNotFound).toHaveBeenCalledTimes(0); // not needed, but here for declarative purposes
  });

  it("renders renderNotFound if the local state topic does not equal 'React'", () => {
    wrapper.setState({ topic: "Redux" }); // set wrapper's "topic" state
    wrapper.update(); // update the wrapper with this new state

    wrapper.instance().handleClick(); // invoke the method

    expect(renderNotFound).toHaveBeenCalledTimes(1); // expect a mock function to be called
    expect(renderReview).toHaveBeenCalledTimes(0); // not needed, but here for declarative purposes
  });
});

---

Если вы не хотите использовать фиктивные функции, но хотите проверить их на действительные функции,тогда вам нужно будет импортировать эти функции и предоставить их так же, как показано выше.Затем, если эти функции изменят DOM, вам нужно будет сделать утверждение против DOM.