使用 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

使用 jest 我已经能够模拟对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");
  });
});