无法触发 function 使用 Jest 和 Enzyme 进行测试

Question

I am new to testing React, and I am attempting to test that HotelSelect.handleInputChange is called when a user changes the input value on the AsyncSelect component (connected by it's onInputChange callback).

HotelSelect.js

import React, { useEffect, useState } from 'react';
import HotelSearchApi from '../api/HotelSearchApi';
import AsyncSelect from 'react-select/async';
import './HotelSelect.css';

export default function HotelSelect({
  ...props
}) {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectValue, setSelectValue] = useState({value: '', label: ''});

  useEffect(() => {
    setSelectValue({value: props.hotel.brand_code, label: props.hotel.brand_code});
  }, [props.hotel])

  function formatHotelList(hotels) {
    return hotels.map(function(hotel) {
      return {...hotel, ...{ value: hotel.brand_code, label: hotel.brand_code } }
    });
  }

  function handleInputChange(newTerm) {
    setSearchTerm(newTerm);
  }

  async function loadOptions() {
    let hotels =  await HotelSearchApi.search(searchTerm);
    return formatHotelList(hotels);
  }

  return (
    <AsyncSelect cacheOptions={true}
                 className="HotelSelect"
                 defaultInputValue={props.hotel.brand_code}
                 value={selectValue}
                 loadOptions={loadOptions}
                 onChange={props.changeHotel}
                 onInputChange={handleInputChange}/>
  )
};

HotelSelect.test.js

import React from 'react';
import HotelSelect from './HotelSelect';
import AsyncSelect from 'react-select/async';
import renderer from 'react-test-renderer';
import { mount, shallow, render } from 'enzyme';

const hotel = {
  brand_code: '12345'
}

const searchData = {
  data: [
    {
      id: '123',
      type: 'hotel',
      attributes: {
        brand_code: '55555',
        name: 'A Hotel'
      }
    }
  ]
}

it('renders correctly', () => {
  const selector = renderer
    .create(<HotelSelect hotel={hotel} />)
    .toJSON();
  expect(selector).toMatchSnapshot();
});

it('should update searchTerm as user changes input', () => {
  const myF = jest.fn();
  const selector = mount(<HotelSelect hotel={hotel} />);
  selector.handleInputChange = myF;

  let input = selector.find('input');
  input.simulate('change', { target: { value: '5' } });

  expect(myF).toHaveBeenCalled();
});

When I use console.log to inspect selector it looks like the mock function is attached:

  ● Console

    console.log src/components/HotelSelect.test.js:38
      ReactWrapper {
        handleInputChange: [Function: mockConstructor] {
          _isMockFunction: true,
          getMockImplementation: [Function],
          mock: [Getter/Setter],
          mockClear: [Function],
          mockReset: [Function],
          mockRestore: [Function],
          mockReturnValueOnce: [Function],
          mockResolvedValueOnce: [Function],
          mockRejectedValueOnce: [Function],
          mockReturnValue: [Function],
          mockResolvedValue: [Function],
          mockRejectedValue: [Function],
          mockImplementationOnce: [Function],
          mockImplementation: [Function],
          mockReturnThis: [Function],
          mockName: [Function],
          getMockName: [Function]
        }
      }

Unfortunately the function doesn't seem to get triggered though:

  ● should update searchTerm as user changes input

    expect(jest.fn()).toHaveBeenCalled()

    Expected number of calls: >= 1
    Received number of calls:    0

      37 |   input.simulate('change', { target: { value: '5' } });
      38 |   console.log(selector);
    > 39 |   expect(myF).toHaveBeenCalled();
         |               ^
      40 | });
      41 | 

      at Object.<anonymous> (src/components/HotelSelect.test.js:39:15)

I must not be triggering the onChange event on the input box, which should trigger the onInputChange callback on the AsyncSelect component.

I have read over a couple TDD postings online, the jest documentation, and at least 3 questions on Stackoverflow but I am still not able to figure this out.

Appreciate any help!

FirstQuestion:)

UPDATE: I changed the test to the following:

import React from 'react';
import HotelSearchApi from '../api/HotelSearchApi';
import HotelSelect from './HotelSelect';
import AsyncSelect from 'react-select/async';
import renderer from 'react-test-renderer';
import { mount, shallow, render } from 'enzyme';

const hotel = {
  brand_code: '12345'
}

const searchData = {
  data: [
    {
      id: '123',
      type: 'hotel',
      attributes: {
        brand_code: '55555',
        name: 'A Hotel'
      }
    }
  ]
}

jest.mock('../api/HotelSearchApi');

it('renders correctly', () => {
  const selector = renderer
    .create(<HotelSelect hotel={hotel} />)
    .toJSON();
  expect(selector).toMatchSnapshot();
});

it('should update searchTerm as user changes input', () => {
  const selector = mount(<HotelSelect hotel={hotel} />);

  let input = selector.find('input');
  expect(HotelSearchApi.search).not.toHaveBeenCalled();
  input.simulate('change', { target: { value: '5' } });

  expect(HotelSearchApi.search).toHaveBeenCalledWith('5');
});

But the change event doesn't seem to be updating the value in the input. The failing test message says it is receiving '12345' which is the initial value (hotel.brand_code):

  ● should update searchTerm as user changes input

    expect(jest.fn()).toHaveBeenCalledWith(...expected)

    Expected: "5"
    Received: "12345"

    Number of calls: 1

      39 |   input.simulate('change', { target: { value: '5' } });
      40 | 
    > 41 |   expect(HotelSearchApi.search).toHaveBeenCalledWith('5');
         |                                 ^
      42 | });
      43 | 

      at Object.<anonymous> (src/components/HotelSelect.test.js:41:33)

Answer 1

The issue with with

  selector.handleInputChange = myF;

Actually you cannot mock some internal variable this way. If that was a method in class-based component you could do that as

HotelSelect.instance().handleInputChange = jest.fn();

but it'd be a bad move anyway. You know what? You actually don't need to mock internal method.

There is no value in checking what internal method has been called. You only need to ensure some external API has been finally called and with expected parameters:

import HotelSearchApi from '../api/HotelSearchApi';

jest.mock('../api/HotelSearchApi'); // automock

...
it('should update searchTerm as user changes input', () => {
  const selector = mount(<HotelSelect hotel={hotel} />);

  let input = selector.find('input');
  expect(HotelSearchApi.search).not.toHaveBeenCalled();
  input.simulate('change', { target: { value: '5' } });

  expect(HotelSearchApi.search).toHaveBeenCalledWith('5');
});