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>
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
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments