Реагировать vitest innerHTML на Equal

Question

Я пытаюсь протестировать Reactnode с реакцией, vitest и библиотекой тестирования.

Но форматирование из innerHTML не будет совпадать. Как я могу избежать форматирования для тестовых случаев?

        - Expected  - 3
  + Received  + 1
  
  - <div>
  -   content
  - </div>
  + <div>content</div>

Вот мой тестовый код

          const content: ReactElement = (<div>content</div>);
    makeSUT('title 2', content);

    const contentResult = await screen.findByTestId('modal-content');
    expect(contentResult).toBeInTheDocument();


    expect(contentResult.innerHTML).toEqual(content);

Спасибо

Answer 1

Как вы можете видеть, использование таким образом может быть ненадежным и давать сбои из-за чего-то такого простого, как разница в новых строках, а это не то, как вы хотите тестировать свои приложения, и не имеет отношения к тому, правильно ли они работают.

Вместо того, чтобы сравнивать innerHTMLиз двух <div>элементов, чтобы включить их семантические теги, я рекомендую использовать findByTextчтобы определить, существует ли текст в документе.

Например:

          const contentWrapper = screen.getByTestId('custom-element');
    const contentResult = screen.findByText('content');
    
    // If the component with the test id is in the document, it rendered
    expect(contentWrapper).toBeInTheDocument();

    // contentResult will not be find the text if it is not there and this will fail
    expect(contentResult).to.exist;

На самом деле, приведенные выше утверждения являются избыточными, поскольку «контента» не будет в документе, если компонент не отобразится, и будет выдано сообщение об ошибке, если текст не найден (как в утверждении, так и из-за того, как работает.

Пример:

          const contentResult = screen.findByText('content');

    expect(contentResult).to.exist;

Почему я рекомендую использовать getByTextнад использованием тестового идентификатора? В документации по библиотеке тестирования (которую вы используете и которая не относится к Vitest) рекомендуется использовать идентификаторы тестов для запроса элементов как наименее предпочтительный/рекомендуемый метод запроса.

Из документации библиотеки тестирования : «Пользователь не может видеть (или слышать) их, поэтому это рекомендуется только в тех случаях, когда вы не можете сопоставить роль или текст или это не имеет смысла (например, текст является динамическим)». , что противоречит их принципу «ваш тест должен максимально напоминать то, как пользователи взаимодействуют с вашим кодом (компонентом, страницей и т. д.)».

Чтобы увидеть работающий пример того, что я описал, я создал демо на StackBlitz.