styled-components: Breaks toHaveStyle assertions in v5.2.0
Environment
## System:
- OS: macOS Mojave 10.14.6
- CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
- Memory: 1.61 GB / 16.00 GB
- Shell: 3.2.57 - /bin/bash
## Binaries:
- Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
- Yarn: 1.22.5 - ~/.yarn/bin/yarn
- npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm
- Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
- babel-plugin-styled-components: ^1.10.7 => 1.11.1
- styled-components: ^5.1.1 => 5.2.0
Reproduction
Steps to reproduce
Install v5.2.0 and try to test a React component that renders a StyledComponent with .toHaveStyle() from @testing-library/jest-dom/extend-expect.
e.g.:
import '@testing-library/jest-dom/extend-expect'
import React from 'react'
import { render } from '@testing-library/react'
it('renders with pointer cursor', () => {
const { container } = render(<MyComponentWithStyled />)
expect(container.firstChild).toHaveStyle('cursor: pointer')
})
Expected Behavior
Asserts element has style rule.
Actual Behavior
Always fail.
Notes
I upgraded all dependencies today and a lot of tests broke.
I first went to jest-dom repository and found a similar issue (https://github.com/testing-library/jest-dom/issues/295#issuecomment-702520302) but after upgrading dependency by dependency I noticed it’s actually only when I upgrade styled-components to v5.2.0 that it starts to fail.
About this issue
- Original URL
- State: open
- Created 4 years ago
- Reactions: 20
- Comments: 23 (3 by maintainers)
v5.2.1 fixed it for me.
Is this where we come to cry about update to v6 styled-components breaking our tests? I’ve updated from
styled-components@5.3.9to6.0.3and the matcher.toBeVisible()from the@testing-library/jest-dom/extendno longer works reliably.+1 for updates on the resolution
I found out that replacing the
toHaveStyleassertion bytoHaveStyleRule(check syntax in docs) everything works fine.Sorry, I’ll have to close this for now due to inactivity. I’m pretty sure this related to https://github.com/styled-components/jest-styled-components, right?
In general, this is also an issue that’s unrelated to the codebase in this repository itself, so there’s not really any way forward to resolve this. In other words, no change in this repository has any chance of resolving this, as it’s unrelated, which makes this issue open-ended potentially.
Unfortunately, same issue with
v5.3.0. Any workaround?v5.2.0 causes this problem but v5.2.1 does not.
So it seems that
toHaveStylewas working up until5.2.0-test.7, buttest.8broke it and started giving the errorTypeError: Cannot use 'in' operator to search for 'HTMLElement' in falsewhich made tests un-runnable, but this was fixed in
test.11but then it also madetoHaveStylereturn an empty style set.Will look into this shortly for v6, if the fix can be easily backported to v5 will do so
6.0.0-rc.1 — the same issue.
Can confirm- works! I’m on v5.3.0
It seems that updating to
6.1.0solves the problem.I wan’t to add an update regarding the cause of the problem and a possible workaround.
Styled-components uses multiple NPM entry points: https://github.com/styled-components/styled-components/blob/v5.3.10/packages/styled-components/package.json#L5
The default CommonJS entry point (
main) is for server-side rendering (SSR), and it does not handle stylesheet insertion like the browser entry point does. However, when using Jest and JSDOM, the environment is simulated to be similar to a browser. Jest resolves to the CJS entry point, which is why tests fail.A possible work around involves creating a Jest resolver (https://jestjs.io/docs/configuration#resolver-string) that points to the browser entry point in the
package.jsonfile (by possible I mean, I’m using that solution in my project, the only flaky part is that it depends on the NPM package structure and entry points, if a future version changes that I’ll need to fix the resolver).Essentially, this workaround is similar to the one described in this link: https://github.com/styled-components/styled-components/issues/3570#issuecomment-1537564119, but instead of using a mock, it utilizes the resolver feature.
I don’t know what the solution should be from the styled-components side. While I understand that they intend to build the package in a way that the default export consumed by NodeJS assumes SSR, this decision also affects the DX of people using Jest+JSDOM, which is a common testing environment in React. Ideally, the package should be exported differently to ensure it works out of the box. However, if that’s not an option, providing documentation and an official Jest resolver would help. Additionally, I haven’t tried using pure-ESM (using Jest’s experimental ESM support), so I don’t know if the problem persists with that setup.
@kitten I don’t know why this issue is closed, as the problem still exists today.
Sill i am facing the same issue in the version of “@testing-library/jest-dom”: “^5.16.1”.