jest-styled-components: jest-styled-components is breaking with new 5.0.0 styled-components

toHaveStyleRule expectations are failing after upgrading styled components to 5 and jest-styled-components to 7.

That error you see has been resolved when you update jest-styled-components to 7.0.0

yup, styled-components 5.0 + jest-styled-components 7.0 + Typescript also not happy:

error TS2339: Property 'toHaveStyleRule' does not exist on type 'JestMatchersShape<Matchers<void, HTMLElement>, Matchers<Promise<void>, HTMLElement>>'

I have upgraded to 7.0.0 and are experiencing the exact samt problem.

thanks @mirco312312 - since it took me more than a few minutes to solve, here was the diff in my package.json that worked:

replaced: "setupFiles": ["./spec/setupTests.js"], with: "setupFilesAfterEnv": ["<rootDir>/spec/setupTests.js"],

after two months, the problem is still existing. I have to use styled-components v4.4.1 and jest-styled-components 6.3.3 due to this problem.

Not working with react-native v0.61.5 and styled-components v5 / jest-styled-components v7. Get TypeError: global.beforeEach is not a function

#302 does not fix the issue. jest-styled-components looks for the presence of “sc-” anywhere in the component id. babel-plugin-styled-components does not guarantee that the component id will contain the “sc-” substring.

The issue is that babel-plugin-styled-components only applies the “sc-” prefix if it detects the component ID has an invalid css classname, specifically whether it is prefixed by a digit.

Temporarily fixed in my project via patch-package and the following patch for version 1.10.7 which modifies the getComponentId function to ensure it contains “sc-”:

diff --git a/node_modules/babel-plugin-styled-components/lib/visitors/displayNameAndId.js b/node_modules/babel-plugin-styled-components/lib/visitors/displayNameAndId.js
index b67a1c8..2b41702 100644
--- a/node_modules/babel-plugin-styled-components/lib/visitors/displayNameAndId.js
+++ b/node_modules/babel-plugin-styled-components/lib/visitors/displayNameAndId.js
@@ -127,7 +127,8 @@ var getNextId = function getNextId(state) {
 
 var getComponentId = function getComponentId(state) {
   // Prefix the identifier with a character because CSS classes cannot start with a number
-  return `${(0, _prefixDigit.default)(getFileHash(state))}-${getNextId(state)}`;
+  var componentId = `${(0, _prefixDigit.default)(getFileHash(state))}-${getNextId(state)}`;
+  return componentId.indexOf('sc-') >= 0 ? componentId : `sc-${componentId}`;
 };
 
 var _default = function _default(t) {

I’m also experiencing issues for tests that used to work on v4.4… places where toHaveStyleRule is used are generating: Error: No style rules found on passed Component

related to this issue

I had this issue with styled-components@5.3.1 and jest-styled-components@7.0.5. Turns out that in addition to importing jest-styled-components in setupTests.js (which is run once before all tests) I was also importing it in one other test which was breaking all tests.

Removing the second import resolved my issue.

for me worked with this versions: "styled-components": "^5.2.3" "jest-styled-components": "^7.0.3"

import '@testing-library/jest-dom/extend-expect'
import 'jest-styled-components'
import { screen } from '@testing-library/react'

// ...

expect(screen.getByTitle('some-title')).toHaveStyleRule('color', 'white')

On that note, is it better to just remove the class name filtering entirely?

@lucianomlima are you using global installation approach?

Note the deprecation warning here: https://jestjs.io/docs/en/configuration#setupfilesafterenv-array

When importing from a file referenced via jest.setupFilesAfterEnv its working for me with v5/v7.

@Thomazella yes we dropped support for v4 with the v7 release. The internals changed a lot between v4 and v5 and the library needed incompatible updates.

However theres a few other errors occurring for me after upgrading, would be nice to see the changelog to 7.0.0

The fix I was referring to was a fix for the babel plugin.

Temporary? workaround for "styled-components": "^5.1.0" and "jest-styled-components": "^7.0.2" is to render the component inside the test.

• reference https://styled-components.com/docs/tooling#tohavestylerule
• I used react-test-renderer but I tested it for enzyme

failing test

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

import styled from 'styled-components'

const Button = styled.button`
  color: red;
`

describe('Button', () => {
    const app = renderer.create(<Button />).toJSON()
    it('Button has red color', () => {
        expect(app).toHaveStyleRule('color', 'red');
    });

});

workable test

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

import styled from 'styled-components'

const Button = styled.button`
  color: red;
`

describe('Button', () => {
    it('Button has red color', () => {
        const app = renderer.create(<Button />).toJSON()
        expect(app).toHaveStyleRule('color', 'red');
    });
});

Thanks. I tried jest-styled-components v6 is working fine with styled-components v4.

Can confirm latest is broken with styled-components 4.4.1. Does a version rollback fix?

edit: can confirm version v6.3.4 works with styled-components 4.4.1