Discussion on: Testing a simple React component

[Nicolas Pierre-Charles]

Hi,

That's a nice article.
I just discovered @testing-library and the tests I write seem less brittle than with enzyme.
The extension of matchers for jest (@testing-library/jest-dom) make it feel even more natural to read. You should try it.

A small advice: I know it is not meant to be a production ready code but you should not rely on index in toggleComplete because if you somehow give the user a way to reorder its tasks (say by name), the indexes won't match anymore between the rendered list and the data.
It's a bit more complicated but you should pass id for this.

const toggleComplete = (checklistIdToToggle: number) => {
  const newChecklist = checklist.map(({ id, checked, ...props }) => ({
    id,
    checked: id === checklistIdToToggle ? !checked : checked,
    ...props
  });
  updateChecklist(newChecklist);
}

Thanks for your writing.

[Ryan Dsouza]

True that we shouldn't rely on indexes, I will make the changes to make the code production ready. Also as for jest-dom, it's a gratet library and I have used that in the next part of this series!