Search code examples
react-nativejestjsstyled-components

How to test styled-components with Jest in React-Native project?

In my project, I have a component styled with styled-components.I want to test it using jest:

describe('<Button/> tests', () => {
    it('should render button', () => {
        const testingComponent =  renderer.create(<Button/>);
    })
});

This code fails with:

 ● Test suite failed to run

    TypeError: _styledComponents.default.View is not a function

      1 | import styled from 'styled-components';
      2 |
    > 3 | const Container = styled.View`
        |                          ^
      4 |   flex: 1;
      5 |   align-self: center;
      6 | `;

SO jest does not recognize styled.View and I don't know why. What I'm doing wrong and how can I test my components, which I styled with styled-components?

Solution

  • in order to avoid such errors is needed to specify styled components in a such way:

    const Container = styled(View)

    This syntax helped me