Wilson Mar bio photo

Wilson Mar

Hello!

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   Cyrillic Russian   中文 (简体) Chinese (Simplified)   日本語 Japanese   한국어 Korean

Overview

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://github.com/facebook/jest

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

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:

   __tests__/*.test.js
   __tests__/*.spec.js

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();
	expect(value).toEqual(42);
}

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).

Testing

More on front-end styling

This is one of several topics:

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

  5. HTTP/2 Transition Project Plan

  6. Docusaurus static website generator
  7. Static websites
  8. JAM Stack Website Project Plan
  9. Jekyll Site Development
  10. Gatsby app generator

  11. Website styles
  12. Website Styling
  13. VueJs front-end framework

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

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

  18. Data Visualization using Tableau