使用酶單元測試選擇元素的“onChange”函數

Question

我在 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()任何想法？ 謝謝！

Answer 1

下面的語法幫助我測試了 select 元素的值。

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