Я пытаюсь протестировать компонент, который принимает дочерний элемент и использует React.cloneElement
для добавления атрибута id
к визуализированному HTML. Это работает в настройках браузера, но не работает во время теста. Используя функцию RTL debug
, я вижу, что дерево, которое отображается с помощью jest, никогда не включает атрибут appended. Вот суть того, что у меня сейчас есть:
// map over the children, set the new component tree as state
const id = "test-cloak"
setTree(React.cloneElement(child, { id, test: "hello" }));
// the component tree now returns the following when logged:
{
'$$typeof': Symbol(react.element),
type: [Function: BasicComponentTree],
key: '.0',
ref: null,
props: { id: 'test-cloak', test: 'hello' },
_owner: null,
_store: {}
}
// when the component is returned, render the new tree conditionally
{tree && <Fragment key={id}>{tree}</Fragment>}
Простой вариант - обернуть дерево элементом с идентификатором, но это не соответствует тому, что мне нужно, - компонент должен измените переданные дочерние элементы таким образом, чтобы это не повлияло на макет. Обертывание элемента потенциально может означать нарушение css в другом месте.
Когда я запускаю тест, я получаю следующее:
<body>
<div>
<div
data-testid="cloak-test"
>
<style>
@media(max-width: 800px) {
#test-cloak {
display: none;
}
}
</style>
// This should have the appended id attribute
<div>
<h1>
Cloak me!
</h1>
</div>
</div>
</div>
</body>
Как я могу go протестировать визуализированный html после того, как React прошел через реквизиты как атрибуты? Я хочу избежать тестирования состояния tree
, меня действительно волнует то, что атрибут достигает DOM