开玩笑的异步测试返回空 div

Question

所以我有这个 axios 测试，我得到一个空 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 元素，但我什么也没得到。我尝试了很多不同的东西但似乎无法让它工作不知道为什么它不起作用

Answer 1

所以我发现你必须在渲染组件之前调用 axios.mockresolved 值，否则它只会使用你提供的值作为模拟 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);
 })

开玩笑的异步测试返回空 div

Async test with jest returning empty div

reactjs

jestjs

react-testing-library