Testing React Components Best Practices

Testing React Components Best Practices

・1 min read
Testing React Components Best Practices

The most popular approach to testing React components is to use either Mocha+Chai+Enzyme or Jest+Enzyme. In this article, we will describe our React components testing practices with Jest+Enzyme which are also applicable to Mocha+Chai.

If you are new to testing React components you should read also:

  • create-react-app README section on “Writing tests”
  • Jest — Getting Started
  • Enzyme API documentation

    Tests organization

In larger JavaScript projects we put tests close to implementation in tests subfolder. Usually, tests for a component are grouped by structure and behaviour is added on top of it, like: https://cdn-images-1.medium.com/v2/resize:fit:2000/1*YQHTi9Tuf-Dbuvp8Ij5KXw.png

Minimal component test confirms component rendered

Minimal component tests verify that the component renders properly aka smoke testing or “Build Verification Testing”. It can be done with Enzyme:

or Jest snapshot:

The later generates snapshots/MainSection.spec.js.snap file.

Changes in snapshots are confirmed locally via ‘u’ in the jest cli and committed to the git repository, so PR reviewer can see them. You can read more on Snapshot Testing

At the moment we limit usage of snapshots to component rendering and complex json (i.e. chart configurations).

Read more https://medium.com/selleo/testing-react-components-best-practices-2f77ac302d12

Rate this article:


based on 0 votes
Our services
See what we can create for You
Our services

Awards & Certificates

reviewed on
30 reviews
  • Top 1000 Companies Global 2021
  • Top Development Company Poland 2021
HR dream team
  • 2020 HR Dream Team Award
  • 2016 Employer Branding Featured
  • 2015 HR Dream Team Award
ISO CertificateISO Certificate
  • Information Security Management System compliant with PN-EN ISO/IEC 27001
  • Business Continuity Management compliant with ISO 22301