Тестирование DocumentFragments в «библиотеке тестирования-реакции» с помощью TypeScript

При написании модульных тестов для компонентов React с использованием «библиотеки-тестирования-реакции» я наткнулся на метод asFragment.

asFragment доступен как часть объекта RenderResult, возвращаемого в результате вызова функции «react-testing-library» render, которая также имеет более часто используемые свойства, такие как container.

Этот метод возвращает DOM DocumentFragment, который не изменяется в соответствии с DOM, доступным через container. Обратитесь к документации для получения дополнительной информации о asFragment.

Я хотел использовать фрагмент, как можно было бы использовать container с функциями запроса «react-testing-library», такими как getByText.

import { getByText, render } from 'react-testing-library';
test('Has text', () => {
  const { asFragment } = render(<span>Test</span>);
  const fragment = asFragment();
  const span = getByText(fragment, 'Test');     
  expect(span).not.toBe(null);
  expect(span).toMatchSnapshot();  
});

Эти функции набраны так, чтобы ожидать HTMLElement. Использование DocumentFragment вместо container привело к ошибке TypeScript:

TS2345: Argument of type 'DocumentFragment' is not assignable to parameter of type 'HTMLElement'.
  Property 'accessKey' is missing in type 'DocumentFragment'.

Быстрый as HTMLElement не сработал, вызвав другую ошибку TypeScript:

TS2352: Conversion of type 'DocumentFragment' to type 'HTMLElement' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Property 'accessKey' is missing in type 'DocumentFragment'.

Использование свойства firstChild DocumentFragment решило проблему.

import { getByText, render } from 'react-testing-library';
test('Has text element', () => {
  const { asFragment } = render(<span>Test</span>);
  const fragmentElement = asFragment().firstChild;
  const span = getByText(fragmentElement, 'Test');
  expect(span).not.toBe(null);
  expect(span).toMatchSnapshot();
});

Быстрое визуальное различие снимков, созданных в каждом тесте, показывает, что firstChild и DocumentFragment эквивалентны.

exports[`Has text 1`] = `
<span>
  Test
</span>
`;

exports[`Has text element 1`] = `
<span>
  Test
</span>
`;

Вооружившись этой информацией, я могу безопасно запросить DocumentFragments, созданный с asFragment, используя «библиотеку тестирования-реакции» с TypeScript.