Category: Enzyme

Enzyme

Enzyme is a Javascript testing utility for React. In the below tutorial I will show you how to get it working with your react classes.

Below you begin be sure to following the tutorial on Flask: React Website.

*** If you don’t have a .babelrc file setup and configured then it won’t work. This is required.

Folder Structure:
  • Inside testApp create the following:
    • folder: tests
      • folder: home
        • file: home.js
      • file: dom.js
      • file: helpers.js
Install NPM Modules:
npm install enzyme --save-dev
npm install enzyme-adapter-react-16 --save-dev
npm install ignore-styles --save-dev
npm install chai --save-dev
npm install jsdom --save-dev
npm install mocha --save-dev
npm install sinon --save-dev
Package.json:

Under “scripts” add the “test” run command.

"test": "mocha --require babel-core/register --require ignore-styles --require ./tests/helpers.js --require ./tests/dom.js --recursive \"./tests/**/*.js*\""
dom.js:

This will setup all the dom for enzyme.

var jsdom = require("jsdom");
const { JSDOM } = jsdom;
var exposedProperties = ["window", "navigator", "document"];
const { document } = (new JSDOM("<html><head></head><body><div class='container-body' id='app'></div></body></html>")).window;
global.document = document;
global.window = document.defaultView;

Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === "undefined") {
    exposedProperties.push(property);
    global[property] = document.defaultView[property];
  }
});

Object.keys(window).forEach((key) => {
    if (!(key in global)) {
        global[key] = window[key];
    }
});

//This is so jquery is available if using $
global.$ = require("jquery");
//This is so jquery is available if using jQuery
global.jQuery = require("jquery");
//This is so L is available if using leaflet otherwise don't include
global.L = require("leaflet");
global.navigator = global.window.navigator;
helpers.js:

This just set’s up enzyme configuration and allows sinon, etc through to each javascript test file.

import { expect } from "chai";
import { sinon, spy } from "sinon";

var enzyme = require("enzyme");
var Adapter = require("enzyme-adapter-react-16");

enzyme.configure({ adapter: new Adapter() });

global.expect = expect;
global.sinon = sinon;
global.spy = spy;
global.mount = enzyme.mount;
global.render = enzyme.render;
global.shallow = enzyme.shallow;
home.js:

*** it should be mentioned that the component must be exported. If your file has ReactDOM.render in it then nothing will work correctly. Must be an exported component. So if you followed the tutorial mentioned above then you will need to adjust home.jsx file to mimic this.

import React from "react";
import {Home} from "../../app/home/js/homeComponent.jsx";

describe('HomeComponent', () => {
	it('Tests that componentdidmount got called', () => {
		global.spy(Home.prototype, 'componentDidMount');
		const wrapper = mount(<Home />);
		expect(Home.prototype.componentDidMount.calledOnce).to.equal(true);
	});
});