react snapshot

[madisvain]

How would you go about using something like React Snapshot for pre-rendering applications?

Currently mirror also overrides the render method:
https://github.com/mirrorjs/mirror/blob/master/src/render.js

and so does react snapshot:
https://github.com/geelen/react-snapshot/blob/master/src/index.js

[llh911001]

In Mirror's render method, if you are in the browser env, your component will be rendered to the document; while if not, the Root component will be returned.

So, basically you can invoke reactSnapshot.render(mirror.render(YourComponent)) for pre-rendering (I haven't tried this, but it should be OK).

[madisvain]

Basically it works but had to write something like this:

const Base = mirror.render(
  <LocaleProvider locale={enUS}>
    <Router>
      <App />
    </Router>
  </LocaleProvider>, document.getElementById('root')
)

snapshotRender(<Base/> , document.getElementById('root'))

Without having it in a constant and passing it separately React complains about.
"ReactDOM.render(): Invalid component element. Instead of passing a class like Foo, pass React.createElement(Foo) or ."

Or write this.

snapshotRender(
  React.createElement(
    mirror.render(
      <LocaleProvider locale={enUS}>
        <Router>
          <App />
        </Router>
      </LocaleProvider>, document.getElementById('root')
    ), document.getElementById('root')
  ), document.getElementById('root')
)

Works but not very nice looking :)

[llh911001]

mirror.render returns a component (Root) if you are not in a browser, to render this component by snapshotRender, you should pass an element (<Root />) to it.

Sorry for the incorrectness in my last reply 😂