使用 window.require 开玩笑测试电子/react组件

IT技术 reactjs electron jestjs
2021-05-22 16:00:16

我目前正在创建一个使用 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 上的“未在 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();
    });
});
2个回答

在测试开始处(或在setupFilesAfterEnv安装文件中)添加此行

window.require = require;

细节

electron供应,window.require但在使用Jest.

默认情况下Jest提供一个类似浏览器的环境,使用jsdom它包含一个window对象。

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

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

我不得不利用modulereact-app-rewired这个module调整了 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错误。

我希望我能够提供帮助。

干杯!