toHaveStyle not picking up styles from styled-components

• @testing-library/jest-dom version: 5.11.4

• react-testing-library version: 10.4.9 (checked in yarn.lock)

• node version: 13.7.0
• npm (or yarn) version: 1.22.4 (yarn)

Relevant code or config:

import '@testing-library/jest-dom'
import React from 'react'
import { render } from '@testing-library/react'
import { Button } from '.'; // Internally, "Button" is styled using styled-components
import { defaultTheme } from '../../themes'

test('renders button variants correctly', () => {
  const { container, getByTestId } = render(
    <Button theme={defaultTheme} data-testid='subBtn' variant='secondary' >
      Decrease count
    </Button>
  )
  // Test styles
  expect(getByTestId(/subBtn/)).toHaveStyle('background-color: transparent')
})

What you did:

Trying to test the final styles for a component using “toHaveStyle” matcher. This test worked fine before I yarn upgraded the project.

What happened:

After upgrading my dependencies, some tests stopped working (the ones including toHaveStyle matcher). Other tests (.toBeInTheDocument, .toHaveClassName…) still work fine. It appears to be picking the component base styles (not considering styles applied by classnames / styled-components), The error log looks like this:

  ● renders button variants correctly

    expect(element).toHaveStyle()

    - Expected

    - background-color: transparent;
    + background-color: ButtonFace;

      12 |   )
      13 |   // Test styles
    > 14 |   expect(getByTestId(/subBtn/)).toHaveStyle('background-color: transparent')
         |                                 ^
      15 | })

I never apply a “ButtonFace” style, this makes me think it’s jest that is not picking up the stylesheets or the styles for some reason. also relevant: The Button component works just fine, tested imported in other projects and with playroom-js. It’s just the tests that are not getting the styles properly (and previously did).

Reproduction:

Unfortunately, this happens in a private repo (not the owner), so it’s kind of complicated to provide a full demo. If you need any more information (tests setup, package.json, etc) I can gladly provide it.

Problem description:

Tests were working fine previous to running “yarn upgrade”, which updated the testing-related libraries to newer versions

Suggested solution:

I’m not sure how could this be solved, I’m guessing the newer versions of the libraries introduced some breaking changes or changes in configuration which I am not addressing