Library is not applied to tests where the Renderer object was created in a 'describe'

[kolesker]

No style rules found on passed component

When renderer is created in the describe, jest-styled-components library is not applied. The snapshot will output as if the library is not imported, hence no styles, only class names with hashes. Therefore, 'no style rules' are found and test fails.

When moving the renderer creating inside the test (test/it), it works as it should and test passes.

Note: this was working in styled-components@ˆ4 and jest-styled-components@ˆ6, and after the upgrade our existing tests are breaking.

import styled from 'styled-components';

export const Label = styled.div`
  display: block;
`;
Label.displayName = 'Label';

// BEFORE - Not working
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';

import { Label } from './label';

describe('Label', () => {
  const tree = renderer.create(<Label />).toJSON();
  it('should match snapshot', () => {
    expect(tree).toHaveStyleRule('display', 'block');
  });
});

// AFTER - Working
import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';

import { Label } from './label';

describe('Label', () => {
  it('should match snapshot', () => {
    const tree = renderer.create(<Label />).toJSON();
    expect(tree).toHaveStyleRule('display', 'block');
  });
});

"styled-components": "^5.3.6", "jest-styled-components": "^7.1.1", "babel-plugin-styled-components": "^2.0.7",