react jest and enzyme, find 'option' with hidden attribute

user_6936682 0
Viewed 277

I'm testing a combobox, which has a placeholder value like so:

<option key='blankChoice' hidden value>{blankChoice}</option>

I want to run a test, that checks if the blank choice is actually appended to my combobox, therefore I did the following:

beforeEach(() => {
    wrapper = mount(<ComboBox options={options} />)
});

afterEach(() => {
    wrapper.unmount();
})
test('Combobox has 1 hidden options', () => {
    const elem = wrapper.find('option')
    expect(elem).toHaveAttribute("hidden").toBe(1)
})

The above returns an error to me:

received value must be an HTMLElement or an SVGElement.

I sort of understand this error, but I'm in doubt if my general approach is correct at all. Therefore, how do I test if my comobobx has 1 hidden <option>

enzyme jestjs reactjs
1 Answers

wrapper.find() returns ReactWrapper which is an object. You need to use .getDOMNode() => DOMComponent to return the outer most DOMComponent of the current wrapper.

E.g.

ComboBox.tsx:

import React from 'react';

export default function ComboBox() {
  return (
    <div>
      <select>
        <option key="blankChoice" hidden></option>
      </select>
    </div>
  );
}

ComboBox.test.tsx:

import { mount } from 'enzyme';
import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import ComboBox from './ComboBox';

describe('68393118', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = mount(<ComboBox />);
  });

  afterEach(() => {
    wrapper.unmount();
  });
  test('Combobox has 1 hidden options', () => {
    const elem = wrapper.find('option');
    expect(elem.getDOMNode()).toHaveAttribute('hidden');
  });
});

test result:

 PASS  examples/68393118/ComboBox.test.tsx (10.678 s)
  68393118
    ✓ Combobox has 1 hidden options (53 ms)

--------------|---------|----------|---------|---------|-------------------
File          | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
--------------|---------|----------|---------|---------|-------------------
All files     |     100 |      100 |     100 |     100 |                   
 ComboBox.tsx |     100 |      100 |     100 |     100 |                   
--------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        11.539 s
user_64635580
Related