Inferno: Best method for rendering components to a string /snapshot testing?

[Vpr99]

Hi all,

First, thank you for all the hard work that you're doing on Inferno! We just deployed our first Inferno app to production at work yesterday and it's 🔥! Gonna start migrating the rest after the holidays.

One question I did have though is about the best method for rendering a component to a string. In React, I was using Jest's snapshot functionality for resting my UI components and I'd like to do the same with my Inferno projects. I found the Inferno Test Utils docs and shallowRender looks like exactly what I need. After some digging though, I couldn't find any mention of it in dist/inferno-test-utils.js.

Would somebody mind pointing me in the right direction? Happy holidays! 🎄 🎁

[lukeed]

Hey! Happy Holidays 🎄

I'm not sure if it's "the best" (someone will correct me if it isn't) but there's a method _called_ renderToString within the inferno-server package. Maybe that's what you're looking for?

[LukeSheard]

Hey, as you've discovered we haven't implemented ShallowRender yet (feel free to submit a PR). There is discussion of extending enzyme to different render functions as well though. 

For now you can enquire the state of the DOM by calling render and inspecting the tree. This will require a DOM to run though.

Any further questions let me know. 

[Vpr99]

Thanks guys. Testing kinda got backburnered there for a bit, but here's the best I could come up with. Seems to work well enough with Jest, though it would be nice to have a _true_ shallow renderer so you're only testing a component's immediate children and not getting all the subcomponents rendered.

Here's what I ended up doing:

test('Renders the loading indicator without exploding', () => {
  document.body.innerHTML = '<div id="test"></div>';
  Inferno.render(<Spinner />, document.getElementById("test"));
  const tree = document.getElementById('test');
  expect(tree.innerHTML).toMatchSnapshot();
})

[jambonrose]

(I'm leaving a comment on this issue because this was the first hit in a few Google searches while I was looking for the best way to test Inferno.)

inferno-test-utils now has a renderToSnapshot function, which allows for the following code when using Jest.

// my be necessary depending on your setup:
// import createElement from 'inferno-create-element';
import InfernoTestUtils from 'inferno-test-utils';

import MyComponent from '../my_component'

test('component renders correctly', () => {
    const component = InfernoTestUtils.renderToSnapshot(<MyComponent />)
    expect(component).toMatchSnapshot();
});