Асинхронный тест с возвращением пустого div - PullRequest
Новая
       10

Асинхронный тест с возвращением пустого div

1 голос
/ 07 июля 2019

Итак, у меня есть этот тест, и я получаю пустой div, не знаю почему.

тест 

import React from 'react';
import ReactDOM from 'react-dom';
import TestAxios from '../test_axios.js';
import {act, render, fireEvent, cleanup, waitForElement} from '@testing-library/react';
import axiosMock from "axios";


afterEach(cleanup)

it('Async axios request works', async () => {
  const url = 'https://jsonplaceholder.typicode.com/posts/1'
  const { getByText, getByTestId } = render(<TestAxios url={url} />);

  act(() => {
    axiosMock.get.mockImplementation(() => Promise.resolve({ data: {title: 'some title'} })
         .then(console.log('ggg')) )
  })


  expect(getByText(/...Loading/i).textContent).toBe("...Loading")

  const resolvedSpan = await waitForElement(() => getByTestId("title"));

  expect((resolvedSpan).textContent).toBe("some title");

  expect(axiosMock.get).toHaveBeenCalledTimes(1);
  expect(axiosMock.get).toHaveBeenCalledWith(url);

 })

компонент 

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

const TestAxios = (props) => {
  const [state, setState] = useState()

  useEffect(() => {
    axios.get(props.url)
      .then(res => setState(res.data))
  }, [])


  return (
  <div>
    <h1> Test Axios Request </h1>
      {state
        ? <p data-testid="title">{state.title}</p>
        : <p>...Loading</p>}
  </div>
  )
}


export default TestAxios;

макет функции 

export default {
  get: jest.fn().mockImplementation(() => Promise.resolve({ data: {} }) )
};

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

enter image description here

1 Ответ

0 голосов
/ 08 июля 2019

Итак, я понял, что вам нужно вызвать значение axios.mockresolved перед рендерингом компонента, иначе он просто будет использовать значение, которое вы указали в качестве значения по умолчанию в модуле mock axios.

import React from 'react';
import ReactDOM from 'react-dom';
import TestAxios from '../test_axios.js';
import {act, render, fireEvent, cleanup, waitForElement} from '@testing-library/react';
import axiosMock from "axios";


afterEach(cleanup)

it('Async axios request works', async () => {
  axiosMock.get.mockResolvedValue({data: { title: 'some title' } })

  const url = 'https://jsonplaceholder.typicode.com/posts/1'
  const { getByText, getByTestId, rerender } = render(<TestAxios url={url} />);

  expect(getByText(/...Loading/i).textContent).toBe("...Loading")

  const resolvedEl = await waitForElement(() => getByTestId("title"));

  expect((resolvedEl).textContent).toBe("some title")

  expect(axiosMock.get).toHaveBeenCalledTimes(1);
  expect(axiosMock.get).toHaveBeenCalledWith(url);
 })
...