React Testing Library：Mock Redux Store为空问题排查

你的测试代码存在两个关键问题，导致组件无法获取到Redux Store中的值：

问题1：Mock的useSelector与真实Store冲突 #

你通过jest.mock替换了react-redux的useSelector为一个空的jest函数，但同时又试图用Provider传递真实Store。此时组件调用的是被mock的useSelector，它根本不会去读取Provider中的Store数据，默认返回undefined，所以valueList始终为空。

问题2：State结构与组件期望不匹配 #

组件中useSelector取的是state.data.value和state.data.valueList，但你定义的mockState没有data层级，就算不用mock，Store中的数据结构也和组件期望的不匹配，依然拿不到正确值。

解决方法（二选一） #

方法1：使用真实Redux Store（不mock useSelector） #

移除对useSelector的mock，修正State结构并创建符合要求的Store：

// 移除jest.mock("react-redux")这一段

import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import { render, screen } from '@testing-library/react';
import Display from './Display';

describe('Display', () => {
    // 修正State结构，匹配组件中state.data的层级
    const mockState = {
        data: {
            value: "",
            valueList: ["test-1", "test-2"]
        }
    };

    // 创建一个恒等reducer，保持传入的State不变
    const mockStore = configureStore({
        reducer: (state = mockState, action) => state,
    });
    
    it('Renders deeply', ()  =>  {
        render(
            <Provider store={mockStore}>
                <Display/>
            </Provider>
        )
        expect(screen.getByText("test-1")).toBeTruthy()
    })  
});

方法2：正确Mock useSelector（无需Provider） #

如果想通过mock方式测试，让mock的useSelector根据组件传入的selector函数返回对应值：

jest.mock("react-redux", () => {
    return {
        ...jest.requireActual("react-redux"),
        useSelector: jest.fn((selector) => {
            // 定义符合组件期望的mock State结构
            const mockState = {
                data: {
                    value: "",
                    valueList: ["test-1", "test-2"]
                }
            };
            return selector(mockState); // 调用组件的selector函数，返回对应数据
        }),
    };
});

import { render, screen } from '@testing-library/react';
import Display from './Display';

describe('Display', () => {
    it('Renders deeply', ()  =>  {
        render(<Display/>) // 无需Provider，useSelector已被mock
        expect(screen.getByText("test-1")).toBeTruthy()
    })  
});

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