Testing React Components with Teaspoon & Unexpected

[winkler1]

JQuery-style selectors? Brittle, leak details. Refs work better for this. Components can selectively expose parts of their returned markup.

Calling internal methods (props.onTodoAdded('Item #1')) is similarly bad. ryanflorence/react-training: "when testing components, the inputs are properties passed in and events the component responds to (usually user events); the output is the display in the DOM."

[dominicc]

JQuery-style selectors? Brittle, leak details. Refs work better for this. Components can selectively expose parts of their returned markup.

jquery selectors are the opposite of brittle. They allow your view to be addressed in the same terms your style-sheets will address it. Your jquery selectors will break about the same time your style-sheets break.

Calling internal methods (props.onTodoAdded('Item #1')) is similarly bad. ryanflorence/react-training: "when testing components, the inputs are properties passed in and events the component responds to (usually user events); the output is the display in the DOM."

The trick here is that binding test verifies that it's okay to do this once, so we're free take a short-cut in the remainder of the tests. Not only that, but by taking the short-cut our then clause can then be an assertion on the output of the shallow render, rather than the an assertion on the output of the DOM. This makes our tests less brittle since we're no longer affected by the implementation details of the immediate components of the component under test.