Module not found: Can't resolve 'styled-components/lib/models/StyleSheet'

[nbar1]

Error:

./node_modules/jest-styled-components/src/utils.js Module not found: Can't resolve 'styled-components/lib/models/StyleSheet' in '/Users/nickbarone/repos/sap-react/node_modules/jest-styled-components/src'

styled-components @ 4.2.0 jest-styled-components @ 6.3.1

[davilima6]

Also with [email protected] and jest-styled-components@next (7.0.0-2).

[quantizor]

Are you still having problems with this? For s-c 4.2 the code path to try and require that file shouldn't even be taken... it's a legacy fallback for v3

[nbar1]

@probablyup Yes, still having this issue at the versions listed above. Odd thing is, I am able to import jest-styled-components on some tests, but not others. I have some tests with the same exact import list (below, commenting out all other code than the imports still throws the error)

import React from 'react';
import { fireEvent, cleanup } from 'react-testing-library';
import 'jest-dom/extend-expect';
import 'jest-styled-components';

Commenting out the jest-styled-components import results in the error not being thrown.

Edit to add: I just updated to [email protected] and still have this issue.

[quantizor]

I'm kind of at a loss... are there somehow multiple versions of the library installed in your project?

[nbar1]

@probablyup here is my package.json, I've removed node_modules and done a fresh yarn install, still having issues. FWIW, I only want to use toHaveStyleRule, so maybe there is a way to extract only that out an avoid this error?

{
	"name": "sap",
	"version": "0.1.0",
	"private": true,
	"dependencies": {
		"@fortawesome/fontawesome-pro": "^5.9.0",
		"@fortawesome/fontawesome-svg-core": "^1.2.19",
		"@fortawesome/free-regular-svg-icons": "^5.9.0",
		"@fortawesome/free-solid-svg-icons": "^5.9.0",
		"@fortawesome/pro-light-svg-icons": "^5.9.0",
		"@fortawesome/pro-solid-svg-icons": "^5.9.0",
		"@fortawesome/react-fontawesome": "^0.1.4",
		"axios": "0.18.0",
		"deep-equal": "^1.0.1",
		"deepmerge": "^3.2.0",
		"hex-to-rgba": "^2.0.0",
		"moment": "^2.24.0",
		"react": "^16.8.6",
		"react-dom": "^16.8.6",
		"react-grid-layout": "^0.16.6",
		"react-helmet-async": "^1.0.2",
		"react-portal": "^4.2.0",
		"react-router-dom": "4.3.1",
		"react-scripts": "3.0.1",
		"react-table": "6.8.6",
		"react-use": "^9.4.0",
		"styled-components": "^4.3.1",
		"weak-key": "^1.0.1"
	},
	"scripts": {
		"start": "nodemon mock-server/server & react-scripts start",
		"start-fe": "react-scripts start",
		"build": "react-scripts build",
		"test": "react-scripts test",
		"eject": "react-scripts eject",
		"mock-server": "nodemon server/server"
	},
	"proxy": "http://localhost:8080",
	"eslintConfig": {
		"extends": "react-app"
	},
	"browserslist": [
		">0.2%",
		"not dead",
		"not ie <= 11",
		"not op_mini all"
	],
	"devDependencies": {
		"@testing-library/react": "^8.0.1",
		"body-parser": "^1.19.0",
		"eslint-config-prettier": "^4.3.0",
		"eslint-plugin-html": "^5.0.5",
		"eslint-plugin-prettier": "^3.1.0",
		"eslint-plugin-react": "^7.13.0",
		"eslint-plugin-react-hooks": "^1.6.0",
		"express": "^4.17.1",
		"history": "^4.9.0",
		"jest-dom": "^3.5.0",
		"jest-styled-components": "^6.3.1",
		"minimist": "^1.2.0",
		"prettier": "^1.18.2"
	},
	"jest": {
		"collectCoverageFrom": [
			"src/**/*.{js,jsx}",
			"!src/index.js",
			"!src/helpers/*",
			"!src/themes/*",
			"!src/test-utils/*"
		]
	}
}

[nbar1]

@probablyup I was just able to get around this issue by importing jest-styled-components into my setupTests.js file instead of in each individual test.

[Dammic]

Hey, just wanted to say I have the same problem. Today I did some changes in my code and after that, this problem started occuring to me as well. We are using the 6.3.1 version.

I've tried to see what might be a cause, but that is really strange. It was working this morning and when I did some completely unrelated changes in my code (splitting components into parts mostly), not related to libraries version, it suddenly stopped working. When I stash those changes, it's working again.

I did not do any install between. Took a look at yarn.lock and there is only that one version installed. I've tried to clear the cache for yarn, but that didn't work in the end (I thought it works, but I've just uncommented the import of the library).

[stramel]

I just ran into this issue when upgrading to styledcomponents@^5.0.0-beta.0

[quantizor]

Yes you’ll need to update to jest-styled-components@beta for v5 support

[glaucopater]

As I cannot wait for a fix for this (and I also tried to get the styled-components/lib/models/StyleSheet from a previous version...), I found a workaround just using 'react-test-renderer': I removed the toHaveStyleRule use and I used the following

const modal = renderer.create(<MyReactComponent />).toJSON();
expect(modal.props.style).toStrictEqual([
      { backgroundColor: 'papayawhip' },
    ]);

And voila, now I can test my component also on React Native

[cyrus-za]

I've tried to see what might be a cause, but that is really strange. It was working this morning and when I did some completely unrelated changes in my code (splitting components into parts mostly), not related to libraries version, it suddenly stopped working. When I stash those changes, it's working again.

@Dammic I had the exact same scenario where I split out files in my React components (mainly splitting routes) and not touching any jest config, tsconfig or any packages. I tried upgrading to jest-sc@next and then had to select a version (chose beta.8 as that's the latest in the list) and it did not fix the problem. Then I found that beta.1 does fix it (via another git issue)

See the latest comments at styled-components/jest-styled-components#112

I hope it helps others.

PS. Running [email protected] with sc@4 (works with 5 too though) and typescript

[ericsoco]

FWIW to others, I got around this issue by not adding the styleSheetSerializer to my .storybook/config.js, but instead to the entry point to my storyshots suite.