如何使用 Enzymes shallow 和 styled-component 的 ThemeProvider 测试样式化组件？

Posted 2023-03-16

【中文标题】如何使用 Enzymes shallow 和 styled-component 的 ThemeProvider 测试样式化组件？

【英文标题】：How to test styled components using Enzymes shallow and styled-component's ThemeProvider?

【发布时间】：2018-04-01 20:50:35

【问题描述】：

有没有办法使用酶浅层方法和样式组件的 ThemeProvider 包装器来测试样式组件的文本内容？

class MyComponent extends React.component 
    ...
    render()
        return (
            <StyledComponent_A>
               <StyledComponent_B>
                   some text
               </StyledComponent_B>
            </StyledComponent_A>
        );
    


test('text is \'some text\'', () => 
    const wrapper = shallow(
    <ThemeProvider theme=theme>        
        <MyComponent />
    </ThemeProvider
    );
    const text = wrapper.dive().find(StyledComponent_B).text();
    expect(text).toBe('some text');
);

【问题讨论】：

我相信这只适用于 Enzyme 的 mount()。

【参考方案1】：

使用浅你的 text() 输出类似于<styled.section />

所以你需要使用children()，来获取样式元素的内容。 像这样的：

const text = wrapper.find(StyledComponent_B).children().text();
expect(text).toBe('some text');