Утверждение о ложной функции не выполняется

Question

Я пытаюсь протестировать реактивный компонент, используя Jest и Enzyme.

Когда я утверждаю, что функция вызывается с использованием .toBeCalled () Jest, тест не пройден.Я попытался отследить код с помощью console.log () , и я увидел, что все макеты вызываются, но утверждение не выполняется.

Я потратил много времени, пытаясь разобраться в документации Just, Enzyme и Stackoverflow, но не мог понять, что я делаю неправильно.

Не могли бы вы дать мне, если я делаю что-то не так?Вот мой код ниже

Postcode.js

import React, { Component } from "react";
import getPostcodeDetails from "../services/PostcodeService";
import SearchBox from "../components/searchbox/SearchBox";

let initialState = {
  statusOK: 0,
  postcode: "",
  error: ""
};

class Postcode extends Component {
  constructor(props) {
    super(props);
    this.state = initialState;
    this.handleSearch = this.handleSearch.bind(this);
    this.result = "";
    this.handleResponse = this.handleResponse.bind(this);
    this.handleError = this.handleError.bind(this);
  }

  handleResponse(response) {
    //some code
  }

  handleError(err) {
    //some code
  }

  handleSearch(postcode) {
    getPostcodeDetails(postcode)
      .then(this.handleResponse)
      .catch(this.handleError);
  }

  render() {
    return (
      <div>
        <SearchBox handleSearch={this.handleSearch} />
      </div>
    );
  }
}

export default Postcode;

Postcode.test.js

import React from "react";
import { shallow } from "enzyme";
import Postcode from "./Postcode";
import getPostcodeDetails from "../services/PostcodeService";

jest.mock("../services/PostcodeService");

it("handle search function", () => {
  const wrapper = shallow(<Postcode />);
  const instance = wrapper.instance();
  const mockHandleResp = jest.fn(() => {
    console.log("Handle resp moc-");
  });
  instance.handleResponse = mockHandleResp;

  //This is a async function in a module.
  getPostcodeDetails.mockImplementation(postcode => {
    return new Promise((resolve, reject) => {
      if (postcode === "abc") {
        console.log("Resolving");
        console.log(jest.isMockFunction(resolve));
        resolve();
      } else {
        console.log("Rejecting");
        reject();
      }
    });
  });

  const mockHandleSearch = jest.fn(postcode => {
    console.log("mockHandleSearch called");
    getPostcodeDetails("abc").then(instance.handleResponse);
  });
  instance.handleSearch = mockHandleSearch;
  mockHandleSearch.call(instance);
  expect(instance.handleResponse).toBeCalled();
});

Консольный вывод

    Console
    console.log src/containers/abc.test.js:32
      mockHandleSearch called
    console.log src/containers/abc.test.js:21
      Resolving
    console.log src/containers/abc.test.js:22
      false
    console.log src/containers/abc.test.js:34
      Promise { undefined }
    console.log src/containers/abc.test.js:13
      Handle resp moc-

  ● <Postcode> › handle search function

    expect(jest.fn()).toBeCalled()

    Expected mock function to have been called, but it was not called.

      37 |     instance.handleSearch = mockHandleSearch;
      38 |     mockHandleSearch.call(instance);
    > 39 |     expect(instance.handleResponse).toBeCalled();
         |                                     ^
      40 |   });
      41 | });
      42 |

      at Object.toBeCalled (src/containers/abc.test.js:39:37)

Answer 1

Issue

Обратный вызов Promise, который вызывает instance.handleResponse, не выполняется к моменту возврата mockHandleSearch.call(instance); и запуска expect.

Solution

Убедитесь, что обратные вызовы Promise имеют возможность завершить работу перед запуском expect.

Самый простой способ сделать это в этом случае - заставить вашу тестовую функцию async вернуть Promiseот mockHandleSearch, и await возвращенных Promise:

it("handle search function", async () => {  // make the test function async

  ...

  const mockHandleSearch = jest.fn(postcode => {
    console.log("mockHandleSearch called");
    return getPostcodeDetails("abc").then(instance.handleResponse);  // return the Promise
  });
  instance.handleSearch = mockHandleSearch;
  await mockHandleSearch.call(instance);  // await the returned Promise
  expect(instance.handleResponse).toBeCalled();  // SUCCESS
});