Базовый c объяснение шут-теста для создания приложения

Question

Я относительно новичок в JS и не могу понять, что происходит в строке 2 следующего шутливого теста шаблона в последнем приложении create-реагировать:

    test('renders learn react link', () => {
      const { getByText } = render(<App />);
      const linkElement = getByText(/learn react/i);
      expect(linkElement).toBeInTheDocument();
    });

Визуализирует всегда возвращать функцию с именем getByText? Это разрушение? Почему он используется в качестве метода в третьей строке?

Answer 1

Пример кода, о котором вы спрашиваете, не является частью Jest per se. Функция render предоставляется React Testing Library , популярным инструментом для тестирования компонентов React.

Да, в строке 2 деструктуризация используется для получения функции getByText. Функция render на самом деле возвращает объект, содержащий ряд функций , которые позволяют вам проверять виртуальные узлы DOM, представленные React.

getByText может использоваться для поиска все элементы в визуализированном виртуальном DOM, у которых есть текстовый узел с текстовым содержимым, совпадающим с заданным регулярным выражением.

В строке 3 вашего примера кода это используется, чтобы проверить, содержится ли где-нибудь текст «учиться реагировать» в виртуальном DOM, представленном компонентом <App />.

В строке 4 функция ожидаемого, предоставленная Jest, используется для подтверждения того, что этот текст находится в документе.

Метод toBeInTheDocument функции ожидания Jest здесь фактически предоставляется другой библиотекой, расположенной поверх библиотеки React Testing, jest-dom .

Answer 2

Синтаксис называется «деструктуризация». Он извлекает методы / свойства из объектов.

т.е.

// some random object
const obj = {
  property1: 'somevalue',
  method1: () => "hello"
}

const {property1, method1 } = obj;
console.log(property1, method1());

Это может быть полезно при попытке часто вызывать метод или значение из объекта и раздражаться, вызывая его с нотацией объекта (obj.method()) несколько раз.

В вашем примере вы можете переписать это как

test('renders learn react link', () => {
  const element = render( < App / > );
  const linkElement = el.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

и функционально он будет таким же.