Mastering React Test-Driven Development

Listing element children

Let's begin by building out the childrenOf function, which lists all the direct children of a component instance:

1. Create a new file named test/shallowHelpers.test.js and add the following test for childrenOf. It's a simple one to get us started. We pass in JSX directly to it; there's no mention of the shallow renderer yet. At this stage, it would be essentially the same output, except that the shallow renderer won't run on primitives such as div. When we do eventually bring in the shallow renderer, we'll use childrenOf on the rendered output:

import React from 'react';import { childrenOf } from './shallowHelpers';describe('childrenOf', () => {  it('returns no children', () => { expect(childrenOf(<div />)).toEqual([]); ...