Test-driven Development with React/

...

/

Making Style Assertions for Styled Components Testing

Making Style Assertions for Styled Components Testing

In this lesson you’ll learn to test the styled-components by making assertions about styles using various Jest methods.

We'll cover the following...

Making assertions about styles

The following is how to make different assertions about styles:

  • To make assertions about the styles that styled-components generate, you’ll need the Jest styled-components plugin. Install jest-styled-components with npm:

    $ npm install --save-dev jest-styled-components@6.3.1
+ jest-styled-components@6.3.1

  • Then you’ll need to bring in the plugin before running your tests:

Press + to interact
import Adapter from 'enzyme-adapter-react-16'; 
import { configure } from 'enzyme';
import 'jest-styled-components';
configure({ adapter: new Adapter() });
  • Now you have a new assertion at your disposal, toHaveStyleRule(). Add a test to the describe('Img') block to make sure that the expected styled.img styles are coming through:
...