How to test with @testing-library/react or jsdom?

[daangnDylan]

Bug report

Describe the bug

It seems that stitches can not inject styles into JSDOM.

To Reproduce

// component.tsx
<Title data-testid="title">hello, world</Title>

const Title = styled('h1', {
  opacity: 0,
});

// component.test.tsx
expect(screen.getByTestId('title')).toHaveStyle({ opacity: 0 }); // error. It has empty style

// console to debug
console.log(screen.getByTestId('title'));
/*
CSSStyleDeclaration {
  '0': 'display',
  '1': 'visibility',
   _values: { display: 'block', visibility: 'visible' },
   _importants: { display: '', visibility: undefined },
   _length: 2,
   _onChange: [Function (anonymous)]
}
*/

But if add inline style, it works well.

<Title data-testid="title" style={{ opacity: 0 }}>hello, world</Title>

expect(screen.getByTestId('title')).toHaveStyle({ opacity: 0 }); // success

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Package version

"@stitches/react": "^1.2.5",
"react: 17.0.2",
"@testing-library/dom": "^8.1.0",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.0.0",

[mryechkin]

Just a heads up that there's a discussion on this topic from a bit earlier as well

[tigerabrodi]

@daangnDylan I don't know your use case to the fullest, though I'd highly suggest not testing the implementation details.

I'd advise trying toBeVisible?

.not.toBeVisible()

It should work I hope: https://github.com/testing-library/jest-dom#tobevisible

That way you are testing it from the user's perspective :clap: :smile: :blue_heart: :sunglasses: :rocket:

[daangnDylan]

@tigerabrodi I know what you mean, but the problem is just PoC of jsdom error. Otherwise, I appreciate your advice. thanks

[joaojustodev]

I have the same error, create a issue about this too...

i create the same component with styled component and make the same test and passed.

when you see the computed styles the styled components appear the correct styles.

my issue

[rogerluiz]

I have the same error, and i need to test the css, it seems that the stitches team is not paying attention to these errors