компонент тестирования с помощью react-aad-msal

Question

Мне нужно написать модульные тесты для нижестоящего класса, высмеивая react-aad-msal. как я могу поиздеваться? Я читал, что фермент имитирует компоненты, но получаю ошибку, поскольку

console.error node_modules/react-aad-msal/dist/commonjs/Logger.js:69
      [ERROR] ClientAuthError: User login is required.

Что, я думаю, не связано с модульным тестированием

    import React, { Component } from "react";
    import "./App.css";
    import { authProvider } from "./authProvider";
    import { AzureAD, AuthenticationState, IAzureADFunctionProps } from "react-aad-msal";
    import Home from "./pages/Home";
    import { ThemeProvider } from "styled-components";
    import { lightTheme } from "./themes";

    export default class App extends Component<{}, { theme: any }> {
      static displayName = App.name;
      constructor(props: any) {
        super(props);

        this.state = {
          theme: lightTheme
        };
      }

      render() {
        return (
          <AzureAD provider={authProvider} forceLogin>
            {({ authenticationState, accountInfo, error }: IAzureADFunctionProps) => {
              switch (authenticationState) {
                case AuthenticationState.Authenticated:
                  return (
                    <ThemeProvider theme={this.state.theme}>
                      <Home userInfo={accountInfo!=null? accountInfo.account.name: ""} />
                    </ThemeProvider>
                  );
                case AuthenticationState.Unauthenticated:
                  return (
                    <div>
                      {
                        <p>
                          <span>
                            An error {error} occured during authentication, please try
                            again!
                          </span>
                        </p>
                      }
                      <p>
                        <span>Hey stranger, you look new!</span>
                      </p>
                    </div>
                  );
                case AuthenticationState.InProgress:
                  return <p>Authenticating...</p>;
              }
            }}
          </AzureAD>
        );
      }
    }

Answer 1

Используя шутку, я смог имитировать звонки на authProvider определяется как таковой:

export const authProvider = new MsalAuthProvider(config, authenticationParameters, options);

Мой компонент должен получить токен доступа, поэтому я имитирую вызов getAccessToken от authProvider

Итак, в моих тестах:

import {authProvider} from "../../app/AuthProvider";
import {render} from "@testing-library/react";

jest.mock('../../app/AuthProvider');

describe('Component', () => {
  it('should match snapshot', () => {
    authProvider.getAccessToken.mockResolvedValue({
      accessToken: 'accessToken'
    });

    const {container} = render(Component);

    expect(container.firstChild).toMatchSnapshot("Component");
  });
});