需要用 jest 为 React 应用程序编写单元测试，该应用程序使用 okta，但收到警告

Question

import { SecureRoute, Security, LoginCallback } from '@okta/okta-react';
import React, { useMemo } from 'react';
import { Route, Switch } from 'react-router-dom';

import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';
import Comp from './Comp';

const config = {oidc: {....}};

const AppRouter = () => {
  const oktaAuth = useMemo(() => new OktaAuth(config.oidc), []);
  const restoreOriginalUri = async (sth, originalUri) => {
    history.replace(toRelativeUrl(originalUri || '/', 'some-path-here'));
  };

  return (
    <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
      <Switch>
        <SecureRoute path="/" exact component={Comp} />
        <Route path="/login/callback" component={LoginCallback} />
      </Switch>
    </Security>
  );
};
export default AppRouter;

我的应用程序中有这个...如果出现以下警告，如何为其编写单元测试？

警告：测试内的安全性更新未包含在 act(...) 中。

Answer 1

waitFor 的事情似乎不起作用。okta Security、SecureRoute 和 LoginCallback 都会触发测试失败（元素未定义等）。

我以这种方式运行它：我想我不需要测试任何这些元素，我只需要测试我的应用程序是否正在渲染。所以我嘲笑了一切，并且在没有过度黑客行为的情况下通过了测试。

希望这会有所帮助，我看到很多人都在为这个问题苦苦挣扎：

import {cleanup, screen, waitFor} from '@testing-library/react';
import App from './App';
import {render} from "react-dom";
import {BrowserRouter} from "react-router-dom";

jest.mock('@okta/okta-react', () => {
  return ({
    useOktaAuth: () => ({
      authState: {isAuthenticated: true},
      authService: {handleAuthentication: jest.fn()},
      oktaAuth: {getUser: () => new Promise((resolve, reject) => { resolve('foo')})},
    }),
    withOktaAuth: (x: any) => x,
    Security: () => <div></div>,
    SecureRoute: () => <div></div>,
    LoginCallback: () => <div></div>
  });
});

describe('<App />', () => {
  let container: any = null;
  beforeEach(() => {
    container = document.createElement('div');
    document.body.appendChild(container);
  });

  afterEach(cleanup);

  test("Render App", async () => {
    render(<BrowserRouter><App /></BrowserRouter>, container);
    const comp = await screen.findByTestId('App', container);
    expect(comp).toBeInTheDocument();
  });
});