UI Tests with stitches button component

[joaojustodev]

Bug report

Cannot test stitches component style

Describe the bug

I create a component with a red background and when I go to test and I want to check if it has a style with a red background the tests do not pass, but with styled components they pass smoothly, I compared two logs of the computed styles of the button created with stitches and styled components, you can if you observe that the stitches log does not appear the background with value red.

Screenshots

TEST WITH STITCHES

import React from "react";
import { styled } from "@stitches/react";

export const ButtonStyled = styled("button", {
  background: "red"
})

const Button = () => {
  return <ButtonStyled>Click me</ButtonStyled>
};

export default Button;

// Tests

it("render button with background red", () => {
  const { getByRole, debug } = render(<Button />);

  const button = getByRole("button");

  expect(button).toHaveStyle("background: red;")

  + Expected
    + background: red;
    -  background: "";
})

TEST WITH STYLED COMPONENTS

import React from "react";
import styled from "styled-components";

export const ButtonStyled = styled.button`
    background: red;
`;

const Button = () => {
  return <ButtonStyled>Click me</ButtonStyled>
};

export default Button;

// Tests

it("render button with background red", () => {
  const { getByRole, debug } = render(<Button />);

  const button = getByRole("button");

  expect(button).toHaveStyle("background: red;");

  // - Expected
  //    - background: red;
  //    + background: red;
});

button computedStyles log WITH STITCHES

_values: {
        'font-family': '-webkit-small-control',
        font: '-webkit-small-control',
        'text-rendering': 'auto',
        'letter-spacing': 'normal',
        'word-spacing': 'normal',
        'line-height': 'normal',
        'text-transform': 'none',
        'text-indent': '0',
        'text-shadow': 'none',
        display: 'inline-block',
        'text-align': 'center',
        'align-items': 'flex-start',
        cursor: 'default',
        color: 'ButtonText',
        padding: '2px 6px 3px 6px',
        'padding-top': '2px',
        'padding-right': '6px',
        'padding-bottom': '3px',
        'padding-left': '6px',
        'border-top-width': '2px',
        'border-right-width': '2px',
        'border-bottom-width': '2px',
        'border-left-width': '2px',
        'border-width': '2px',
        'border-top-style': 'outset',
        'border-right-style': 'outset',
        'border-bottom-style': 'outset',
        'border-left-style': 'outset',
        'border-style': 'outset',
        'border-top-color': 'buttonface',
        'border-right-color': 'buttonface',
        'border-bottom-color': 'buttonface',
        'border-left-color': 'buttonface',
        'border-color': 'buttonface',
        border: '2px outset buttonface',
        'border-top': '2px outset buttonface',
        'border-left': '2px outset buttonface',
        'border-right': '2px outset buttonface',
        'border-bottom': '2px outset buttonface',
        'background-color': 'ButtonFace',
        'box-sizing': 'border-box',
        '--sxs': '6',
        visibility: 'visible'
      },

button computedStyles log WITH STYLED COMPONENTS

  _values: {
        'font-family': '-webkit-small-control',
        font: '-webkit-small-control',
        'text-rendering': 'auto',
        'letter-spacing': 'normal',
        'word-spacing': 'normal',
        'line-height': 'normal',
        'text-transform': 'none',
        'text-indent': '0',
        'text-shadow': 'none',
        display: 'inline-block',
        'text-align': 'center',
        'align-items': 'flex-start',
        cursor: 'default',
        color: 'ButtonText',
        padding: '2px 6px 3px 6px',
        'padding-top': '2px',
        'padding-right': '6px',
        'padding-bottom': '3px',
        'padding-left': '6px',
        'border-top-width': '2px',
        'border-right-width': '2px',
        'border-bottom-width': '2px',
        'border-left-width': '2px',
        'border-width': '2px',
        'border-top-style': 'outset',
        'border-right-style': 'outset',
        'border-bottom-style': 'outset',
        'border-left-style': 'outset',
        'border-style': 'outset',
        'border-top-color': 'buttonface',
        'border-right-color': 'buttonface',
        'border-bottom-color': 'buttonface',
        'border-left-color': 'buttonface',
        'border-color': 'buttonface',
        border: '2px outset buttonface',
        'border-top': '2px outset buttonface',
        'border-left': '2px outset buttonface',
        'border-right': '2px outset buttonface',
        'border-bottom': '2px outset buttonface',
        'box-sizing': 'border-box',
        'background-color': 'red',
        background: 'red',
        visibility: 'visible'
      },

System information

• OS: Windows
• Browser: chrome
• Node: v16.15.0
• Version of Stitches: ^1.2.8
• Version of StyledComponent: ^5.3.5

[JuniorAlbuquerque]

Hi, any updates here?

[joaojustodev]

I try import the stitches config file from setup jest, but dont cant render the styles.

[rogerluiz]

i have the same issue, how to resolve this?

[zihaohe-p44]

having the same issue, any update on this?