Jest: Как протестировать компонент, который отправляет действие API - PullRequest
0 голосов
/ 05 марта 2019

Я новичок в тестировании, я пытаюсь понять, возможно ли протестировать вызов API, который отправляется из компонента.Можно ли ждать ответа от сервера?

import React from 'react';
import { render, fireEvent, cleanup, waitForElement } from 'react-testing-library';
import 'jest-dom/extend-expect'

import App from 'src/app';

import { store } from 'stories/index.stories.js';
import { Provider, connect } from 'react-redux';

const renderComponent = () => (<App />);

it('renders correctly', () => {

  const { container, getByText, queryAllByText, getByPlaceholderText } = renderComponent();

  expect(container).not.toBeEmpty();

  expect(getByText(/Discover/i)).toBeTruthy();

  const discoverBtn = getByText(/Discover/i);

  fireEvent.click(discoverBtn); // this will dispatch an action from the component

  //what should i do next ?
});

1 Ответ

0 голосов
/ 05 марта 2019

Вот как я это делаю.

Сначала я помещаю все свои fetch запросы в отдельный файл, скажем /api/index.js.Таким образом, я легко могу высмеять их в своих тестах.

Затем я выполняю действия, которые будет выполнять пользователь.Наконец, я проверяю, что API был вызван и что DOM был обновлен правильно.

import { aFetchMethod } from './api'

// With jest.mock our API method does nothing
// we don't want to hit the server in our tests
jest.mock('./api')

it('renders correctly', async () => {
  const { getByText } = render(<App />)

  aFetchMethod.mockResolvedValueOnce('some data that makes sense for you')
  fireEvent.click(getByText('Discover'))

  expect(aFetchMethod).toHaveBeenCalledTimes(1)
  expect(aFetchMethod).toHaveBeenCalledWith('whatever you call it with')

  // Let's assume you now render the returned data
  await wait(() => getByText('some data that makes sense for you'))
})
...