Запустите ловушку useEffect перед визуализацией jest-снимка в тесте Reaction-Test-Renderer. - PullRequest
Новая
       81

Запустите ловушку useEffect перед визуализацией jest-снимка в тесте Reaction-Test-Renderer.

1 голос
/ 13 февраля 2020

Допустим, у меня есть следующий базовый c компонент с именем Basic.js: 

import React, { useState, useEffect } from 'react';

export default () => {
  const [items, setItems] = useState([{ name: 'original' }]);

  useEffect(() => {
    setItems([{ name: 'new1' }, { name: 'new2' }]);
  }, []);

  return (
    <div>{items && items.map((item, i) => <div key={i}>{item.name}</div>)}</div>
  );
};

Используя реагировать-тест-рендерер , я могу написать следующий тест: 

import React from 'react';
import TestRenderer from 'react-test-renderer';
import Basic from './Basic';

describe('Basic', () => {
  test('renders', async done => {
    let component = TestRenderer.create(<Basic />);
    setImmediate(() => {
      expect(component.toJSON()).toMatchSnapshot();
      done();
    });
  });
});

Что генерирует следующий моментальный снимок шутки при запуске npm test: 

exports[`Basic renders 1`] = `
<div>
  <div>
    original
  </div>
</div>
`;

Как мне написать тест, чтобы хук useEffect запускался и отражался в снимке? Таким образом, сгенерированный снимок выглядит следующим образом: 

exports[`BasicClass renders 1`] = `
<div>
  <div>
    new1
  </div>
  <div>
    new2
  </div>
</div>
`;

Разве это невозможно, есть ли библиотека тестирования, которую я могу использовать для запуска этой ловушки?

...