MVP Testing with Enzyme ( powered by with Jest )

MVP Testing

Enzyme Docs: https://airbnb.io/enzyme/

Shallow Rendering API used to test components as a unit, ensuring tests aren't indirectly asserting behaviour on child components.

import React from 'react'; import {shallow} from 'enzyme'; import PreviousSite from '../src/PreviousSite';

describe("App", () => { let app beforeEach(() => { app = shallow() ...

... then we nest describe blocks for individual components

Originally, we were finding a component (e.g Skip button), simulating a 'press', setting a const text and then 'diving' till we could expect e.g. text to equal 'Left Leg'. As below:

describe("Skip button", () => { beforeEach(() => { window.alert = jest.fn() }) it('Shows the next injection site', () => { app.find("#skip").simulate('press') const text = app .find("#currentSite") .dive() .find('#site') .dive() .text(); expect(text).toEqual("Left leg"); })

Then, we moved towards testing rendering in the individual .js files e.g. CurrentSite.js & PreviousSite.js with: