Jest + React

Unit & Integration

Enzyme

Skapat av Airbnb for att testa React Components

Monterar eller renderar applikationen eller komponenten i en fake DOM

Ger oss ett jQuery liknande API för att navigera

import React from 'react';
import { shallow } from 'enzyme';
import App from './App.js';
test('renders part of the app', () => {
  //Whole component is now "mounted" in the variable 'wrapper'
  const wrapper = shallow(<App />);
});

mount

import React from 'react';
import { mount } from 'enzyme';
import App from './App.js';
test('renders part of the app', () => {
  //Actually mounts everything
  const wrapper = mount(<App />);
});

• shallow renderar ut komponenten
• mount monterar hela komponenten med underkomponenter
• render visar bara markup/style (html/css)

mount kör även lifecycle methods (componentDidMount())

const App = () => 
  <h1>
    Hello!
  </h1>

import React from 'react';
import { shallow } from 'enzyme';
import App from './App.js';
test('renders part of the app', () => {
  const wrapper = shallow(<App />);
  expect(wrapper.find('h1').exists()).toEqual(true);
});

const App = () => 
  <button>
    Click me
  </button>

import React from 'react';
import { shallow } from 'enzyme';
import App from './App.js';
test('renders part of the app', () => {
  const wrapper = shallow(<App />);
  wrapper.find('button').simulate('click');
});

Vi kan simulera onClick, onChange etc. Mer utförligt exempel kommer snart.

Använd enzyme när du vill säkerställa att html/komponenter renderas rätt

När du vill simulera enklare events

När du behöver kolla props och state för komponenter

Snapshot testing

Snapshot testing lämpar sig bra för mindre komponenter

En snapshot är en bild av hur komponenter ser ut vid ett visst tillfälle

Typ som ett foto...fast i JSON-format 😅

Typiskt snapshot test

import toJson from 'enzyme-to-json';
it('should match snapshot', () => {
  //Only need render, faster if we just want markup and style
  const wrapper = render(<Button onClick={()=>{}} />);
  //Will fail when changes in snapshot happens
  expect(toJson(wrapper)).toMatchSnapshot();
})

Bra för mindre och mindre avancerade komponenter

Supersnabba att skriva

Men vi måste manuellt verifiera dem

Failing test triggas vid minsta ändring