如何正确模拟库以能够使用Jest和React测试库测试组件。

huangapple go评论82阅读模式
英文:

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 &#39;./components/TextInput&#39;;
import Switch from &#39;react-switch&#39;;
import { useDropzone } from &#39;react-dropzone&#39;;
const MyComp = () =&gt; {
   return &lt;div&gt;CONTENT&lt;/div&gt;
}

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 &#39;./components/TextInput&#39;;
  13 | import Switch from &#39;react-switch&#39;;
&gt; 14 | import { useDropzone } from &#39;react-dropzone&#39;;

In setupTests.js I try to mock it as other libraries:

// Mock custom hook useDimensions
jest.mock(&#39;./hooks/useDimensions.js&#39;, () =&gt; ({
  useDimensions: jest.fn().mockReturnValue({
    ref: { current: null },
    dimensions: { width: 100, height: 100 },
    isFirstLoad: true
  })
}));

// Mock react-dnd
jest.mock(&#39;react-dnd&#39;, () =&gt; ({
  useDrop: jest.fn().mockReturnValue([{ handlerId: &#39;mockHandlerId&#39;, isOver: false }, jest.fn()]),
  useDrag: jest.fn().mockReturnValue([{ isDragging: false }, jest.fn()])
}));

// Mock react-dropzone
jest.mock(&#39;react-dropzone&#39;, () =&gt; ({
  ...jest.requireActual(&#39;react-dropzone&#39;),
  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 &#39;react-dropzone&#39;;

const mockedUseDropzone = jest.fn();

jest.spyOn(reactDropzone, &#39;useDropzone&#39;).mockImplementation(() =&gt; mockedUseDropzone);

or

 jest.spyOn(reactDropzone, &#39;useDropzone&#39;).mockImplementation(mockedUseDropzone);

Most of the times you will need "spyOn" in order to mock hooks from libraries Read more.

huangapple
  • 本文由 发表于 2023年6月22日 17:53:53
  • 转载请务必保留本文链接:https://go.coder-hub.com/76530672.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定