Looping Over Child Components in React: Shotgun Episode 3
Eric Elliott

Awesome work and thanks for sharing :). I really like the shotgun approach, less brittle tests FTW. Constantly having to change your tests is demotivating. In that spirit is testing your dynamic list with the exact HTML markup not to brittle?

const $ = dom.load(render(<CardPlayer { …props } />)); const output = $(‘.card-list’).html(); 
const actual = output;
const expected = ‘<li class=”card-list-item current-card”>Card #1</li><li class=”card-list-item”>Card #2</li><li class=”card-list-item”>Card #3</li>’;

Personally I would change the contents of the list items fairly often when developing.

What do you think of this approach? (Names are different because I’m using it in a project, but conceptually the same).

const props = makeProps()
const $ = dom.load(render(<ChatList {...props} />))
const output = $('.chatlist-item-list').children().length

const actual = output
const expected = props.chats.length

Here I’m testing if the child components are dynamically rendered based on the props. Taking into account that you could test the ChatListItems specifically for props, classNames etc, I would think that testing the length would suffice.


Show your support

Clapping shows how much you appreciated sven’s story.