Question

我当前正在创建一个使用React来创建界面的Electron应用程序。为了访问fs，我一直在使用：

const fs = window.require('fs');

在“电子”窗口中可以正常工作。

问题是，当我为使用window.require（'fs'）的任何组件编写开玩笑的测试时，在运行测试时出现以下错误。

TypeError: window.require is not a function

我浏览了Jest的文档，看来解决方案是使用手动模拟生成窗口模拟（请参见https://jestjs.io/docs/en/manual-mocks的“ JSDOM中未实现的模拟方法”）。但是，当我尝试模拟window.require时，请在测试文件的顶部添加

window.require = jest.fn();

我仍然遇到相同的TypeError。

我刚创建Jest模拟游戏很新，因此，对此的任何帮助将不胜感激。

我当前的测试文件（Component.test.js）看起来像

window.require = jest.fn();

import React from 'react';
import renderer from 'react-test-renderer';
import Component from '../index';

describe('Testing', () => {
    it('Component renders correctly', () => {
        const component = renderer.create(<Component />);
        let tree = component.toJSON();
        expect(tree).toMatchSnapshot();
    });
});

Answer 1

我曾经遇到过这个问题，下面是为我解决的问题：

我不得不利用模块react-app-rewired。该模块可调整webpack配置，即使对于使用create-react-app(CRA)而未使用'eject'且未创建react-scripts分支的用户也是如此。

您需要做的就是在项目的根目录中添加一个config-overrides.js文件，并使用以下代码段填充该文件：

module.exports = function override (config) {
  config.target = 'electron-renderer'
  return config;
}

然后您进入package.json，并用

替换您的启动脚本。

"start": "react-app-rewired start"。到此为止。之后，您可以重建并运行测试脚本，而不会出现window.require is not a function错误。

希望我能提供帮助。

欢呼！

Answer 2

在测试开始时（或在setupFilesAfterEnv安装文件中）添加以下行：

window.require = require;

详细信息

electron提供了window.require，但在使用Jest进行单元测试时未定义。

默认情况下，Jest使用包含jsdom对象的window提供了类似于浏览器的环境。

上面的行通过将window.require设置为等于require的当前值来模拟它。

使用window.require进行Jest测试电子/反应组件

2 个答案: