如何从react-fetching-library模拟出useQuery?

时间:2020-08-21 14:21:05

标签: reactjs jestjs react-testing-library

您好,我该如何模拟useQuery?我有负责调用api的容器组件,以及用于向用户显示数据的简单ui组件。我收到当前错误

console.error node_modules/@testing-library/react/dist/act-compat.js:52
Error: Error: connect ECONNREFUSED 127.0.0.1:80

容器

import React from 'react';
import { screen, waitForElement, getByText } from '@testing-library/react';
import { useQuery } from 'react-fetching-library';

import { render } from 'tests';
import tags from 'api/mocks/tags-response.json';

import { TrendingTagsContainer } from './TrendingTagsContainer';
jest.mock('react-fetching-library');

describe('TrendingTagsContainer component', () => {
  test('should render component with correct title and description', async () => {
    const action = jest.fn();
    const useQuery = jest.fn(action());
    useQuery.mockReturnValue({ loading: false, error: false, query: () => true, payload: { tags } });
    console.log(useQuery());
    const { getByText } = render(<TrendingTagsContainer />);
    await waitForElement(() => screen.getByText('#Testing react'));
    expect(screen.getByText('#Testing react')).toBeInTheDocument();
  });
});

1 个答案:

答案 0 :(得分:1)

我认为您可以简单地模拟react-fetching-library模块,如下所示:

import { useQuery } from 'react-fetching-library';

jest.mock('react-fetching-library');

// Everything looks the same I guess