我正在使用nextJs
和jest
enzyme
来测试组件。我有一个如下所示的组件文件,在该文件中,我从道具中获得了items
数组,并在setRef
内循环调用了useEffect
。
[itemRefs, setItemRefs] = React.useState([]);
setRef = () => {
const refArr = [];
items.forEach(item => {
const setItemRef = RefItem => {
refArr.push(RefItem)
}
if(item && item.rendItem){
item.rendItem = item.rendItem.bind(null, setItemRef);
}
}
setItemRefs(refArr);
}
React.useEffect(() => {
setRef();
},[])
我的测试文件如下:
const items = [
{
original: 'mock-picture-link',
thumbnail: 'mock-thumb-link',
renderItem: jest.fn().mockReturnValue({ props: { children: {} } })
}
];
beforeEach(() => {
setItemRefs = jest.fn(),
jest.spyOn(React, 'useEffect').mockImplementationOnce(fn => fn());
})
it('mocks item references', ()=>{
jest.spyOn(React, 'useState').mockImplementationOnce(() => [items, setItemRefs]);
wrapper = shallow(<Component />).dive();
expect(setItemRefs).toHaveBeenCalledWith(items);
})
由于items
数组BUT收到一个空白数组,因此测试用例失败,并出现预期的情况。 console.log
内的if(item && item.rendItem)
可以使用,但是console.log
内的const setItemRef = RefItem => {...
无效,我怀疑.bind
是否被嘲笑了。
任何帮助都可以。