React Jest：如何模拟服务？

Question

问题

我正在寻找一种嘲笑我的KeyCloak服务的方法，称为userService。实际上，我只需要模拟isloggedin和登录函数。我认为这不是一项艰巨的任务，但是经过几个小时的尝试，我仍然无法为此问题找到工作解决方案。

代码示例

uservice.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;

我已经尝试使用jest.mock（）函数。因此，现在我可以无错误地推开loginbutton，但是AddButton仍然没有激活。

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

因此，我找到了解决方案：

我不必模拟uservice.js文件，而是keycloak-js -module。为此，我创建了一个名为__模拟__的文件夹，然后放入模拟的模块中。开玩笑会自动知道从模拟文件夹而不是节点模块调用keycloak-js。

src/模拟/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;