Тестирование добавленных html атрибутов с помощью React.cloneElement - PullRequest
0 голосов
/ 17 июня 2020

Я пытаюсь протестировать компонент, который принимает дочерний элемент и использует 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...