React Jest: How to mock Service? - reactjs

Question

Problem
I am looking for a way to mock my keycloak service called UserService. Actually I just need to mock the isLoggedIn and the login functions. I do not think this is a difficult task, but after some hours of trying I am still not able to get a working solution for this problem.
Code Samples
UserService.js
import Keycloak from "keycloak-js";
const _kc = new Keycloak({
url: "http://localhost:80",
realm: "realmName",
clientId: "clientName"
});
const initKeycloak = (onAuthenticatedCallback, onNotAuthenticatedCallback) => {
_kc.init(
{
onLoad: 'check-sso',
silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',
pkceMethod: 'S256',
checkLoginIframe: false
}
)
.then((authenticated) => {
if (!authenticated) {
console.error("user is not authenticated..!");
}
onAuthenticatedCallback();
})
.catch((error) => {
onNotAuthenticatedCallback();
})
};
const doLogin = _kc.login;
const doLogout = _kc.logout;
const getToken = () => {
return _kc.token;
}
const isLoggedIn = () => {
if (_kc.token) {
return true;
} else {
return false;
}
}
const updateToken = (successCallback) => {
_kc.updateToken(5)
.then(successCallback)
.catch(doLogin);
}
const getUsername = () => _kc.tokenParsed?.preferred_username;
const hasRole = (roles) => {
return roles.some((role) => _kc.hasRealmRole(role));
}
const UserService = {
initKeycloak,
doLogin,
doLogout,
isLoggedIn,
getToken,
updateToken,
getUsername,
hasRole,
};
export default UserService;
I already tried to use the jest.mock() function. So now I can push the loginButton without an error, but the addButton still does not activate.
import { render, screen } from "#testing-library/react";
import userEvent from "#testing-library/user-event";
import { BrowserRouter } from "react-router-dom";
import OrganizationsPage from "./OrganizationsPage";
import { act } from "react-test-renderer";
jest.mock("../Services/UserService", () => ({
...jest.requireActual("../Services/UserService"),
doLogin: jest.fn(() => { return true }),
isLoggedIn: jest.fn(() => { return true }),
}));
const MockedOrganizationsPage = () => {
return (
<BrowserRouter>
<OrganizationsPage />
</BrowserRouter>
);
}
describe('OrganizationsPage Alter', () => {
it('should activate alter buttons on login', async () => {
// console.log(UserService.isLoggedIn())
await act(async () => render(<MockedOrganizationsPage />))
const loginButton = screen.getByText("Login");
userEvent.click(loginButton);
const addButton = screen.getByText("Add Organization");
userEvent.click(addButton);
})
})

Answer 1

So I found the solution:
I do not have to mock the UserService.js file but more the keycloak-js-module. For this I create a folder called __mocks__ and put in my mocked module. Jest will automatically know to call keycloak-js from the mocks folder instead of node-modules.
src/mocks/keycloak-js.js:
class Keycloak {
token = "token available";
url = null;
realm = null;
clientId = null;
tokenParsed = {
preferred_username: "dummy user",
}
constructor(keycloakConfig) {
this.url = keycloakConfig.url;
this.realm = keycloakConfig.realm;
this.clientId = keycloakConfig.clientId;
}
login = () => {
this.token = "Logged in";
}
logout = () => {
this.token = null;
}
updateToken = () => {
this.token = "Logged in";
return new Promise((resolve, reject) => {
if (!!this.token) {
resolve();
} else {
reject();
}
})
}
init = (startupConfig) => {
}
hasRealmRole = (role) => {
return true;
}
}
export default Keycloak;