jest-emotion: TypeError: node.getAttribute is not a function

Current behavior:

On some specific React components/trees, the jest-emotion serializer throws an error: TypeError: node.getAttribute is not a function.

If I comment out the jest-emotion serializer from setupTests.js the snapshot is written properly.

To reproduce:

1. Clone https://github.com/quid/refraction
2. cd refraction
3. yarn
4. git checkout 6b7a3f0746510779191d5547f357d9afca99227b
5. cd packages/expandable-table
6. yarn test

Expected behavior:

A snapshot should be written.

Environment information:

• react version: 16
• emotion version: 10.0.15

[Andarist]

This comma is not insignificant. We can confirm this by inspecting the transformed output of this JSX:

// input
const component = renderer.create(
  <ThemeProvider theme={theme}>
    <Div color-mobile="blue">Honorable</Div>,
  </ThemeProvider>
);

// output
const component = renderer.create(
  React.createElement(
    ThemeProvider,
    { theme: theme },
    React.createElement(Div, { "color-mobile": "blue" }, "Honorable"),
    ","
  )
);

As we may see here - the comma is present in the children variadic argument of the React.createElement call. This means that you have passed an array of nodes to the toHaveStyleRule and that is a problem because it won’t be able (and shouldn’t be able) to handle this.

So I don’t think this is a problem in our code - but what we could do is to introduce an explicit error message for a situation like this.

[liamcmitchell-sc]

I managed to track this down to serializing fragments in deep mode: https://github.com/emotion-js/emotion/pull/1477/files#diff-1c3f3af1ec5f3c0a2955f0700c9520f6R115-R129