使用 Enzyme 对 select 元素的 `onChange` 函数进行单元测试答案

【问题标题】：Unit testing select element's `onChange` function with Enzyme使用 Enzyme 对 select 元素的 `onChange` 函数进行单元测试
【发布时间】：2017-07-20 14:04:09
【问题描述】：

我在 React 中有一个下拉组件，它呈现一个带有一些选项的选择元素。这是我的测试的样子：

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

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();
  });
});

我在控制台中收到以下错误：The "actual" argument in expect(actual).toHaveBeenCalled() must be a spy

关于如何测试下拉列表中的onchange() 有什么想法吗？谢谢！

【问题讨论】：

When there is not a function to spy on, jasmine.createSpy can create a "bare" spy. [...] But there is no implementation behind it. 这实际上意味着这是一个你必须自称的人造间谍。 onChange={handleChange} 可能是错误的尝试 onChange={() => handleChange()}。只是在这里猜测，但您希望 handleChange 成为一个函数，所以像函数一样调用它。

标签： javascript unit-testing reactjs testing enzyme

【解决方案1】：

下面的语法帮助我测试了选择元素的值。

it('should trigger onChange', () => {
  const dropdown = mount(<App />);
  dropdown.find("select").simulate("change",{target: { value : "New Jersey"}});
  expect(dropdown.find("select").props().value).toBe("New Jersey");
});

【讨论】：