如何使用Enzymes浅和样式组件的ThemeProvider测试样式组件?

时间:2017-10-20 16:16:54

标签: reactjs enzyme styled-components

有没有办法使用酶浅层方法和样式组件的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');
});

1 个答案:

答案 0 :(得分:1)

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

因此,您需要使用 children()来获取样式元素的内容。 像这样:

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