toHaveStyleRule with @media rule breaks after styled-components update

[jkettmann]

We recently updated styled-components to v6 and something caused some of our tests to fail. I was able to reproduce the issue in this repository (you can also run it here on Replit). Here's the example test:

import 'jest-styled-components';
import { render, screen } from '@testing-library/react';
import { styled } from 'styled-components';

const StyledDiv = styled.div`
  @media (min-width: 400px) {
    color: red;
  }
`;

function MyComponent() {
  return <StyledDiv data-testid="styled-div" />;
}

describe('toHaveStyleRule media test', () => {
  test('has red color on larger devices', async () => {
    render(<MyComponent />);

    const styledDiv = screen.getByTestId('styled-div');
    expect(styledDiv).toHaveStyleRule('color', 'red', {
      media: '(min-width: 400px)',
    });
  });
});

This is the error I'm getting:

The problem seems to be that this check in toHaveStyleRule rule[option] === options[option].replace(/:\s/g, ":") is not working anymore.

const getAtRules = (ast, options) => {
  return Object.keys(options)
    .map((option) =>
      ast.stylesheet.rules
        .filter((rule) => rule.type === option && rule[option] === options[option].replace(/:\s/g, ":"))
        .map((rule) => rule.rules)
        .reduce((acc, rules) => acc.concat(rules), [])
    )
    .reduce((acc, rules) => acc.concat(rules), []);
};

Before rule.option didn't have a whitespace. I'm not sure what changed but now it looks like this:

I'm happy to create a PR but as I said, I'm not sure what the original cause of the whitespace not being removed is.

Edit: To run the tests in the Replit simply run npm run test.

[jkettmann]

Removing the whitespace from the ast rule as well should be a simple and backwards compatible change:

const getAtRules = (ast, options) => {
  return Object.keys(options)
    .map((option) =>
      ast.stylesheet.rules
        .filter((rule) => rule.type === option && rule[option].replace(/:\s/g, ":") === options[option].replace(/:\s/g, ":"))
        .map((rule) => rule.rules)
        .reduce((acc, rules) => acc.concat(rules), [])
    )
    .reduce((acc, rules) => acc.concat(rules), []);
};

[jkettmann]

If someone else encounters the same problem before this issue is closed a simple workaround is to add a second whitespace as in this example:

describe('toHaveStyleRule media test', () => {
  test('has red color on larger devices', async () => {
    render(<MyComponent />);

    const styledDiv = screen.getByTestId('styled-div');
    expect(styledDiv).toHaveStyleRule('color', 'red', {
      media: '(min-width:  400px)',
    });
  });
});

Note the two whitespaces in min-width: 400px

[hemerson-git]

If someone else encounters the same problem before this issue is closed a simple workaround is to add a second whitespace as in this example:

describe('toHaveStyleRule media test', () => {
  test('has red color on larger devices', async () => {
    render(<MyComponent />);

    const styledDiv = screen.getByTestId('styled-div');
    expect(styledDiv).toHaveStyleRule('color', 'red', {
      media: '(min-width:  400px)',
    });
  });
});

Note the two whitespaces in min-width: 400px

You saved my life, I'm about 2 days trying to fix that issue.
Thank you so much.

[jkettmann]

@hemerson-git I'm glad this was helpful 🙂

[caribou-code]

Is there a plan to fix this in the package? In my case, media query strings are stored in a theme with a single whitespace after the colon, so this is a pain to manipulate the string every time I run a test like this.

[odanielsantana]

Same problem here.

If someone else encounters the same problem before this issue is closed a simple workaround is to add a second whitespace as in this example:

describe('toHaveStyleRule media test', () => {
  test('has red color on larger devices', async () => {
    render(<MyComponent />);

    const styledDiv = screen.getByTestId('styled-div');
    expect(styledDiv).toHaveStyleRule('color', 'red', {
      media: '(min-width:  400px)',
    });
  });
});

Note the two whitespaces in min-width: 400px

This helped so much broh! Thank you!

[stevematney]

If someone else encounters the same problem before this issue is closed a simple workaround is to add a second whitespace as in this example:

describe('toHaveStyleRule media test', () => {
  test('has red color on larger devices', async () => {
    render(<MyComponent />);

    const styledDiv = screen.getByTestId('styled-div');
    expect(styledDiv).toHaveStyleRule('color', 'red', {
      media: '(min-width:  400px)',
    });
  });
});

Note the two whitespaces in min-width: 400px

Truly unhinged and powerful solution. 🍺

[stevematney]

There are definitely some other inconsistent spacing scenarios. I've had to rely on toMatchSnapshot to match the spacing in my modifiers for more complex rule tests. Here are some examples where I've identified spaces with ⟎:

.c1⟎~.c3 {
  ...
}

.c1:focus~.c3 { // no spaces in this one
  ...
}

.c1.c1:disabled⟎~.c3 {
  ...
}

[Katreque]

If someone else encounters the same problem before this issue is closed a simple workaround is to add a second whitespace as in this example:

describe('toHaveStyleRule media test', () => {
  test('has red color on larger devices', async () => {
    render(<MyComponent />);

    const styledDiv = screen.getByTestId('styled-div');
    expect(styledDiv).toHaveStyleRule('color', 'red', {
      media: '(min-width:  400px)',
    });
  });
});

Note the two whitespaces in min-width: 400px

Thank you! Hopefully this issue can be solved soon. 🙏🏼