Reactjs 如何模拟函数组件中的函数

我正在编写一个电子应用程序，使用React作为前端，使用JEST+React测试库运行测试。我在一个模块中有以下简化代码：

import React from 'react';
import { ipcRenderer } from 'electron';
import Paper from '@material-ui/core/Paper';
import LinearProgress from '@material-ui/core/LinearProgress';


const AccountCheckModule = () => {

  const [listingsCount, setListingsCount] = React.useState(0);

  React.useEffect(() => {
    ipcRenderer.on('count-listings', (event, count) => {
      setListingsCount(count);
    });

    ipcRenderer.send('count-listings');

    // Cleanup the listener events so that memory leaks are avoided.
    return function cleanup() {
      ipcRenderer.removeAllListeners('count-listings');
    };
  }, []);

  return (
    <Paper elevation={2} data-testid="paper">
        <p
          className={classes.listingsNumberTracker}
          data-testid="free-listings-counter"
        >
          Free listings: {listingsCount}/100
        </p>
        <BorderLinearProgress
          className={classes.margin}
          variant="determinate"
          color="secondary"
          value={listingsCount}
          data-testid="border-linear-progress"
        />
    </Paper>
  );
};

export default AccountCheckModule;

---

如果是，您将如何实现这一点？

这是一个单元测试解决方案，我创建一个简单的

electron

模块来模拟真实的

electron

节点模块并简化组件JSX元素

例如

index.tsx

：

从“React”导入React；
从“./electron”导入{IPC渲染器}；
常量AccountCheckModule=（）=>{
常量[listingsCount，setListingsCount]=React.useState（0）；
React.useffect（（）=>{
ipcRenderer.on（'count-listings'，（事件，计数）=>{
setListingsCount（计数）；
});
发送（'count-listings'，2）；
//清理侦听器事件，以避免内存泄漏。
返回函数cleanup（）{
ipcrender.removeAllListeners（'count-listings'）；
};
}, []);
返回{listingscont}；
};
导出默认AccountCheckModule；

electron.ts

：

导出常量IPC渲染器={
事件：{}，
打开（事件、处理程序）{
this.events[event]=处理程序；
},
发送（事件、数据）{
此。事件[事件]（事件，数据）；
},
removeAllListeners（事件）{
this.events[事件]=未定义；
}
};

index.spec.tsx

：

从“React”导入React；
从'@testing library/react'导入{render，act}；
从“./electron”导入{IPC渲染器}；
从“/”导入AccountCheckModule；
描述（'AccountCheckModule'，（）=>{
之后（（）=>{
开玩笑。恢复记忆（）；
});
它（'should render correct'，async（）=>{
const events={}；
const onSpy=jest.spyOn（ipcRenderer，'on'）.mockImplementation（（事件，处理程序）=>{
事件[事件]=处理程序；
});
const sendSpy=jest.spyOn（ipcRenderer，'send'）.mockImplementation（（事件，数据）=>{
事件[事件]（事件，数据）；
});
const{getByText，container}=render(

ipcRenderer.on('count-listings', (event, count) => {
    setListingsCount(count);
});

// Jest Snapshot v1

exports[`AccountCheckModule should render correct 1`] = `
<div>
  <div>
    666
  </div>
</div>
`;