How can I mock useQuery from react-fetching-library?

Question

Hello how can I mock useQuery? I have container component which is responsible for calling an api, and simple ui component to display data for the user. I'm receiving current error

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

Container

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();
  });
});

tmhao2005 · Accepted Answer · 2020-08-21 16:05:03Z

1

I think you can simply you mock your react-fetching-library module as following:

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

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

// Everything looks the same I guess

answered Aug 21, 2020 at 16:05

tmhao2005

17.7k4 gold badges46 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Verthon Over a year ago

Thanks, however this solution still try to fetch external api

Verthon Over a year ago

Error: Error: connect ECONNREFUSED 127.0.0.1:80 at Object.dispatchError

tmhao2005 Over a year ago

I’m not sure if useQuery will be called multiple times so try to mock all the time instead of just once by using mockImplentation

Verthon Over a year ago

It is in the top of the file, it helped with resolving the error with calling api. Thanks!

Verthon Over a year ago

Yes I don't have error with refused conection, now it's only about some test wrapper issue, Thank you very much.

|

Collectives™ on Stack Overflow

How can I mock useQuery from react-fetching-library?

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related