时间戳

首页 > 解决方案 > 如何在 Jest 中为 ipcRenderer.on 和 ipcRenderer.send 编写单元测试？

javascript - 如何在 Jest 中为 ipcRenderer.on 和 ipcRenderer.send 编写单元测试？

问题描述

嗨，我正在使用 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();
});

我得到的错误是

TypeError：无法读取未定义的属性“on”。

标签： javascriptreactjsjestjselectronenzyme

解决方案

这是单元测试解决方案：

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

如果您安装了节点模块，则不需要将{ virtual: true }选项传递给方法。只需将其删除。我使用这个选项的原因是我不安装节点模块并为你做一个例子。jest.mock()electronelectron

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

推荐阅读