Question

我在我的React组件say（SampleComponent.js）中使用“ react-device-detect” npm包中的isMobileOnly。

我想在玩笑的单元测试中自定义isMobileOnly的返回值。

我尝试了Jest手动模拟，如下面的链接所述： https://jestjs.io/docs/en/manual-mocks

但是它似乎对我不起作用。

我也尝试过：开玩笑的模仿开玩笑的嘲笑开玩笑的间谍

import {isMobileOnly} from 'react-device-detect;

在开玩笑的单元测试中，我想模拟函数isMobileOnly，使我应该能够将其返回值定制为“ true”。默认值为“ false”。

Answer 1

这对我有用。

在您的测试文件中，添加：import * as deviceDetect from 'react-device-detect';

然后您可以更改以下内容：deviceDetect.isMobileOnly = true;

例如

import * as deviceDetect from 'react-device-detect'; //<--important

it.only('clicking on myAccount redirects to /user/myAccount', () => {

        ///make sure this is before mount or shallow
        deviceDetect.isMobileOnly = true; //<--important

        component = mount(<Provider store={store}><Sidebar history={mockedHistory} /></Provider>);
        component.find('[test-id="myAccount"]').first().simulate('click');
        expect(mockedHistory.push).toHaveBeenCalledWith('/user/myAccount');
    });

Answer 2

出于测试目的，您可能会覆盖用户代理，因此react-device-detect软件包将根据您的需要进行标识，here就是这样做的方法。

This主题也应该有所帮助。

Answer 3

最后！经过数小时的努力，我自己弄清楚了。这是我所做的：

在与提供“ react-device-detect”软件包的node_modules目录相同级别的__mocks__文件夹中创建。注意：小写对__mocks__很重要。
在__mocks__文件夹中创建了一个名为“ react-device-detect.js”的文件。

在其中添加了以下代码：

const deviceDetect = jest.genMockFromModule('react-device-detect');
deviceDetect.isMobileOnly = true;
module.exports = deviceDetect;

在测试文件中，我像在原始文件中那样导入了“ isMobileOnly” 组件：
```
import { isMobileOnly } from 'react-device-detect';
```
现在，我可以将“ deviceDetect.isMobileOnly”的值更改为true或false 根据单元测试用例的需要模拟文件。

有关更多详细信息，请在此处https://jestjs.io/docs/en/manual-mocks

查阅官方文档。

感谢@Roman伸出援手！

如何使用Jest模拟和自定义从npm软件包导入的函数的值？

3 个答案: