英文:
How to properly mock library to be able to test the component with jest and react testing library
问题
我正在尝试测试一个使用react-dropzone库的组件。
import TextInput from './components/TextInput';
import Switch from 'react-switch';
import { useDropzone } from 'react-dropzone';
const MyComp = () => {
return <div>CONTENT</div>;
}
当我运行测试时，我得到以下错误：
TypeError: Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
12 | import TextInput from './components/TextInput';
13 | import Switch from 'react-switch';
> 14 | import { useDropzone } from 'react-dropzone';
在setupTests.js中，我尝试像其他库一样对其进行模拟：
// 模拟自定义钩子 useDimensions
jest.mock('./hooks/useDimensions.js', () => ({
useDimensions: jest.fn().mockReturnValue({
ref: { current: null },
dimensions: { width: 100, height: 100 },
isFirstLoad: true
})
}));
// 模拟 react-dnd
jest.mock('react-dnd', () => ({
useDrop: jest.fn().mockReturnValue([{ handlerId: 'mockHandlerId', isOver: false }, jest.fn()]),
useDrag: jest.fn().mockReturnValue([{ isDragging: false }, jest.fn()])
}));
// 模拟 react-dropzone
jest.mock('react-dropzone', () => ({
...jest.requireActual('react-dropzone'),
useDropzone: jest.fn()
}));
但我仍然得到相同的错误。有什么想法吗？
英文:
I'm tryng to test a component which uses react-dropzone library.
import TextInput from './components/TextInput';
import Switch from 'react-switch';
import { useDropzone } from 'react-dropzone';
const MyComp = () => {
return <div>CONTENT</div>
}
When I run the test I get:
TypeError: Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
12 | import TextInput from './components/TextInput';
13 | import Switch from 'react-switch';
> 14 | import { useDropzone } from 'react-dropzone';
In setupTests.js I try to mock it as other libraries:
// Mock custom hook useDimensions
jest.mock('./hooks/useDimensions.js', () => ({
useDimensions: jest.fn().mockReturnValue({
ref: { current: null },
dimensions: { width: 100, height: 100 },
isFirstLoad: true
})
}));
// Mock react-dnd
jest.mock('react-dnd', () => ({
useDrop: jest.fn().mockReturnValue([{ handlerId: 'mockHandlerId', isOver: false }, jest.fn()]),
useDrag: jest.fn().mockReturnValue([{ isDragging: false }, jest.fn()])
}));
// Mock react-dropzone
jest.mock('react-dropzone', () => ({
...jest.requireActual('react-dropzone'),
useDropzone: jest.fn()
}));
But I keep getting the same error.
Any idea?
答案1
得分: 1
import * as reactDropzone from 'react-dropzone';
const mockedUseDropzone = jest.fn();
jest.spyOn(reactDropzone, 'useDropzone').mockImplementation(() => mockedUseDropzone);
或者
jest.spyOn(reactDropzone, 'useDropzone').mockImplementation(mockedUseDropzone);
大多数情况下，您需要使用 "spyOn" 来模拟来自库的钩子 了解更多。
英文:
More like:
import * as reactDropzone from 'react-dropzone';
const mockedUseDropzone = jest.fn();
jest.spyOn(reactDropzone, 'useDropzone').mockImplementation(() => mockedUseDropzone);
or
jest.spyOn(reactDropzone, 'useDropzone').mockImplementation(mockedUseDropzone);
Most of the times you will need "spyOn" in order to mock hooks from libraries Read more.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论