Каждый раз, когда я пишу тест для компонента React, я обнаруживал, что снова и снова использую одну и ту же структуру при тестировании компонентов React.
Давайте рассмотрим Icon компонент, который принимает опору name.
И соответствующий ему тест:
Ключевым моментом здесь является функция buildTree. Эта функция будет использоваться во всех тестовых примерах. Это помогает нам определить экземпляр компонента с минимальным набором текста.
Вызов buildTree без аргументов вернет экземпляр компонента по умолчанию. Что мы подразумеваем под «дефолтом», зависит от нас. Однако мы можем создать новый реквизит внутри объекта. Этот объект объединится с defaultProps и вернет компонент с определенными нами реквизитами.
В примере со значком мы протестировали случай по умолчанию для компонента Icon со снимком. В нашем втором тестовом примере мы специально протестировали, чтобы проверить, действительно ли результирующий элемент имеет className, который мы ожидаем от него. Для этого мы явно передали новый name.
buildTree окажется очень полезным для более сложных компонентов, особенно тех, у которых много свойств и, следовательно, возможно, много тестовых примеров. Имея простой способ создания экземпляров нашего компонента, мы можем сделать наш код коротким и кратким и, следовательно, сохранить наш тестовый код чистым.
