Enzyme onclick spy toHaveBeenCalled test does not work when testing on arrow function

问题

how can i test the child component onclick.

Please see the below snippet.

// App.js

import React, {Component, Fragment} from 'react'
import Child from './child'

class App extends Component{

  state = {
    data: null,
    enable: false
  }

  componentDidMount(){
    this.getData()
  }

  getData = async () => {
    const response = await fetch('http://www.example.com');
    const data = await response.json();
    this.setState({
      data
    })
  }

  _handleChildClick = () => {
    this.setState({
      enable: true
    })
  }

  render(){
    const {data, enable} = this.state
    if(!data){
      return (
       <div>
         Loading
       </div>
      )
    }else{
      <Fragment>
        <Child
         handleChildClick={this._handleChildClick}
        />
      </Fragment>
    }
  }
}


export default App


import React from 'react';

const child = () => {
  return(
    <div>
      <button
        className="toggle"
        onClick={props.handleChildClick}
      >
      Toggle
      </button>
    </div>
  )
}

export default child

// App.test.js

import React from 'react';
import {enzyme} from 'enzyme';
import App from './App';

describe("App test cases", () => {
  it('should trigger _handleChildClick', async () => {
    window.fetch = jest.fn().mockImplementation(() => ({
      status: 200,
      json: () => new Promise((resolve, reject) => {
        resolve(
            {
              name: "some data"
            }
        )
      })
    })) 
    const mountWrapper = await mount(<App />)
    setTimeout(() => {
       mountWrapper.update()
             const SpyhandleChildClick = jest.spyOn(mountWrapper.instance(),'_handleChildClick')
      mountWrapper.find('.toggle').simulate('click')
      expect(SpyhandleChildClick).toHaveBeenCalled() // not called 
    },0)
  })
})

回答1:

Some important points to consider.

Asynchronous code in your tests

If you have to do asynchronous tasks in your tests you always have to await until the asynchronous stuff is completed.

setTimeout(() => {
   mountWrapper.update()
         const SpyhandleChildClick = jest.spyOn(mountWrapper.instance(),'_handleChildClick')
  mountWrapper.find('.toggle').simulate('click')
  expect(SpyhandleChildClick).toHaveBeenCalled() // not called 
},0)

Above in your code you have a timeout segment. Any test condition inside this code block will not be evaluated since by the time they are evaluated you 'test session' will already be over due to the aync nature.

Testing arrow functions in React with enzyme - forceUpdate()

There seem to be a problem with the enzyme library where you have to force update the react component after spying for it to latch on to the method. Please follow the github issue for more information : https://github.com/airbnb/enzyme/issues/365

I also cleaned up your test code a bit to make it more understandable!

// App.test.js

import React from 'react';
import {enzyme} from 'enzyme';
import App from './App';


describe("App test cases", () => {
  it("should trigger _handleChildClick", async () => {
    window.fetch = jest.fn().mockImplementation(() => ({
      status: 200,
      json: () =>
        new Promise((resolve, reject) => {
          resolve({
            name: "some data"
          });
        })
    }));

    const mountWrapper = mount(<App />);
    mountWrapper.update();
    console.log("mountWrapper", mountWrapper.debug()); // showing the loader one

    //[FIX]This code will block and wait for your asynchronous tasks to be completed
    await new Promise(res => setTimeout(() => res(), 0));

    mountWrapper.update();
    console.log("mountWrapper", mountWrapper.debug()); // nothing showing
    expect(mountWrapper.find(".toggle").length).toEqual(1);

    //[FIX]Get a reference from the wrapper and force update after the spyOn call
    const instance = mountWrapper.instance();
    const spy = jest.spyOn(instance, "_handleChildClick");
    instance.forceUpdate();

    mountWrapper.find(".toggle").simulate("click");

    expect(spy).toHaveBeenCalled();
  });
});

Live Demo Link: Click on the 'Tests' tab on the browser to see the test results https://codesandbox.io/s/mz21kpm37j

来源：https://stackoverflow.com/questions/55416708/enzyme-onclick-spy-tohavebeencalled-test-does-not-work-when-testing-on-arrow-fun

标签

reactjs

enzyme