How to unit test if a select element in React has focus using Enzyme?

Viewed 2173

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

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

I'm trying to simulate a click on the label to test if the select element will have focus, but getting the following error: TypeError: Enzyme received a pseudo-class CSS selector (':focus') that it does not currently support in tests.webpack.js

I'm using PhantomJS version 2.1.1

Is there a way to replicate the purpose of test, without using CSS pseudo selectors?

Thanks.

0 Answers
Related