我开发了一个 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 测试的新手。我感谢任何帮助。谢谢。
最佳答案
我想,我找到了解决方案。在模拟 setupTests.js 时添加 addListener 函数会有所帮助。如果您在 component.test.js 父组件中编写此代码块,则会不断出现相同的错误。所以在 setupTests.js 中编写它解决了这个问题。
window.google = {
maps: {
places: {
Autocomplete: function() {
return { addListener: jest.fn() };
},
event: { trigger: jest.fn() }
}
}
};
关于reactjs - React jest testing Google Maps Api,Uncaught TypeError : this. autocomplete.addListener 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57868013/