Wilson Mar bio photo

Wilson Mar


Email me Calendar Skype call

LinkedIn Twitter Gitter Instagram Youtube

Github Stackoverflow Pinterest

Use Jest and Enzyme to make your React apps great again

US (English)   Español (Spanish)   Français (French)   Deutsch (German)   Italiano   Português   Estonian   اَلْعَرَبِيَّةُ (Egypt Arabic)   中文 (简体) Chinese (Simplified)   日本語 Japanese   한국어 Korean


This article examines the automated testing of ReactJs using Jest.

React is also called ReatJS because it’s a Javascript library, developed in 2013 by Jordan Walke of Facebook. In fact, React is the 5th most starred JS library on all of GitHub, used on major sites including Netflix, Khan Academy, and many others.

Isomorphic React (Universal)

Scaffold tests using mocks

Jest is a test runner built on top of Jasmine and Mocha to add “spies” (a superior assertion library to verify side effects), plus snapshot testing, and module mocking. Even though Jest was built by Facebook’s React team (and share the MIT open-source licensing), Jest can also test apps not built with React (except for jQuery).


https://facebook.github.io/jest forwards to

Ezyme is a “test renderer” to express component output as HTML. It was built by AirBnB specifically for React apps. It has many open issues, so many avoid it. React-Test-Renderer is recommended over Enzyme

Test runners organize tests into “describe” suites and “it” test blocks.

Jest looks for tests stored under a folder named with two double-underlines:


Jest workflow

NPM triggers Watcher

BLAH: Jest was not designed to integrate with version control, and so it’s integrated into dev’s workflow.

Coding tests

Matchers look different than app code:

function test2() {
	constvalue = getValue42();

https://facebook.github.io/jest from https://facebook.github.io/jest/docs/en/expect.html

Avoid side-effects –any AJAX calls, UI changes or other side effects are handled by sagas, thunks, etc., but not by components

Test Container and Display elements separately

SnapShot Testing

multiple kinds of tests

  • unit tests verify that individual methods and properties passed by container are accurate
  • component tests
  • snapshot tests verify output of the display component, passing props in directly

Learning resources

React: Testing and Debugging July 5, 2017 [1h 17m] by: Emmanuel Henri,

<a target=”_blank” href=”https://app.pluralsight.com/paths/skills/react React Path of courses that take over 50 hours in total

Testing React Applications with Jest 11 May 2018 [3h 36m] by Daniel Stern (@danielJackstern)

https://github.com/DanielStern/Isomorphic-React This application is a basic API client which gathers data from an outside API (in this case, Stackoverflow) and generates an isomorphic, single-page application (SPA).


More on front-end styling

This is one of several topics:

  1. UI Design Systems
  2. Text Editors
  3. Markdown text for GitHub from HTML
  4. 508 Accessibility

  5. gRPC (g___ Remote Procedure Call)
  6. HTTP/2 Transition Project Plan

  7. Front-end UI creation options
  8. Docusaurus static website generator
  9. Static websites
  10. JAM Stack Website Project Plan
  11. Jekyll Site Development
  12. Gatsby app generator

  13. Website styles
  14. Website Styling
  15. VueJs front-end framework

  16. Protractor to automate testing of Angular and other web pages

  17. Email from website
  18. Search within Hyde format Jekyll websites
  19. Windows Tile Pin Picture to Website Feed

  20. Data Visualization using Tableau