When installing jest-styled-components@6.3.1 in Chapter 4 npm raises a resolution error stating jest-styled-components@6.3.1 is not compatible with styled-components@4.4.1.

I tried upgrading both components to the latest versions but this caused the test
expect(mounted).toHaveStyleRule(‘width’, ‘100%’);
and any subsequent uses of toHaveStyleRule to fail, not finding the style rules in the object.

The error was resolved by using the additional --legacy-peer-deps flag when installing jest-styled-components@6.3.1 which gives toHaveStyleRule to work as expect. However a “command sh -c jest” error is raised when the tests are run although all the tests pass.

Don’t you just love npm/javascript packages!

Cheers

John

Initial npm error report below:

npm resolution error report

2021-03-08T02:14:00.603Z

While resolving: test-driven-carousel@1.0.0
Found: styled-components@4.4.1
node_modules/styled-components
styled-components@"^4.1.1" from the root project

Could not resolve dependency:
peer styled-components@"^2.0.0 || ^3.0.2" from jest-styled-components@6.3.1
node_modules/jest-styled-components
dev jest-styled-components@“6.3.1” from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
“code”: “ERESOLVE”,
“current”: {
“name”: “styled-components”,
“version”: “4.4.1”,
“whileInstalling”: {
“name”: “test-driven-carousel”,
“version”: “1.0.0”,
“path”: “/home/scooter/Projects/test-driven-carousel”
},
“location”: “node_modules/styled-components”,
“dependents”: [
{
“type”: “prod”,
“name”: “styled-components”,
“spec”: “^4.1.1”,
“from”: {
“location”: “/home/scooter/Projects/test-driven-carousel”
}
}
]
},
“edge”: {
“type”: “peer”,
“name”: “styled-components”,
“spec”: “^2.0.0 || ^3.0.2”,
“error”: “INVALID”,
“from”: {
“name”: “jest-styled-components”,
“version”: “6.3.1”,
“whileInstalling”: {
“name”: “test-driven-carousel”,
“version”: “1.0.0”,
“path”: “/home/scooter/Projects/test-driven-carousel”
},
“location”: “node_modules/jest-styled-components”,
“dependents”: [
{
“type”: “dev”,
“name”: “jest-styled-components”,
“spec”: “6.3.1”,
“from”: {
“location”: “/home/scooter/Projects/test-driven-carousel”
}
}
]
}
},
“peerConflict”: null,
“strictPeerDeps”: false,
“force”: false
}