Содержит энзимный монтируемый контейнер обертки содержит элементы не удается найти элементы

Question

Я пытаюсь проверить, отображает ли Menu значение MenuItems:

import React from "react";
import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

import { mount } from "enzyme";
configure({ adapter: new Adapter() });

const MenuItem = ({ children }) => <li>{children}</li>;
const Menu = () => (
  <ul>
    <MenuItem>foo</MenuItem>
    <MenuItem>bar</MenuItem>
  </ul>
);

const HyperMenu = () => <Menu />;

const wrapper = mount(<HyperMenu />);

expect(wrapper.containsAllMatchingElements([<MenuItem />])).toBeTruthy();

, хотя выглядит как действительный случай , фермент не может найти MenuItemsи тест не пройден.Это почему?

codesandbox

wrapper.debug() spits

<HyperMenu>
  <Menu>
    <ul>
      <MenuItem>
        <li>
          foo
        </li>
      </MenuItem>
      <MenuItem>
        <li>
          bar
        </li>
      </MenuItem>
    </ul>
  </Menu>
</HyperMenu> 

Answer 1

containsAllMatchingElements работает, определяя «выглядит ли элемент в обертке как« переданные элементы », проверяя, присутствуют ли все реквизиты ожидаемого элемента».

Один из перечисленных «общих ошибок»в нижней части документа стоит «иметь в виду, что этот метод определяет сопоставление на основе сопоставления также и дочерних узлов».

Глядя на исходный код, сравнение выполняется функцией internalNodeCompare, который сравнивает реквизиты здесь и потомков здесь .

В приведенном выше тесте containsAllMatchingElements передается <MenuItem />, что вызывает егоискать MenuItem без подпорок и дочерних элементов, который не работает, поскольку оба элемента MenuItem в оболочке имеют дочерние элементы.

Тест проходит, если он модифицирован для включения дочерних элементов MenuItem:

expect(wrapper.containsAllMatchingElements([<MenuItem>foo</MenuItem>, <MenuItem>bar</MenuItem>])).toBeTruthy();   // SUCCESS