reactjs - React jest testing Google Maps Api，Uncaught TypeError : this. autocomplete.addListener 不是函数

Question

我开发了一个 React Google map 自动完成组件。它工作正常，但在 Jest 测试中失败了。我想出了 this.autocomplete.addListener 不是组件本身及其父组件的函数。

大多数有类似问题的线程都是关于 ReferenceError: google is not defined 错误。我通过在 setupTests.js 上定义 google 解决了这个问题

window.google = {
  maps: {
    places: {
      Autocomplete: class {}
    }
  }
};

我想这个问题是不相关的，我试了很多方法也找不到解决办法。测试失败的 ComponentDidMount 方法如下。

componentDidMount() {
    this.autocomplete = new google.maps.places.Autocomplete(
      this.autocompleteInput.current,
      {
        types: ["geocode"],
        componentRestrictions: { country: "uk" },
        fields: ["formatted_address", "geometry"]
      }
    );
    this.autocomplete.addListener("place_changed", this.handlePlaceChanged);
  }

还有，我的测试文件在下面

describe("Autocomplete component", () => {
  it("renders without crashing", () => {
    const div = document.createElement("div");
    ReactDOM.render(<Autocomplete />, div);
    ReactDOM.unmountComponentAtNode(div);
  });
});

我在运行 npm test 时遇到的错误如下。

错误:未捕获 [类型错误:this.autocomplete.addListener 不是函数]

我是 Jest 测试的新手。我感谢任何帮助。谢谢。

Answer 1

我想，我找到了解决方案。在模拟 setupTests.js 时添加 addListener 函数会有所帮助。如果您在 component.test.js 父组件中编写此代码块，则会不断出现相同的错误。所以在 setupTests.js 中编写它解决了这个问题。

window.google = {
  maps: {
    places: {
      Autocomplete: function() {
        return { addListener: jest.fn() };
      },
      event: { trigger: jest.fn() }
    }
  }
};