cabaalexander/awesome-react-testing

React and React Native testing tools and strategies

Awesome React Testing

A collection of React and React Native testing tools and strategies.

Table of Contents

• Unit Testing
  • Jest
    • Fetch Mock
  • Other Frameworks
  • Assertion
  • Runner
• Regression Testing
• Blackbox Testing
• Greybox Testing
• Linters
  • Regular
  • A11y
• Maintence Managers
• Environment Helpers
• Performance
• Quality Checks
• Coverage Reporting
• Chaos Testing
• Production Checking / Testing
• Audits
• Contributors

Tutorials

For web:

• Testing React Components - by Valentino Gagliardi
• Fullstack React - Testing Chapter - Day 22 of "30 Days of React"
• Testing JavaScript with Kent C. Dodds - Paid course

For React Native:

• Testing React Native Apps - Jest guide to React Native app testing

Unit Testing

Choose one of these to be the primary framework you will be using to test your React and React Native apps. The most popular, by far, is Jest.

Jest

Website: https://jestjs.io/ Works on projects using: Babel, TypeScript, Node, React, Angular, Vue and more. Based on Mocha Cheatsheet: https://github.com/sapegin/jest-cheat-sheet

Fetch Mock

• Jest Fetch Mock - Jest mock for the fetch polyfill.

More on Jest at AWESOME-JEST

Other Frameworks

• mocha - Simple, flexible, fun javascript test framework for node.js & the browser.
• jasmine - DOM-less simple JavaScript testing framework.
• qunit - An easy-to-use JavaScript Unit Testing framework.
• prova - Node & Browser test runner based on Tape and Browserify
• DalekJS - Automated cross browser functional testing with JavaScript
• Protractor - Protractor is an end-to-end test framework for AngularJS applications.
• tape - Tap-producing test harness for node and browsers.
• TestCafe - Automated browser testing for the modern web development stack.
• ava - 🚀 Futuristic JavaScript test runner
• intern - A next-generation code testing stack for JavaScript.

Assertion

Assertion libraries give you tools to ensure things are correct. For example, they may give you matchers such as expect(true).toBeTruthy().

• chai - BDD / TDD assertion framework for node.js and the browser that can be paired with any testing framework.
• chai-immutable
• Enzyme - Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.
• react testing library - Simple and complete React DOM testing utilities that encourage good testing practices.
  • React Native Version
• Sinon.JS - Test spies, stubs, and mocks for JavaScript.
• expect.js - Minimalistic BDD-style assertions for Node.JS and the browser.
• React Unit - Lightweight unit test library for ReactJS
• skin-deep - Testing helpers for use with React's shallowRender test utils.
• Unexpected React - Plugin for http://unexpected.js.org to enable testing the full React virtual DOM.

Browser-based Testing Tools

These allow you to run tests right in a real browser, to build full integration tests.

• phantomjs - Scriptable Headless WebKit.
• slimerjs - A PhantomJS-like tool running Gecko.
• casperjs - Navigation scripting & testing utility for PhantomJS and SlimerJS.
• zombie - Insanely fast, full-stack, headless browser testing using node.js.
• totoro - A simple and stable cross-browser testing tool.
• karma - Spectacular Test Runner for JavaScript.
• nightwatch - UI automated testing framework based on node.js and selenium webdriver.
• yolpo - A statement-by-statement javascript interpreter in the browser.

Snapshot Testing

These tools allow you to take "snapshots" of components and other data and verify that it remains the same between updates.

For web:

• storyshots
• testStateMachine in react-automata

For React Native:

• react-native-view-shot

Blackbox Testing

These tools allow you to write end-to-end integration tests -- without having any insight into the implementation details.

For React Native:

• Appium

Greybox Testing

These tools are like the blackbox testing tools, except they integrate with internals of the web app to provide more consistency.

For web:

• Cypress

For React Native:

• Detox

Linters and Formatters

Linters catch errors and protect against common problems. Formatters will reformat your code to ensure consistency.

Linters

• ESLint
• JSHint
• Standard
• Clinton

Formatters

• Prettier

A11y (accessibility)

• jsx-a11y
• react-native-a11y

Maintenance Managers

These tools automate tedious tasks like dependency upgrades.

• DangerJS
• GreenKeeper.io
• Dependabot
• updtr
• npm-check
• Madge
• Renovate

Environment Helpers

These packages help you verify that your environment matches the expected environment for the project (for example, Node versions, etc).

• Solidarity
• EnvInfo

Performance

Performance tools help you get the most speed out of your React and React Native apps.

For web:

• Web Page Test
• Insights
• BenchmarkJS

Quality Checks

These tools will check for code quality scores.

• JS Inspect
• buddy.js

Coverage Reporting

Coverage tools will alert you when you have untested code.

• CodeCov - Coverage reporting service.
• istanbul - Yet another JS code coverage tool.
• blanket - A simple code coverage library for javascript. Designed to be easy to install and use, for both browser and nodejs.
• JSCover - JSCover is a tool that measures code coverage for JavaScript programs.

Chaos Testing

Chaos testing ensures your tests are resilient to random data and interaction.

• Psuedo-localization
• Naughty Strings
• testcheck-js
  • Flow to testcheck

For web:

• Service Fabric
• Gremlin
• Chaos Monkey

For React Native:

• ClusterFuzz

Production Checking / Testing

These tools will allow you to see errors that happen in production apps.

For web:

• Honeybadger
• Errorception
• Optimizely

For mobile:

• App Center
• Bug Snag

Audits

Auditing tools will give you information about your code structure.

• jsx-info

For web:

• Lighthouse

Contributors

Thanks goes to these wonderful people (emoji key):

Gant Laborde 📖

Jamon Holmgren 🖋 🤔

This project follows the all-contributors specification. Contributions of any kind welcome!