Convert elements to test objects for toMatchObject in Jest

[pedrottimark]

Do you want to request a feature or report a bug?

Request your guidance to add a feature for testing, especially with Jest and Enzyme

What is the current behavior?

To get the benefit of descriptive JSX you must pay a cost of irrelevant details in some snapshot tests, which cause unnecessary updates, and risk incorrect decisions.

What is the proposed behavior?

Goal: balance effort to write tests initially and update tests correctly when components change.

Replace some toMatchSnapshot with toMatchObject for elements with a relevant subset of props.

Therefore, this issue to convert the expected React elements directly to test objects, especially for shallow rendering and a new deep-event/shallow-test pattern (see Table-C example).

For more information, see:

• Overview: https://github.com/pedrottimark/whimper#interlude-about-snapshot-testing
• Status: New shape matcher proposal jestjs/jest#2202 (comment)

Proposed: be able to import from react-test-renderer

• irrelevant String sentinel value to ignore children, or absence of children, in received object
• relevantTestObject Given a React element, return the unrendered element as a test object:
  • $$typeof is enumerable, see toMatchObject diff displays Received from react-test-renderer as Object instead of JSX jestjs/jest#2351
  • props is omitted if there are no properties, not including children
  • children is omitted if it is [irrelevant]

Can you think of clearer names? I am willing to contribute with your guidance.

Draft of code: https://github.com/pedrottimark/whimper/blob/master/src/testing/react-test-renderer/relevantTestObject.js

Because toMatchObject expects an object, relevantTestObject doesn’t expect an array of elements, which components can render in React 16. Can you think of test cases when it should?

Examples of tests:

• enzyme: although feat: Add mountToDeepJson and mountToShallowJson adriantoine/enzyme-to-json#56 is pending
  • mountToDeepJson in https://github.com/pedrottimark/whimper/blob/master/src/components/__tests__/Table-U.test.js
  • mountToShallowJson via tbodyShallow in https://github.com/pedrottimark/whimper/blob/master/src/components/__tests__/Table-C.test.js and so on
• react-test-renderer: https://github.com/pedrottimark/whimper/blob/master/src/components/__tests__/TableHead-R.test.js#L54-L129
• react-test-renderer/shallow: https://github.com/pedrottimark/whimper/blob/master/src/components/__tests__/shallow.test.js

[aweary]

Thanks for the proposal @pedrottimark! The test renderer recently got a new API, toTree, which provides an easily traversable tree structure describing the rendered elements. See #8931

Could this be implemented in user-land using this API? Looking at your draft it seems like it might be pretty straightforward.

[pedrottimark]

@aweary Thank you for link to PR for the toTree method, so I can follow that effort.

Because this proposed use of toMatchObject has an expected value of test objects converted from unrendered elements, I don’t think I can call the toTree method.

As you say, relevantTestObject can stay in user-land, because it depends only on React element.

The reason to support in react-test-renderer is recommend (and minimize devDependencies for) a similar type of testing which answers some concerns on GitHub and Twitter about snapshot testing.

The solution seems like more diplomacy than technology, because the problem appears in Jest or AVA, but the remaining work is in other packages.

Y’all won’t hurt my feelings, if the team needs to close this issue to focus on finishing Fiber.

[gaearon]

My hunch is this should be first built in userland. If it works well and people use it successfully we can consider reopening this and bringing it into the test renderer.