reactjs - 使用 Context 和 useEffect 在 React 应用程序中编写异步代码的集成测试

Question

因此，在 useEffect 中，我从 API 获取对象，然后将响应数据分派到 Context reducer，然后更新状态。它看起来像这样：

export const fetchItem = (id) => request({url: `/items/${id}`, method: 'get'});

...

const {dispatch, singleItem} = useProvider();
    
useEffect(() => {
        const id = getItemIdFromUrl(props);
        fetchItem(id).then((response) => {
          dispatch(action(response.data.data));
        });
      }, [props, dispatch]);

我想为此编写一个很好的集成测试。我正在使用带有 Jest 的 react-testing-library。我试图模拟 fetchItem 函数的返回值，然后检查是否一切都正确呈现但不断收到此警告：

act(() => {
        /* fire events that update state */
      });
      /* assert on the output */

有机会正确地做到这一点吗？

这是请求方法的样子：

import axios from 'axios';
import humps from 'humps';
import {getItem} from './localStorage';

const api = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
});

api.interceptors.response.use(
  (response) => humps.camelizeKeys(response),
  (error) => Promise.reject(error.response),
);

api.interceptors.request.use(
  (request) => {
    request.data = humps.decamelizeKeys(request.data);
    return request;
  },
  (error) => Promise.reject(error.request),
);

export default function request({url, method, headers = {}, data}) {
  try {
    const token = getItem('token');

    headers.Authorization = token;

    return api({method, url, headers, data});
  } catch (error) {
    if (error.status === 500) {
      console.log('HANDLE ERROR: ', error);
    }

    throw error;
  }
}

标签： reactjsasynchronoustestingjestjsreact-testing-library