我已经设置了一些单元测试,使用酶的浅层方法和jsdom配置进行测试。这一直运行良好,直到我遇到使用window.addEventListener
的组件。单元测试现在回复
TypeError: window.addEventListener is not a function
我为JSdom设置了测试助手,如此
import jsdom from 'jsdom';
...
global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = document.defaultView;
global.navigator = {userAgent: 'node.js'};
这工作正常,然后我升级到酶3.x,现在我收到了这个错误。
我想知道我现在需要手动模拟addEventListener,还是我做错了访问它。
答案 0 :(得分:4)
我在尝试检查是否已在componentDidMount中调用addEventListener时遇到了同样的问题,这似乎对我有用(jest,enzyme)
//component
componentDidMount(){
document.addEventListener("keydown", this.handleKeydownOnSearch, false);
}
...
//in test file ...
it("on component mount we set the keydown listener", () => {
global.document.addEventListener = jest.fn();
wrapper = shallow(<ItemSearch />);
expect(global.document.addEventListener).toHaveBeenCalled();
});
...
答案 1 :(得分:4)
//in test file ...
it("should render KeyStrokeHandler", () => {
// Set-up event listener mock
const map = {};
window.addEventListener = jest.fn((event, callback) => {
map[event] = callback;
});
// Mount component that has set callback for keydown event
const wrapper = mount(<KeyStrokeHandler />);
// Trigger keydown event
map.keydown({ key: 'Enter' });
});
...
答案 2 :(得分:1)
我就像你一样嘲笑我的document
,然后如果我需要在测试中使用addEventListener()
,我只是在beforeEach
beforeEach(() => {
document = {
...document,
addEventListener: () => { },
removeEventListener: () => { }
}
})