Wilson Mar bio photo

Wilson Mar

Hello. Hire me!

Email me Calendar Skype call 310 320-7878

LinkedIn Twitter Gitter Google+ Instagram Youtube

Github Stackoverflow Pinterest

Use Jest and Enzyme to make your React apps great again


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,

https://app.pluralsight.com/paths/skills/react React Path of courses that take over 50 hours in total

https://app.pluralsight.com/library/courses/testing-react-applications-jest/table-of-contents Testing React Applications with Jest</a> 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. Text Editors
  2. Markdown text for GitHub from HTML
  3. 508 Accessibility

  4. JAM Stack Website Project Plan
  5. HTTP/2 Transition Project Plan
  6. Static websites
  7. Jekyll Site Development

  8. Website styles
  9. Website Styling
  10. VueJs front-end framework

  11. Email from website
  12. Search within Hyde format Jekyll websites
  13. Windows Tile Pin Picture to Website Feed

  14. Data Visualization using Tableau