反应测试渲染器 - onClick 后测试失败

Question

我有这个组件：

import React from 'react';

export const ThemeSwitch = ({ theme, themeToggler }) => {
    return (
        theme === 'light'
            ? <div onClick={themeToggler}><h2>dark</h2><img src="assets/icon-moon.svg" alt="icon of a moon" /></div>
            : <div onClick={themeToggler}><h2>light</h2><img src="assets/icon-sun.svg" alt="icon of a sun" /></div>
    );
};

我有这个测试套件：

describe("Theme Switch Test", () => {
    it('[1] Matches the snapshot', () => {
        const theme = "light";
        const component = renderer.create(<ThemeSwitch theme={theme} themeToggler={() => { }} />);

        expect(component.toJSON()).toMatchSnapshot();
    });

    it('[2] Renders - "dark" with moon icon - if theme is set to light', () => {
        const theme = "light";
        const component = renderer.create(<ThemeSwitch theme={theme} themeToggler={() => { }} />).root;

        const h2 = component.findByType('h2').props.children;
        const imgSource = component.findByType('img').props.src;

        expect(h2).toEqual('dark');
        expect(imgSource).toEqual('assets/icon-moon.svg');
    });

    it('[3] Renders - "light" with sun icon - if theme is set to dark', () => {
        const theme = "dark";
        const component = renderer.create(<ThemeSwitch theme={theme} themeToggler={() => { }} />).root;

        const h2 = component.findByType('h2').props.children;
        const imgSource = component.findByType('img').props.src;

        expect(h2).toEqual('light');
        expect(imgSource).toEqual('assets/icon-sun.svg');
    });

    it('[4] Changes theme on click from - "dark" with moon icon - to - "light" with sun icon - and back', () => {
        let theme = "light";

        const onClick = () => {
            theme = "dark";
        };

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

        const wrapper = component.findByType('div');

        act(() => wrapper.props.onClick());

        let h2 = component.findByType('h2').props.children;
        let imgSource = component.findByType('img').props.src;

        expect(h2).toEqual('light');
        expect(imgSource).toEqual('assets/icon-sun.svg');
    });
});

前 3 个测试正常通过，但最后一个在 expect(h2).toEqual('light'); 上失败。

我很困惑为什么会发生这种情况，因为在手动测试时我看到组件按预期运行，因此在 onClick 事件之后更改了文本和图标。

Answer 1

该错误是由于在 onClick 之后未更新组件引起的。

    it('[4] Changes theme on click from - "dark" with moon icon - to - "light" with sun icon', () => {
       
        // Defining props
        let theme = "light";

        const onClick = () => {
            theme = "dark";
        };

        // Creating the TestRendererInstance
        const component = renderer.create(<ThemeSwitch theme={theme} themeToggler={() => onClick()} />);

        // repeting test [1] 
        let h2Text = component.root.findByType('h2').props.children;
        let imgSource = component.root.findByType('img').props.src;

        expect(h2Text).toEqual('dark');
        expect(imgSource).toEqual('assets/icon-moon.svg');

        // Triggering the onClick event of the component
        act(() => component.root.findByType('div').props.onClick());

        // Updating the testRenderer tree
        component.update(<ThemeSwitch />);

        // Test if text inside of h2 and src inside of img changed
        h2Text = component.root.findByType('h2').props.children;
        imgSource = component.root.findByType('img').props.src;

        expect(h2Text).toEqual('light');
        expect(imgSource).toEqual('assets/icon-sun.svg');
    });