styled-components: window.getComputedStyled doesn't work with v5.2.0 and Testing Library/JSDOM

The problem is that Jest does not use the browser field, if you don’t want to break everything, you can just use that trick:

// jest.config.js

module.exports = {
  moduleNameMapper: {
    'styled-components':
      '<rootDir>/node_modules/styled-components/dist/styled-components.browser.cjs.js',
  },
}

i get exact problem also using .toHaveStyle, in 5.1.1 version test pass but 5.2 no. i follow this thread.

The solution from @gregberge works fine for me as well.

@willianjusten try using

module.exports = {
  moduleNameMapper: {
    '^styled-components':
      '<rootDir>/node_modules/styled-components/dist/styled-components.browser.cjs.js',
  },
}

without the ^ it will also map jest-styled-components to styled-components.browser.cjs.js

toBeVisible is not working for me anymore in testing-library

      15 |     );
      16 | 
    > 17 |     expect(getByText('Item 1')).not.toBeVisible();
         |                                     ^
      18 |     fireEvent.click(getByText('Click to open'));
      19 |     expect(getByText('Item 1')).toBeVisible();
      20 |   });

It seems like v5.2.1 has solved it (for us at least).

@dfernandez79 It looks like the bug reappeared in the styled-component v6. It blocked me after upgrading to v6.0.3. The solution posted by @tbergquist-godaddy solved the issue in my case.

The solution from @gregberge works fine for me as well.

@willianjusten try using

module.exports = {
  moduleNameMapper: {
    '^styled-components':
      '<rootDir>/node_modules/styled-components/dist/styled-components.browser.cjs.js',
  },
}

without the ^ it will also map jest-styled-components to styled-components.browser.cjs.js

@gregberge that works fine for cases using toHaveStyle or toBeDisabled but inside the snapshots we’re losing the styles that comes from jest-styled-components…

I’ve updated the test app used for the bug report to v5.2.1: https://github.com/dfernandez79/styledcomp-bug-example

And the bug seems to be solved. Closing this issue 😄

I think it should be mentioned in docs, @tbergq has the final solution!

Thanks @tbergq , it’s working perfectly now =D

@fooloomanzoo Yeah, toBeVisible using getComputedStyle internal so might be that’s something broken.

This PR is my reproduction resource: Update styled-components: 5.1.1 → 5.2.0 (minor)

I have OSS project Create React App TypeScript Todo Example 2020 and I also facing issue about toBeVisible of @testing-library/jest-dom custom jest matchers.(it’s always return true).

• Parent Commit(Not Broken) of Update styled-components: 5.1.1 → 5.2.0 (minor)(Broken)

Parent Commit CI result is all green, but Update styled-components to version 5.2.0 Commit CI result showed break yarn test(jest + react-testing-library) at the not.toBeVisible() assertion.

We’re having the exact same issue (we’ve just started to migrate to styled components from JSS), so I’ll follow this thread closely.