如何使用玩笑和酶测试切换主题按钮

Question

我想测试使用材质 UI 切换主题的按钮。我如何使用 Jest 和酶来做到这一点。我是测试新手，因此对此了解不多。见谅。

请不要担心任何功能。我唯一需要的是使用 Jest 和 Enzyme.

的测试代码

如果你也给我提供资源，那将是一个很大的帮助。

Header.js

<MenuItem onClick={props.toggleTheme} data-testId="header-toggleTheme" >
                                {props.theme === 'light' ? (
                                    <Brightness2Icon style={{ color: 'black' }} />
                                ) : (
                                    <Brightness7Icon style={{ color: 'white' }} />
                                )}
                            </MenuItem>

Answer 1

您可以将 toggleTheme 和 theme 作为属性传递给 shallow rendering or mount 中的组件。

然后测试toggleTheme是否被调用MenuItem点击，同时检查props值是否变化。

示例测试代码

describe("Test of Header", () => {
    let component, props;
    beforeEach(() => {
        component = mount(<Header />);
    });

   it("Test toggle theme", () => {
        let theme = "light";
        let toggleTheme =  jest.fn(() => {
            let nextTheme = theme === "light" ? "dark" : "light";
            component.setProps({...props, theme: nextTheme});
        });
        props = {
            toggleTheme,
            theme,
        }
        component.setProps({...props});
        expect(component.props().theme).toEqual("light");
        component.find(MenuItem).simulate("click");
        expect(component.toggleTheme).toBeCalled();
        expect(component.props().theme).toEqual("dark");
   });
});

注意：请导入相应的模块，如果需要更改，请相应更改。

如何使用玩笑和酶测试切换主题按钮

how do I test toggle theme button using jest and enzyme

testing

unit-testing

reactjs

jestjs

enzyme