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.