Another blog post you may wish to link to

[qnm]

I found skin-deep via this post: http://simonsmith.io/unit-testing-react-components-without-a-dom/

You could add it to the docs as a reference.

-- Rob

[glenjamin]

Will do, thanks!

[glenjamin]

Hrm, actually I'm not going to add a link - as it uses a couple of low-level features that skin-deep is designed to replace.

• Using children[2] instead of subTree() - subTree allows you to use CSS-style selectors instead of brittle index matching of children
• Recommends calling methods on the instance. This should be a last resort in my opinion - the better approach is to use subTree to find a child, and then calls .props.onClick() or similar to trigger the appropriate event handler

You can see some discussion of this in the README for the upcoming release - https://github.com/glenjamin/skin-deep/tree/one-point-oh#quick-start - pretty much everything in those docs is currently true

[glenjamin]

And for reference, this is all basically my fault for not writing any docs :disappointed:

[simonsmith]

Hey, thanks for the corrections there. I'll endeavour to update my post when I get a chance. The documentation is looking good.

My main reason for using the instance methods is so I can easily deep compare a React component with a fake one in unit tests. Not found a better way so far due to the way React auto binds methods and adds a bunch of properties.

Be great to hear a better way because it does feel hacky.

[glenjamin]

My general approach there has been to not deep-compare - we mostly use findComponentLike (which is deprecated in favour of the new extended subTree in latest versions). This way we assert on the few props we care about - testing event handlers is always done by invoking them and asserting on the resulting behaviour (eg. onClick does setState which re-renders, assert that the UI has changed as expected)

[simonsmith]

That sounds smarter, yes. Okay I'll look into that route. Thanks

[qnm]

Thanks @glenjamin @simonsmith

[simonsmith]

Updated, feedback welcome - http://simonsmith.io/unit-testing-react-components-without-a-dom/

https://github.com/simonsmith/simonsmith.io/commit/25ea321365846508096994590beea898e957e6df

[glenjamin]

Looking good, I'll add a link now!

It might be worth you adding a note at the top of the post to say it's been updated.

This works fine for simple components but it can feel quite brittle to traverse heavily nested objects and select array elements this way.

I think this is a remnant from the previous version

[simonsmith]

Good catch, will update

[glenjamin]

Resolved in 4af051b

[simonsmith]

Awesome, thanks.

Just a typo in 'accurate'

[glenjamin]

Good catch, thanks!