如何在玩笑测试中比较（匿名）功能？

Question

I am having the following React component connected to a redux store.

import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
import { connect } from 'react-redux'
import { getWeather } from './actions/WeatherActions'
import WeatherComponent from './components/weatherComponent/WeatherComponent'
import { get } from 'lodash'

export class App extends Component {

  componentDidMount () {
    this.props.dispatch(getWeather())
  }

  render () {
    return (
        <div className="App">
          <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>Welcome to React</h2>
          </div>
          <WeatherComponent
              weather={{
                location: get(this.props.weatherReducer.weather, 'name'),
                temp: get(this.props.weatherReducer.weather, 'main.temp')
              }}
          />
        </div>
    )
  }
}

export default connect((store) => {
  return {
    weatherReducer: store.weatherReducer,
  }
})(App)

This component is dispatching the getWeather action using the componentDidMount callback. The getWeather action is returning an anonymous method upon resolving the axios promise.

import { GET_WEATHER_DONE, GET_WEATHER_ERROR } from './ActionTypes'
import axios from 'axios'

export function getWeather () {
  let endpoint = 'http://api.openweathermap.org/data/2.5/weather?q=London&appid=2a345681ddcde393253af927097f5747'

  return function (dispatch) {
    return axios.get(endpoint)
    .then((response) => {
      return dispatch({
        type: GET_WEATHER_DONE,
        payload: response.data
      })
    })
    .catch((error) => {
      return dispatch({
        type: GET_WEATHER_ERROR,
        payload: error.response.data,
        statuscode: error.response.status
      })
    })
  }
}

No I am trying to write a unit test verifying the getWeather action is being dispatched upon mounting. This tests looks as follows and passes.

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'
import * as actions from './actions/WeatherActions'

describe('app container', () => {
  const store = configureMockStore([thunk])({
    weatherReducer: {
      weather: {}
    }
  })

  const dispatchSpy = jest.fn()
  store.dispatch = dispatchSpy

  it('dispatches getWeather() action upon rendering', () => {
    ReactDOM.render(<App store={store} />, document.createElement('div'))

    expect(dispatchSpy.mock.calls[0][0].toString()).toEqual(actions.getWeather().toString())
  })

})

Because of the action returning an anonymous method, I need to call the toString method upon my mock to compare the actions.

I recreated this test using snapshot testing.

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'

describe('app container', () => {
  const store = configureMockStore([thunk])({
    weatherReducer: {
      weather: {}
    }
  })

  const dispatchSpy = jest.fn()
  store.dispatch = dispatchSpy

  it('dispatches correct actions upon rendering', () => {
    ReactDOM.render(<App store={store} />, document.createElement('div'))

    let tree = dispatchSpy.mock.calls.toString()
    expect(tree).toMatchSnapshot();
  })


})

Again I need to call the toString method, resulting in the following snapshot.

// Jest Snapshot v1, 

exports[`app container dispatches correct actions upon rendering 1`] = `
"function (dispatch) {
    return _axios2.default.get(endpoint).
    then(response => {
      return dispatch({
        type: _ActionTypes.GET_WEATHER_DONE,
        payload: response.data });

    }).
    catch(error => {
      return dispatch({
        type: _ActionTypes.GET_WEATHER_ERROR,
        payload: error.response.data,
        statuscode: error.response.status });

    });
  }"
`;

Now when running coverage, using the yarn test -- --coverage , my test is failing because of istanbul adding text to my action. The output looks as follows:

 FAIL  src/App.snapshot.test.js
  ● app container › dispatches correct actions upon rendering

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot 1.

    - Snapshot
    + Received

    -"function (dispatch) {
    -    return _axios2.default.get(endpoint).
    -    then(response => {
    -      return dispatch({
    -        type: _ActionTypes.GET_WEATHER_DONE,
    -        payload: response.data });
    +"function (dispatch) {/* istanbul ignore next */cov_2rypo7bhf.f[1]++;cov_2rypo7bhf.s[2]++;
    +    return (/* istanbul ignore next */_axios2.default.get(endpoint).
    +      then(response => {/* istanbul ignore next */cov_2rypo7bhf.f[2]++;cov_2rypo7bhf.s[3]++;
    +        return dispatch({
    +          type: /* istanbul ignore next */_ActionTypes.GET_WEATHER_DONE,
    +          payload: response.data });

    -    }).
    -    catch(error => {
    -      return dispatch({
    -        type: _ActionTypes.GET_WEATHER_ERROR,
    -        payload: error.response.data,
    -        statuscode: error.response.status });
    +      }).
    +      catch(error => {/* istanbul ignore next */cov_2rypo7bhf.f[3]++;cov_2rypo7bhf.s[4]++;
    +        return dispatch({
    +          type: /* istanbul ignore next */_ActionTypes.GET_WEATHER_ERROR,
    +          payload: error.response.data,
    +          statuscode: error.response.status });

    -    });
    +      }));
       }"

      at Object.it (src/App.snapshot.test.js:21:18)
      at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)

The main problem I am facing is the fact that I need to call the toString method for comparison. What is the correct method for comparing (anonymous) functions in jest testing?

Full source can be found at https://github.com/wvanvlaenderen/react-redux-weathercomponent

Answer 1

So I was able test calls on dispatch by mocking the getWeather action in my test, and verifying the type of the return value on individual calls.

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'
import * as actions from './actions/WeatherActions'
import { spy } from 'sinon'

describe('app container', () => {
  const store = configureMockStore([thunk])({
    weatherReducer: {
      weather: {}
    }
  })

  const dispatchSpy = spy(store, 'dispatch')

  actions.getWeather = jest.fn().mockImplementation(() => {
    return {type: 'fetching weather'}
  })

  it('dispatches getWeather() action upon rendering', () => {
    ReactDOM.render(<App store={store} />, document.createElement('div'))

    expect(dispatchSpy.firstCall.returnValue.type).toEqual('fetching weather')
  })

})

Snapshot testing was achieved by rendering the call tree on the dispatch spy.

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { spy } from 'sinon'
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'
import * as actions from './actions/WeatherActions'

describe('app container', () => {
  const store = configureMockStore([thunk])({
    weatherReducer: {
      weather: {}
    }
  })

  const dispatchSpy = spy(store, 'dispatch')

  actions.getWeather = jest.fn().mockImplementation(() => {
    return {type: 'fetching weather'}
  })

  it('dispatches correct actions upon rendering', () => {
    ReactDOM.render(<App store={store} />, document.createElement('div'))

    expect(dispatchSpy.getCalls()).toMatchSnapshot();
  })

})

Answer 2

When testing a redux thunk using Jest, i've used expect.any(Function) . All assertion libs have something like this.

ex)

action

const toggleFilter = (toggle, isShown) => {
  return dispatch => {
    toggle === 'TOGGLE ONE'
      ? dispatch(toggleSwitchOne(isShown))
      : dispatch(toggleSwitchTwo(isShown));
  };
};

Test file:

beforeEach(() => {
store = mockStore({ showFruit: false, showVeg: false });
      dispatch = jest.fn();
      getState = () => store;
})

it('will dispatch action to toggle switch', () => {
  let res = toggleFilter(type, isShown)(dispatch, getState);
  expect(dispatch).toHaveBeenCalledTimes(1);
  expect(dispatch).toHaveBeenCalledWith(expect.any(Function));
});