我得到了一个非常简单的反应组件,具有以下功能:
componentDidMount() {
window.scrollTo(0, 0)
}
似乎你不能做像
这样的事情window.scrollTo = jest.fn()
监视scrollTo
函数。
因此,我想知道监视这个函数的最佳方法是什么,并断言它已经在我的测试中使用过。
谢谢
答案 0 :(得分:7)
在jest中,global
而不是window
必须访问全局名称空间。
global.scrollTo = jest.fn()
答案 1 :(得分:0)
就像安德里亚斯所说,您将需要通过全局名称空间访问scrollTo()
。但是要对其进行监视并进行断言,您需要将监视功能分配给变量。像这样:
const scrollToSpy = jest.fn();
global.scrollTo = scrollToSpy;
...
expect(scrollToSpy).toHaveBeenCalled();
答案 2 :(得分:0)
我遇到了类似的问题,只是分配间谍对我不起作用。
最终我可以使用此代码来实现此目的
const spyScrollTo = jest.fn();
Object.defineProperty(global.window, 'scrollTo', { value: spyScrollTo });
然后在开玩笑中,我能够像这样检查它
const spyScrollTo = jest.fn();
describe('myComponent', () => {
beforeEach(() => {
Object.defineProperty(global.window, 'scrollTo', { value: spyScrollTo });
Object.defineProperty(global.window, 'scrollY', { value: 1 });
spyScrollTo.mockClear();
});
it('calls window.scrollTo', () => {
myComponent();
expect(spyScrollTo).toHaveBeenCalledWith({
top: 1,
behavior: 'smooth',
});
});
});
答案 3 :(得分:0)
依赖项:
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"jest": "^24.8.0"
"jest-environment-enzyme": "^7.1.1",
"jest-enzyme": "^7.1.1",
"jsdom": "^15.1.1"
window.scrollTo = jest.fn()
工作正常。
例如:
index.spec.tsx
:
import React, { Component } from 'react';
class SomeComponent extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
e.preventDefault();
window.scrollTo(0, 0);
}
render() {
return (
<div>
<button onClick={this.handleClick}>Click Me!</button>
</div>
);
}
}
export default SomeComponent;
index.spec.tsx
,在每个测试用例中模拟window.scrollTo
:
import React from 'react';
import { shallow } from 'enzyme';
import SomeComponent from './';
describe('SomeComponent', () => {
test('should handle click', () => {
const wrapper = shallow(<SomeComponent></SomeComponent>);
const mEvent = { preventDefault: jest.fn() };
window.scrollTo = jest.fn();
wrapper.find('button').simulate('click', mEvent);
expect(mEvent.preventDefault).toBeCalled();
expect(window.scrollTo).toBeCalledWith(0, 0);
});
});
jest.config.js
:
module.exports = {
preset: 'ts-jest',
testEnvironment: 'enzyme',
setupFilesAfterEnv: ['jest-enzyme'],
testEnvironmentOptions: {
enzymeAdapter: 'react16'
},
coverageReporters: ['json', 'text', 'lcov', 'clover']
};
单元测试结果:
PASS src/stackoverflow/58585527/index.spec.tsx
SomeComponent
✓ should handle click (13ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.932s, estimated 3s
源代码:https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58585527