@meniga/jest v5.0.0-alpha.0

@meniga/jest

This is a common library that adds support for running jest unit tests.

Setup

Step 1

Add "@meniga/jest" as a dependency in the package.json file found in the root of your repo and add the following scripts:

"scripts": {
    "test": "cross-env NODE_ENV=testing jest --config=./jest.config.js",
    "test:watch": "npm test --watch",
    "test:coverage": "npm test --coverage"
}

Step 2

Create a basic jest.config.json file in the root of your repo which extends our base jest config file

Example

const base = require("./node_modules/@meniga/jest/jest.config.base.js");

module.exports = {
    ...base,
    rootDir: "./node_modules/@meniga/jest/",
    roots: [ "../../../packages/", "../../../apps/"]
};

rootDir should be set to our meniga jest packages home roots is used to specify where jest should search for test files. The path need to be relative to rootDir.

See Jest Configuration documentation for more details on configurations.

Step 3

Add a babel.config.js file on the same location as your jest config file which uses the base babel config.

Example

module.exports = require("./node_modules/@meniga/jest/babel.config.js");

Creating tests

Tests should added under a _tests folder which should be located as close to the code we want to test as possible, and should match the following filename syntax *.unit.js. For example, if you are to test a file under a containers folder, the folder structure should look like this:

├── containers │ ├── _tests │ │ └── myContainer.unit.js │ └── myContainer.js

Here is an example unit test which:

• Creates a snapshot of the component if it did not exist, otherwise test if there were any changes made to the component.
• Calling a handler which updates a state value, which is confirmed by checking the elements new value.
• If a specific call to server was done with expected action type.

Example container code:

import React from 'react';
import { compose, withState, withHandlers } from 'recompose';
import { Button, Container } from '@meniga/ui'

import * as myActions from '../actions'

const Greeter = (props) => (
  	<Container>
		<span class="result-container">{ props.myState }</span>
		<Button onClick={ () => { props.onUpdateName(props.name) } }></Button>
		<Button onClick={ props.onStoreName }></Button>
	</Container>
);

export const enhance = compose(
  withState('myState', 'setMyState', ""),
  withHandlers({
    onUpdateName: ({ setMyState }) => name => {
	  setMyState(name)
	},
	onStoreName: ({ dispatch }) => () => {
	  dispatch(myActions.fetch())
	}
  })
);

export default enhance(Greeter);

Example tests for example container:

import React from 'react';
import renderer from 'react-test-renderer';
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'
import fetchMock from 'fetch-mock'
import { Provider } from 'react-redux';

import Greeter from '../greeter';

const middlewares = [thunk]
const mockStore = configureMockStore(middlewares)

describe('UI ', () => {
  
  it('should render a component', () => {
    const greeter = renderer.create(
      <Greeter name='Shreya Dahal' />
    ).toJSON();

    expect(greeter).toMatchSnapshot();
  });

  it('should change name displayed on click', () => {
    const name = 'Shreya Dahal'

    const greeter = renderer.create(
      <Greeter name={ name } />
    ).root;

    const buttons = greeter.findAll(node => node.type === "button");
    expect(buttons.length).toBe(2)

    const nameTag1 = greeter.findAll(node => node.type === "span");
    expect(nameTag1.length).toBe(1)
    expect(nameTag1[0].children[0]).toBe("")

    renderer.act(buttons[0].props.onClick)

    const nameTag2 = greeter.findAll(node => node.type === "span");
    expect(nameTag2.length).toBe(1)
    expect(nameTag2[0].children[0]).toBe(name)
  })
})

describe('Actions ', () => {
  afterEach(() => {
    fetchMock.reset()
    fetchMock.restore()
  })

  it('should call save action when button is clicked', () => {
    fetchMock
      .getOnce('/greeting', { body: { 'hello' }, headers: { 'content-type': 'application/json' } })

    const expectedAction = { "meta": expect.anything(), "payload": expect.anything(), "type": "pfm-greeting/FETCH" }
    const store = mockStore({ })
    const dispatch = jest.fn()

    const greeter = renderer.create(
      <Provider store={ store }>
        <Greeter name={ "" } dispatch={ dispatch } />
      </Provider>
    ).root;

    const buttons = greeter.findAll(node => node.type === "button");

    renderer.act(buttons[1].props.onClick)

    expect(dispatch).toHaveBeenCalledWith(expectedAction)
  })
})