Breaks toHaveStyle assertions in v5.2.0

[gugiserman]

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 (testing-library/jest-dom#295 (comment)) 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.

[barucAlmaguer]

Same problem here (I raised the issue at jest-dom library jest-dom#295).

I fixed it temporarily by downgrading to styled-components@5.1.1

[yannickcornaille]

This problem also occurs in tests using getComputedStyle(). As @barucAlmaguer I fixed it by downgrading to styled-components@5.1.1

[Lazyuki]

So it seems that toHaveStyle was working up until 5.2.0-test.7, but test.8 broke it and started giving the error

TypeError: Cannot use 'in' operator to search for 'HTMLElement' in false

which made tests un-runnable, but this was fixed in test.11 but then it also made toHaveStyle return an empty style set.

[dfernandez79]

See also the discussion thread here: #3262

[tu4mo]

v5.2.1 fixed it for me.

[DylanJu]

v5.2.0 causes this problem but v5.2.1 does not.

[thismarcoantonio]

For some reason 5.2.1 doesn't work for me either, I'll just skip this tests for now, I'll wait for next versions.

[wilomgfx]

For some reason 5.2.1 doesn't work for me either, I'll just skip this tests for now, I'll wait for next versions.

Same it does not work for me on 5.2.1

[christemple]

As of 5.2.1 our tests are now broken, likely caused by 710717a

I can only assume it's because styled-components thinks it's in a browser environment during our Jest/React Testing Library tests because JSDOM replicates the window in a node environment for jest tests by default.

Based on @probablyup's comment here

Looking at the code I don't think this will break anything, so long as people don't have a window object in their SSR environment that has an HTMLElement property. That's the heuristic we use for our IS_BROWSER check.

I just added a console log to my Jest config and it says it does exist:

console.log('HTMLElement in window: ', 'HTMLElement' in window);
=> HTMLElement in window:  true

I assume this is unwanted behaviour?
If so is there anything I can do to mitigate?

[AhmedBHameed]

Unfortunately, same issue with v5.3.0.
Any workaround?

[kitten]

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.

[TranquilMarmot]

We're seeing this as well, and it seems unrelated to jest-styled-components. The error starts with v5.2.1 and still persists in version v5.3.0

expect(getByTitle('Close drawer')).toBeVisible();

Passes in v5.2.0, but fails starting v5.2.1 with Received element is not visible. Removed all references to jest-styled-components and it still fails.

[kSharma-rediker]

Sill i am facing the same issue in the version of "@testing-library/jest-dom": "^5.16.1".

[donaldpipowitch]

I see this issue starting with v5.3.0. Note that I have this also in 5.3.0, so it seems to be different then #3570.

[akhar]

6.0.0-rc.1 — the same issue.

[dfernandez79]

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.json file (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: #3570 (comment), 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.

[quantizor]

Will look into this shortly for v6, if the fix can be easily backported to v5 will do so

[mariush2]

@probablyup Any news on this? Trying to upgrade to v6 now but it's causing all my toHaveStyle tests to fail

[bcamarneiro]

I found out that replacing the toHaveStyle assertion by toHaveStyleRule (check syntax in docs) everything works fine.

[crs1138]

Is this where we come to cry about update to v6 styled-components breaking our tests? I've updated from styled-components@5.3.9 to 6.0.3 and the matcher .toBeVisible() from the @testing-library/jest-dom/extend no longer works reliably.

+1 for updates on the resolution

[lkbansal1993]

I have used styled-components@6.0.1 so expect(container.querySelector('div')).toHaveStyle(background: ${background}); not working can any one give the solution.
when I used styled-components@5.3.9 then working fine.

can anyone suggest whats required for that then it's working newer version of style component.

[damienmutt]

It seems that updating to 6.1.0 solves the problem.

[tchin8]

I found out that replacing the toHaveStyle assertion by toHaveStyleRule (check syntax in docs) everything works fine.

Can confirm- works! I'm on v5.3.0