compiled icon indicating copy to clipboard operation
compiled copied to clipboard

Asserting CSS shorthands in the jest matcher doesn't work

Open itsdouges opened this issue 5 years ago • 0 comments

Because of the introduction of #320 the jest matcher now will fail when asserting some short hands, for example:

const Component = styled.div`
  background: red;
`;

// ...

expect(actual).toHaveCompiledCss('background', 'red');

Would fail. But:

expect(actual).toHaveCompiledCss('background-color', 'red');

Would pass. Not ideal.

We need to:

  • move from css to postcss in the matcher and then utilise the expand plugin we've written in some form.
  • figure out how to handle some edge cases, for example:
const Component = styled.div`
  margin: 0 auto;
  margin-left: 10px;
`;

expect(actual).toHaveCompiledCss('margin', '0 auto');

Will fail. Is this OK?

itsdouges avatar Oct 19 '20 10:10 itsdouges