enzyme Селекторы

Многие методы API enzyme принимают селектор в качестве аргумента. Вы можете выбрать несколько способов:

1. Действительный селектор CSS

enzyme поддерживает подмножество допустимых селекторов CSS для поиска узлов внутри дерева рендеринга. Поддержка следующая:

• синтаксис класса (.foo, .foo-bar, и т.д.)
• синтаксис тега элемента (input, div, span, и т.д.)
• синтаксис id (#foo, #foo-bar, и т.д.)
• синтаксис атрибута ([href="foo"], [type="text"], и другие селекторы атрибутов, перечисленные здесь.)
• универсальный синтаксис (*)
• имя компонента React и свойства (Button, Button[type="submit"], и т.д.) - однако, обратите внимание, что настоятельно рекомендуется находить по конструктору/функции компонента, а не по имени отображения.

Синтаксис атрибута также работает по значению, а не по строке. Поддерживаются строковые, числовые и булевы значения свойств. Пример:

const wrapper = mount((
  <div>
    <span anum={3} abool={false} />
    <span anum="3" abool="false" />
  </div>
));

Селектор [anum=3] выберет первый , но не второй, потому что вокруг 3 нет кавычек. Селектор [anum="3"] выберет второй, потому что он явно ищет строку из-за кавычек вокруг 3. То же самое относится и к булевым значениям; [abool=false] выберет первый, но не второй и т.д.

Кроме того, enzyme поддерживает объединение любого из этих поддерживаемых синтаксисов вместе, как и в CSS:

div.foo.bar
input#input-name
a[href="foo"]
.foo .bar
.foo > .bar
.foo + .bar
.foo ~ .bar
.foo input

Ключи и рефы компонентов React

Хотя в большинстве случаев можно использовать любое свойство React, есть исключения. Свойства key и ref никогда не будут работать; React использует эти свойства внутри.

Хотите больше поддержки CSS?

PR с дополнительной поддержкой селекторов CSS будут приняты и это область развития enzyme, на которую, вероятно, будет сделан упор в будущем.

2. Конструктор компонента React

enzyme позволяет находить компоненты React на основе их конструктора. Вы можете передать ссылку на конструктор компонента. Конечно, этот тип селектора проверяет только тип компонента; он игнорирует свойства и дочерние элементы.

function MyComponent() {
  return <div />;
}

// find instances of MyComponent
const myComponents = wrapper.find(MyComponent);

3. Имя отображения компонента React

enzyme позволяет находить компоненты по имени отображения компонента. Если компонент существует в дереве рендеринга, где его имя отображения установлено и первая буква является заглавной, вы можете использовать строку для его поиска:

function MyComponent() {
  return <div />;
}
MyComponent.displayName = 'My Component';

// find instances of MyComponent
const myComponents = wrapper.find('My Component');

ПРИМЕЧАНИЕ: Это будет работать только если селектор (и, следовательно, имя отображения компонента) является строкой, начинающейся с заглавной буквы. Строки, начинающиеся со строчных букв, будут предполагаться как селектор CSS (следовательно, имя тега).

Выбор компонента, обернутого HOC, или компонента с пользовательским именем отображения, даже со строчными буквами (например, withHOC(MyComponent)) также будет работать.

4. Селектор свойства объекта

enzyme позволяет находить компоненты и узлы на основе подмножества их свойств:

const wrapper = mount((
  <div>
    <span foo={3} bar={false} title="baz" />
  </div>
));

wrapper.find({ foo: 3 });
wrapper.find({ bar: false });
wrapper.find({ title: 'baz' });

Неопределенные свойства

Неопределенные свойства не допускаются в селекторе свойства объекта и вызовут ошибку:

wrapper.find({ foo: 3, bar: undefined });
// => TypeError: Enzyme::Props can't have 'undefined' values. Try using 'findWhere()' instead.

Если вам нужно искать по значению свойства undefined, используйте .findWhere().