Как «очистить макеты» для fireEvent «@ testing-library / реагировать»?

Question

Я использую @testing-library/react для тестирования приложения с устаревшим кодом. В принципе, каждый раз, когда я нажимаю кнопку, отображается компонент сообщения. Сообщение является устаревшим кодом. Этот устаревший компонент внедряет HTML в DOM.

При тестировании моего приложения я понял, что код, введенный устаревшим кодом, неясен между тестами.

Repos.js

import React, { useState } from 'react';

function showMessage() {
  const message = document.createElement('div');
  message.innerHTML = '<h1>Successfully saved!</h1>';
  document.body.appendChild(message);
}

export default function Repo() {
  const [repos, setRepos] = useState([]);

  function handleOnClick() {
    setRepos([
      { name: 'Repo 1' },
      { name: 'Repo 2' },
    ]);
    showMessage();
  }

  return (
    <nav>
      <button onClick={handleOnClick}>Show repos</button>
      <ul>
        {repos.map(repo => <li data-testid={repo.name} key={repo.name}>{repo.name}</li>)}
      </ul>
    </nav>
  )
}

Repos.test.js

import React from 'react';
import Repos from './Repos';
import { render, cleanup, fireEvent } from '@testing-library/react';


describe('Repos', () => {
  describe('when clicking the button', () => {
    beforeEach(() => cleanup());

    it('should updates repos collection', () => {
      const { container, getByText, getByTestId } = render(<Repos />)

      fireEvent.click(getByText('Show repos'));

      expect(getByTestId('Repo 1')).toBeTruthy();
      console.log(container.innerHTML);
    });

    it('should show the success message component', () => {
      const { container, getByText } = render(<Repos />)

      fireEvent.click(getByText('Show repos'));


      expect(getByText('Successfully saved!')).toBeTruthy();
      console.log(container.innerHTML);
    })
  })
})

Answer 1

Вы можете (и должны) очищать document перед каждым тестом:

beforeEach(() => {
  document.body.innerHTML = "";
});

Если случайно ваш showMessage находится в отдельном файле, я бы предложил посмеяться над ним в ваших тестах. Таким образом, вы также избежали бы повсеместного тестирования его внутренних компонентов (за исключением тестов, ориентированных только на showMessage)