Модульный тест для атрибута не выполняется, предназначен только для запуска на одном узле?

Question

Я использую Enzyme и Jest, чтобы проверить, есть ли в раскрывающемся списке атрибут id.

import React from "react";
import { mount } from "enzyme";
import ListPicker from './ListPicker.js'

describe("ListPicker", () => {
  let props;
  let mountedListPicker;
  const labelText = "label";
  const idName = "id";
  const wrapper = () => {
    if (!mountedListPicker) {
      mountedListPicker = mount(
        <ListPicker label={labelText} id={idName} {...props} data-component="ListPicker">
          <option value="USA">United States</option>
          [...]
        </ListPicker>
      );
    }
    return mountedListPicker;
  };

  beforeEach(() => {
    props = {
        id: undefined
    };

    mountedListPicker = undefined;
  });

Что я здесь не так делаю?

 it("has an id attribute", () => {
    const idName = wrapper().find("id");
    expect(idName.prop()).toBe(idName);
  });

В результатах теста говорится, что «метод« props »предназначен только для запуска на одном узле. Вместо него найдено 0».

Answer 1

find берет селектор и возвращает ReactWrapper для найденных узлов.

prop принимает имя реквизита в качестве аргумента и возвращает его значение.

---

Чтобы выбрать id, вы бы использовали селектор CSS , например: .find('#id')

Чтобы получить значение свойства id, вы должны использовать .prop('id')

Вот простой пример:

import * as React from 'react';
import { mount } from 'enzyme';

test('simple test', () => {
  const wrapper = mount(<div id='outer'><div id='inner'>content</div></div>);

  expect(wrapper.prop('id')).toBe('outer'); // Success!

  const innerDivWrapper = wrapper.find('#inner');
  expect(innerDivWrapper.prop('id')).toBe('inner');  // Success!
})