Тестирование второго вызова useEffect с использованием Enzyme - PullRequest
Новая
       16

Тестирование второго вызова useEffect с использованием Enzyme

0 голосов
/ 30 марта 2020

У меня есть компонент, который выполняет начальный вызов для получения данных и отправки дочернему компоненту. Он также передает обработчик дочернему компоненту, который является обратным вызовом дочернего компонента, который вызывает получение обновленных данных. Для этого я пытаюсь написать тест для покрытия кода. Пока что я не могу написать надлежащий тест для этого компонента. 

//Source File

function MyComponent() {
  const [users, setUsers] = useState([]) ;
  const [companies, setCompanies] = useState([]) ;
  const [fetchData, setFetchData] = useState(undefined);

  const handleOnSave = () => setFetchdata(true);

  const fetchUsers = async () => {
    await fetch('/users')
      .then(...) //setUsers(response.values) on success
      .catch(...) //handle error case      
  };

  const fetchCompanies = async () => {
    await fetch('/companies')
      .then(...) //setCompanies(response.values) on success
      .catch(...) //handle error case
  };

  React.useEffect(() => {
        Promise.all([fetchUsers(), fetchCompanies()]);
    }, [fetchData]);

  return (
    <MyChildComponent users={users} companies={companies} saveHandler={handleOnSave}/>    
  )
}

//Test File

it('should refetch', () => {
  //had to set this stub to call all fetch
  const useEffect = sinon.stub(React, 'useEffect');

  useEffect.onCall(0).callsFake((f) => f());
  useEffect.onCall(1).callsFake((f) => f());
  useEffect.onCall(2).callsFake((f) => f());
  useEffect.onCall(3).callsFake((f) => f());

  fetchMock
    .get('/users', { values: expectedUsers })
    .get('/users', { values: expectedUpdatedUsers }, { overwriteRoutes: false });
  fetchMock
    .get('/companies', { values: expectedCompanies })
    .get('/companies', { values: expectedUpdatedCompanies }, { overwriteRoutes: false });

  const renderedElement = enzyme.shallow(<MyComponent/>);
  renderedElement.props().saveHandler();
  await fetchMock.flush(true);

  expect(renderedElement.props().users).to.be.eql(expectedUpdatedUsers);
  expect(renderedElement.props().companies).to.be.eql(expectedUpdatedCompanies);  
});

Тест, который я пытаюсь написать, - убедитесь, что компонент MyChildComponent вызывается с обновленными данными пользователей и компаний. Все, что я получаю от этого теста, ожидается в неопределенном. Любое предложение?

Спасибо

...