React Test Renderer触发onClick后测试用例失败问题

第4个测试用例失败是因为测试逻辑完全没有模拟组件真实运行时的更新流程，核心问题有2个：

• 你在测试作用域声明的let theme = "light"是普通JavaScript局部变量，修改这个变量不会触发React组件重渲染：React组件只会在自身state变化、接收的props变化时触发重渲染，普通外部变量的变更不在React的响应式追踪范围内，组件根本感知不到值变了，所以点击后拿到的还是初始light主题对应的渲染结果（h2文本是dark、图标是月亮）。
• 你写的点击回调只是修改了测试文件里的局部变量，没有把变更后的主题值作为新的props重新传给组件，和你手动测试时的实际运行逻辑完全不一致：手动测试能正常切换，是因为你项目里的themeToggler会更新全局状态/父组件state，之后会把新的theme值作为prop重新传入ThemeSwitch触发重渲染，这个流程在你的测试代码里完全缺失。

你需要在测试里模拟真实的状态更新、props重传流程，以react-test-renderer为例，修正后的第4个用例代码如下：

it('[4] Changes theme on click from - "dark" with moon icon - to - "light" with sun icon - and back', () => {
    let currentTheme = "light";
    const toggleTheme = () => {
        currentTheme = currentTheme === 'light' ? 'dark' : 'light';
        // 关键：更新组件传入的props，触发重渲染，模拟真实场景下父组件传新值的流程
        testRenderer.update(
            <ThemeSwitch theme={currentTheme} themeToggler={toggleTheme} />
        );
    };

    const testRenderer = renderer.create(
        <ThemeSwitch theme={currentTheme} themeToggler={toggleTheme} />
    );
    const component = testRenderer.root;

    // 初始状态校验：light主题下显示dark文本+月亮图标
    let h2 = component.findByType('h2').props.children;
    let imgSource = component.findByType('img').props.src;
    expect(h2).toEqual('dark');
    expect(imgSource).toEqual('assets/icon-moon.svg');

    // 第一次点击切换到dark主题
    act(() => component.findByType('div').props.onClick());
    // 校验切换结果：dark主题下显示light文本+太阳图标
    h2 = component.findByType('h2').props.children;
    imgSource = component.findByType('img').props.src;
    expect(h2).toEqual('light');
    expect(imgSource).toEqual('assets/icon-sun.svg');

    // 第二次点击切回light主题
    act(() => component.findByType('div').props.onClick());
    h2 = component.findByType('h2').props.children;
    imgSource = component.findByType('img').props.src;
    expect(h2).toEqual('dark');
    expect(imgSource).toEqual('assets/icon-moon.svg');
});

注意：需要确保你已经在测试文件头部从react-test-renderer包引入了act方法。

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