Skip to main content

Селекторы

Синтаксис селекторов построен на основе css-селекторов. Поддерживаемые типы селекторов:

Селекторы

Компонент или DOM-элемент

  • Input - найдет react-компонент с соответствующим именем.
  • div - найдет DOM-элемент

Поиск компонентов осуществляется по displayName компонента.

Компонент с HOC-ами

Компонент может быть завернуть в один или несколько HOC-ов. Если использовать общепринятое именование завернутых в HOC компонентов, например withHocB(Input) и withHocA(withHocB(Input)), то можно использовать такое селекторы:

  • withHocB(Input) - найдет элемент с точным именем
  • withHocB(**(Input)) - найдет элемент, которому последним применили HOC withHocB. Подойдут: withHocB(Input), withHocB(withHocA(Input)), withHocB(withHocC(withHocA(Input))). Не подойдут withHocA(withHocB(withHocC(withHocA(Input))))
  • **(withHocB(Input)) - найдет элемент, которому первым применили HOC withHocB.
  • **(withHocB(**(Input))) - найдет элемент, которому применили HOC withHocB не зависимо от порядка.

Селектор по атрибуту или props-у

Выбирает элемент по значению атрибута. Например

  • [value=test] - найдёт компонент или DOM-элемент, у которого есть props или атрибут value и он равен test.

Поддерживаются такие операторы:

  • [value] - проверка начилия props-а или атрибута
  • = - строго равенство
  • ~= - строгое вхождение в список. Атрибут может быть или массивом, или строкой -- тогда список строится путём разбиения по пробелу.
  • ^= - атриубут начинается с заданной строки
  • $= - атриубут окачивается заданной строкой
  • *= - атриубут содержит заданну строку

Комбинаторы

Селекторы можно комбинировать:

And

  • Input[value='test'][error] - Найдёт компонент Input, у которого value строго равно test и есть свойство error.

Nesting

  • Input input - Найдёт dom-элемент input вложенный на любом уровне в компонент Input.