OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Not able to Mock constructor defined outside of the React Component using Jest

  • Thread starter Thread starter gixlg
  • Start date Start date
G

gixlg

Guest
I have an issue with a test with jest mock.

The question is simple why I'm not able to properly mock the constructor if I define it outside of the component?

(*)In this example, I'm using reactQuery but this scenario is unrelated to this.

Code:
import * as reactQuery from '@tanstack/react-query';
import { render } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

//If I place here the definition of the client it doesn't work
const client = new QueryClient();

const TestComponent = () => {
  //<--- Instead if I place it here (inside the component) it works. Why???

  return (
    <QueryClientProvider client={client}>
      <div>Some Component</div>
    </QueryClientProvider>
  );
};

jest.mock(`@tanstack/react-query`);

it(`Test`, () => {
  const constructorSpy = jest.spyOn(reactQuery, `QueryClient`);

  render(<TestComponent />);

  expect(constructorSpy).toHaveBeenCalled();

  /*
    Error: expect(jest.fn()).toHaveBeenCalled()

    Expected number of calls: >= 1
    Received number of calls:    0
   */

});

Thanks for the help.

<p>I have an issue with a test with <a href="https://jestjs.io/docs/en/mock-functions" rel="nofollow noreferrer">jest mock</a>.</p>
<p>The question is simple why I'm not able to properly mock the constructor if I define it outside of the component?</p>
<p>(*)In this example, I'm using reactQuery but this scenario is unrelated to this.</p>
<pre class="lang-js prettyprint-override"><code>import * as reactQuery from '@tanstack/react-query';
import { render } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

//If I place here the definition of the client it doesn't work
const client = new QueryClient();

const TestComponent = () => {
//<--- Instead if I place it here (inside the component) it works. Why???

return (
<QueryClientProvider client={client}>
<div>Some Component</div>
</QueryClientProvider>
);
};

jest.mock(`@tanstack/react-query`);

it(`Test`, () => {
const constructorSpy = jest.spyOn(reactQuery, `QueryClient`);

render(<TestComponent />);

expect(constructorSpy).toHaveBeenCalled();

/*
Error: expect(jest.fn()).toHaveBeenCalled()

Expected number of calls: >= 1
Received number of calls: 0
*/

});

</code></pre>
<p>Thanks for the help.</p>
 

Latest posts

Top