React Native Redux与Persist测试用例编写及Mock问题排查

问题分析 #

• jest.fn 是函数本身，需要调用 jest.fn() 才能创建Mock函数实例
• onChatButton={chatButton()} 是直接调用了Mock函数，应该传递函数引用而非执行结果
• 直接使用真实store会耦合Redux和Persist的真实逻辑，测试应该Mock独立的store

修正后的测试代码 #

import React from 'react';
import Header from './Header';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import { render } from '@testing-library/react-native';

// Mock极简测试用store，避免依赖真实Redux/Persist逻辑
const mockStore = configureStore({
  reducer: {
    // 根据Header组件依赖的state结构，仅Mock必要的reducer部分
    common: (state = {}) => state
  }
});

test('Header组件渲染正常', () => {
  // 创建正确的Mock函数实例
  const backButton = jest.fn();
  const chatButton = jest.fn();

  render(
    <Provider store={mockStore}>
      <Header
        title={''}
        onBackButton={backButton}
        onChatButton={chatButton} // 传递函数引用，不要调用
      />
    </Provider>
  );
});

额外优化建议 #

• 如果Header依赖Persist相关的state，可在mockStore里添加对应结构的空state或测试用数据
• 若要测试按钮点击逻辑，可在渲染后用fireEvent触发点击，再断言jest.fn的调用次数

内容的提问来源于stack exchange，提问作者silambarasan M