Unparseable snapshot generated

[aravindet]

I'm testing a component which passes a ReactElement as a prop to another ReactElement:

// MyPage.js
class MyPage {
  render() {
    return <Page footer={<Text>Foo</Text>} /> { /* some children */ }</Page>;
  }
}

// MyPage.test.js
expect( <MyPage />, 'when rendered', 'to match snapshot');

It keeps regenerating and overwriting the snapshot file on every run.

It turns out that the generated snapshot file contains a syntax error, causing require() to return null, and the loader to assume there's no snapshot. There's string is footer:{$$typeof:, _owner: null, ... (note the :,). This might be because the $$typeof property of a ReactElement is a Symbol.

Merely removing the $$typeof property from the snapshot did not fix things; there are several other differences between elements in the children vs. elements in other props:

• children don't have the $$typeof, _owner, _store, key or ref attributes
• the type property of children is a string, but for other props it's an object with $functype, name and args properties

[bruderstein]

Thanks for the report. This looks like a bug in the serialisation, that it doesn't "notice" that the attribute value is a ReactElement and therefore should be serialised / deserialised differently.

I think there's a secondary issue that the serialisation library isn't handling Symbols - i don't think it would work anyway because there's no way to serialise a Symbol that isn't created with Symbol.for(...)

We'll add support for Symbols in general (in js-writer), and add a fix for props as ReactElements. too.

[bruderstein]

Fixed in v5.0.1.