反应笑话和酶，找到 'option' 具有隐藏属性

Question

我正在测试一个组合框，它有一个占位符值，如下所示：

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

我想运行一个测试，检查空白选项是否真的附加到我的组合框，因此我做了以下操作：

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

以上returns对我来说是一个错误：

received value must be an HTMLElement or an SVGElement.

我有点理解这个错误，但我怀疑我的一般方法是否完全正确。因此，如何测试我的 comobobx 是否隐藏了 1 个 <option>

Answer 1

wrapper.find() returns ReactWrapper 这是一个对象。您需要使用 .getDOMNode() => DOMComponent 到 return 当前包装器的最外层 DOMComponent。

例如

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

测试结果：

 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

反应笑话和酶，找到 'option' 具有隐藏属性

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

reactjs

jestjs

enzyme