属性单元测试失败，只意味着在单个节点上运行

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将 prop 名称作为参数并返回 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!
})