jeudi 20 juillet 2017

Unit testing select element's `onChange` function with Enzyme

I have a dropdown component in React that renders a select element with some options. Here is what my test looks like:

import React from 'react';
import { shallow, mount } from 'enzyme';
import expect from 'expect';
import enzymify from 'expect-enzyme';
import Dropdown from './Dropdown';

expect.extend(enzymify());

fdescribe('Dropdown', () => {
  it('should trigger onChange', () => {
    const handleChange = jasmine.createSpy('handleChange');
    const dropdown = mount(
      <div>
        <Dropdown
          options={[
            { key: '', display: 'Please select a value' },
            { key: 'NJ', display: 'New Jersey' },
            { key: 'NY', display: 'New York' },
          ]}
          onChange={handleChange}
        />
      </div>,
     );
    dropdown.find('select').simulate('change', { target: { value: 'New Jersey' } });
    expect(handleChange).toHaveBeenCalled();
  });
});

I get the following error in the console: The "actual" argument in expect(actual).toHaveBeenCalled() must be a spy

Any ideas on how to test the onchange() on the dropdown? Thanks!

Aucun commentaire:

Enregistrer un commentaire