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元素，但我什么也没得到。我尝试了很多其他方法，但bt似乎无法使它正常工作，不确定为什么不起作用

does not yield any results

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

1 个答案: