对模拟函数的断言失败

Vishwa 发表于 Dev

Vishwa

我正在尝试使用Jest和Enzyme测试反应组件。

当我断言是否使用Jest的.toBeCalled（）调用了函数时，测试失败。我试图通过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)

布赖恩·亚当斯

问题

该Promise调用回调instance.handleResponse已经不是由时间运行mockHandleSearch.call(instance);的回报和expect运行。

解

Promise在运行之前，请确保回调有机会完成expect。

在这种情况下，最简单的方法是使您的测试函数async，返回PromisefrommockHandleSearch和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
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。