如何使用Enzyme对React中的select元素进行聚焦进行单元测试?

时间:2017-07-28 18:12:31

标签: javascript unit-testing reactjs phantomjs enzyme

我在React中有一个下拉组件,它呈现带有标签和一些选项的select元素。以下是我的测试结果:

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

describe('Dropdown', () => {
  it('should be focused on label click', () => {
    const wrapper = mount(
      <div>
        <label htmlFor={'dropdownId'}>Sort by: </label>
        <Dropdown
          id="dropdownId"
          options={[
            { key: '', display: 'Please select a value' },
            { key: 'NJ', display: 'New Jersey' },
            { key: 'NY', display: 'New York' },
          ]}
        />
      </div>,
    );

    const dropdownLabel = wrapper.find('label');
    const dropdownSelect = wrapper.find(Dropdown);

    dropdownLabel.simulate('click', {});
    expect(dropdownSelect.is(':focus')).toBe(true);
  });
});

我正在尝试模拟标签上的点击以测试select元素是否具有焦点,但是出现以下错误:TypeError: Enzyme received a pseudo-class CSS selector (':focus') that it does not currently support in tests.webpack.js

我正在使用PhantomJS版本2.1.1

有没有办法在不使用CSS伪选择器的情况下复制测试的目的?

感谢。

1 个答案:

答案 0 :(得分:-3)

您应该考虑使用不同的单元测试套件。

https://github.com/airbnb/enzyme/issues/703