如何在 Jest 中為 ipcRenderer.on 和 ipcRenderer.send 編寫單元測試？

Question

嗨，我正在使用 Electron 和 React 開發一個項目，

我在反應端有一個表單，它在提交時調用ipcRenderer.on一個ipcRenderer.send方法。

我在為表單提交功能編寫單元測試代碼時遇到困難。 功能如下。

  handleFormSubmit = () => {
    const ethData = this.state.data;
    ipcRenderer.on('asynchronous-reply', (event, arg) => {
      if (arg === 'success') {
        this.setState({ status: true });
      }
    });
    ipcRenderer.send('update', value);
  }

首先，我只想測試單擊保存按鈕時調用 handleFormSubmit 函數。 我寫的是——

it('calls handleFormSubmit method when the form is submitted', () => {
  const instance = wrapped.instance();
  wrapped.find('button').simulate('click');
  expect(instance.handleFormSubmit()).toHaveBeenCalled();
});

我得到的錯誤是

類型錯誤：無法讀取未定義的屬性“on”。

Answer 1

這是單元測試解決方案：

index.jsx ：

import React, { Component } from 'react';
const { ipcRenderer } = require('electron');

class SomeComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { data: '', status: false };
  }
  handleFormSubmit = () => {
    const ethData = this.state.data;
    const value = 'value';
    ipcRenderer.on('asynchronous-reply', (event, arg) => {
      if (arg === 'success') {
        this.setState({ status: true });
      }
    });
    ipcRenderer.send('update', value);
  };
  render() {
    return <form onSubmit={this.handleFormSubmit}></form>;
  }
}

export default SomeComponent;

index.test.jsx :

import { shallow } from 'enzyme';
import React from 'react';
import SomeComponent from '.';
const { ipcRenderer } = require('electron');

jest.mock(
  'electron',
  () => {
    const mElectron = { ipcRenderer: { on: jest.fn(), send: jest.fn() } };
    return mElectron;
  },
  { virtual: true },
);

describe('59934084', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = shallow(<SomeComponent></SomeComponent>);
  });
  it('should render', () => {
    expect(wrapper.exists).toBeTruthy();
  });

  it('should handle submit, set status to true', () => {
    ipcRenderer.on.mockImplementationOnce((event, callback) => {
      callback(event, 'success');
    });
    wrapper.find('form').simulate('submit');
    expect(wrapper.state('status')).toBeTruthy();
    expect(ipcRenderer.on).toBeCalledWith('asynchronous-reply', expect.any(Function));
    expect(ipcRenderer.send).toBeCalledWith('update', 'value');
  });
  it('should handle submit without setting status to true', () => {
    ipcRenderer.on.mockImplementationOnce((event, callback) => {
      callback(event, 'failure');
    });
    wrapper.find('form').simulate('submit');
    expect(wrapper.state('status')).toBeFalsy();
    expect(ipcRenderer.on).toBeCalledWith('asynchronous-reply', expect.any(Function));
    expect(ipcRenderer.send).toBeCalledWith('update', 'value');
  });
});

100% 覆蓋率的單元測試結果：

 PASS  src/stackoverflow/59934084/index.test.jsx (14.089s)
  59934084
    ✓ should render (22ms)
    ✓ should handle submit, set status to true (14ms)
    ✓ should handle submit without setting status to true (4ms)

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |      100 |      100 |      100 |      100 |                   |
 index.jsx |      100 |      100 |      100 |      100 |                   |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        16.114s, estimated 19s

如果您安裝了electron節點模塊，則不需要將{ virtual: true }選項傳遞給jest.mock()方法。 只需將其刪除。 我使用這個選項的原因是我沒有安裝electron節點模塊，為你做一個例子。

源代碼： https : //github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59934084