jest toMatchSnapshot removes inline styles

Question

I have a consistent repro with the following jest test:

const App = () => {
  return (
    <div style={{ background: 'linear-gradient(90deg, red, blue)'}}>Loooo</div>
  )
}

Then trying to take a snapshot in a unit test produces:

test('match snapshot', () => {
  const {container}= render(<App />);
  expect(container).toMatchSnapshot();
});

Produces this snapshot:

exports[`match snapshot 1`] = `
<div>
  <div>
    Loooo
  </div>
</div>
`;

But!!!

If we change linear-gradient to something else like this:

const App = () => {
  return (
    <div style={{ background: 'red'}}>Loooo</div>
  )
}

We get what we expect:

exports[`match snapshot 1`] = `
<div>
  <div
    style="background: red;"
  >
    Loooo
  </div>
</div>
`;

Does anyone one know what kind of treachery is this? Why linear-gradient is being cut out?

Answer 1

Ok, apparently cssstyle does not parse the linear-gradient and returns undefined.

Filed an issue