Creating manual mock with Promise. Throw error received value must be a mock or spy function

Viewed 22

I have a react project and there is a Services class. Class methods makes to get queries then response data render to the page. (minimized version for illustration)

# src/services/services.js
class Services {
  async loadUsers() {
    return fetch(`https://jsonplaceholder.typicode.com/users`);
  }
}

I try to create manual mock setting the proper values for testing.

# src/services/__mocks__/services.js
class Services {
  async loadUsers() {
    return Promise.resolve({
        json: () => (
          [
            {
              id: 1,
              name: "Leanne Graham"
            },
            {
              id: 2,
              name: "Ervin Howell"
            },
            {
              id: 3,
              name: "Clementine Bauch"
            }
          ]
        )
      }
    )
  }
}

The mock is loaded globally in setupTests.js

# src/setupTests.js
jest.mock(./services/services);

And here is my test code, which getting the error:
Error: expect(received).toHaveBeenCalled()
Matcher error: received value must be a mock or spy function

# src/App.test.js
import App from "./App";
import {render, screen} from "@testing-library/react";
import Services from "./services/services";

test("correct router test", async () => {
    render(
        <App/>
    );

    expect(Services.loadUsers).toHaveBeenCalled();//throw error

Also i tried to do the method loadUsers like this:

# src/services/__mocks__/services.js
class Services {
  loadUsers = jest.fn(() => {
    return Promise.resolve({
        json: () => (
          [
            {
              id: 1,
              name: "Leanne Graham"
            },
            {
              id: 2,
              name: "Ervin Howell"
            },
            {
              id: 3,
              name: "Clementine Bauch"
            }
          ]
        )
      }
    )
  })
}

but during testing i got an error from the App.js: Cannot read properties of undefined (reading 'then')

Where is my mistake? Give me the hand with this please.

0 Answers
Related