How to unit test if select item in React has focus using enzyme?
I have a dropdown component in React that displays a select element with a label and some parameters. This 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 am trying to simulate clicking on a label to check if a select item will have focus, but I get the following error: TypeError: Enzyme received a pseudo-class CSS selector (':focus') that it does not currently support in tests.webpack.js
I am using PhantomJS version 2.1.1
Is there a way to replicate the target of a test without using CSS pseudo selectors?
Thank.
+3
source to share