使用 window.require 开玩笑测试 Electron/React 组件 [英] Jest Testing Electron/React Component using window.require

问题描述

我目前正在创建一个使用 React 创建界面的 Electron 应用程序.为了访问 fs，我一直在使用:

I'm currently creating an Electron application that uses React to create the interface. In order to get access the fs, I have been using:

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

在电子窗口中工作正常.

Which works fine when in an Electron window.

问题是，当我为使用 window.require('fs') 的任何组件编写笑话测试时，运行测试时出现以下错误.

The issue is that when I write jest tests for any components that use the window.require('fs'), I get the following error when running the test.

TypeError: window.require is not a function

我查看了 Jest 的文档，似乎解决方案是使用手动模拟生成窗口模拟(请参阅 https://jestjs.io/docs/en/manual-mocks).但是，当我尝试通过在测试文件顶部添加来模拟 window.require 时

I have looked through the documentation for Jest and it seems the solution is to generate a mock of window using a manual mock (see "Mocking methods which are not implemented in JSDOM" at https://jestjs.io/docs/en/manual-mocks). However, when I tried to mock window.require by adding at the top of my test file

window.require = jest.fn(); 

我仍然得到相同的 TypeError.

I still get the same TypeError.

我是创建 Jest 模拟的新手，因此非常感谢任何帮助.

I'm very new to create Jest mocks so any help with this would be much appreciated.

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

My current test file (Component.test.js) looks like

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();
    });
});

推荐答案

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

I once faced this issue and below was what solved it for me:

我不得不利用模块 react-app-rewired.这个模块调整 webpack 配置，即使对于那些使用 create-react-app(CRA) 而不使用 'eject' 并且没有创建 react-scripts 分支的人.

I had to leverage on the module react-app-rewired. this module Tweaks the webpack config(s), even for those using create-react-app(CRA) without using 'eject' and without creating a fork of the react-scripts.

您只需在项目的根目录中添加一个 config-overrides.js 文件，并使用以下代码段填充它:

all you need is to add a config-overrides.js file in the root of your project, and populate it with the snippet below:

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

然后你继续你的 package.json 并用

then you proceed to your package.json and replace your start script with

"start": "react-app-rewired start" .你就完成了.此后，您可以重建并运行您的测试脚本，而不会出现 window.require is not a function 错误.

"start": "react-app-rewired start" . and you are done. you can thereafter rebuild and run your test script without getting the window.require is not a function error.

希望我能帮上忙.

干杯！

这篇关于使用 window.require 开玩笑测试 Electron/React 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！