为什么我的 React-Testing 库查询都不起作用？

我正在使用 Jest/Testing-Library 编写 UI 单元测试。

组件没有在 DOM 上渲染，罪魁祸首是组件'RequireScope'它单独包装了所有组件。

换句话说，每个组件都会返回：

return ( <RequireScope>  // some MUI stuff</RequireScope>
)

这会阻止我的组件在测试时在 DOM 树中呈现。

这是因为RequireScope确保仅在身份验证通过时才呈现其子项。

如何使用以下代码模拟登录用户？

要求范围：

import React, { useEffect, useState } from 'react';
import useAuth from 'src/hooks/useAuth';

export interface RequireScopeProps {
  scopes: string[];
}

const RequireScope: React.FC<RequireScopeProps> = React.memo((props) => {
  const { children, scopes } = props;
  const { isInitialized, isAuthenticated, permissions } = useAuth();
  const [isPermitted, setIsPermitted] = useState(false);

  useEffect(() => {
    if (isAuthenticated && isInitialized) {
      (async () => {
        const hasPermissions = scopes
          .map((s) => {
            return permissions.includes(s);
          })
          .filter(Boolean);

        if (hasPermissions.length === scopes.length) {
          setIsPermitted(true);
        }
      })();
    }
  }, [isAuthenticated, isInitialized, scopes, permissions]);

  if (isPermitted) {
    return <>{children}</>;
  }

  return null;
});

export default RequireScope;

最终目标是拥有'isPermitted'是真实的。为此'isInitialized, isAuthenticated, permissions'必须是真的。我们从 useAuth() 中获取这 3 个值。

useAuth:

    import { useContext } from 'react';
    import AuthContext from '../contexts/JWTContext';
    
    const useAuth = () => useContext(AuthContext);
    
    export default useAuth;

JWT上下文：

const handlers: Record<string, (state: State, action: Action) => State> = {
  INITIALIZE: (state: State, action: InitializeAction): State => {
    const { isAuthenticated, permissions, user } = action.payload;

    return {
      ...state,
      isAuthenticated,
      isInitialized: true,
      permissions,
      user,
    };
  },
  LOGIN: (state: State): State => {
    return {
      ...state,
      isAuthenticated: true,
    };
  },
  LOGOUT: (state: State): State => ({
    ...state,
    isAuthenticated: false,
    permissions: [],
  }),
};

const reducer = (state: State, action: Action): State =>
  handlers[action.type] ? handlers[action.type](state, action) : state;

const AuthContext = createContext<AuthContextValue>({
  ...initialState,
  platform: 'JWT',
  login: () => Promise.resolve(),
  logout: () => Promise.resolve(),
});

export const AuthProvider: FC<AuthProviderProps> = (props) => {
  const { children } = props;
  const [state, dispatch] = useReducer(reducer, initialState);
  const router = useRouter();
  const reduxDispatch = useDispatch();

  useEffect(() => {
    const initialize = async (): Promise<void> => {
      try {
        if (router.isReady) {
          const { token, permissions, user, companyId } = router.query;

          const accessToken =
            (token as string) || window.localStorage.getItem('accessToken');
          const permsStorage = window.localStorage.getItem('perms');
          const perms = (permissions as string) || permsStorage;
          const userStorage = window.localStorage.getItem('user');
          const selectedCompanyId =
            (companyId as string) || window.localStorage.getItem('companyId');
          const authUser = (user as string) || userStorage;

          if (accessToken && perms) {
            setSession(accessToken, perms, authUser);

            try {
              // check if user is admin by this perm, probably want to add a flag later
              if (perms.includes('create:calcs')) {
                if (!selectedCompanyId) {
                  const response = await reduxDispatch(getAllCompanies());

                  const companyId = response.payload[0].id;
                  reduxDispatch(companyActions.selectCompany(companyId));
                  reduxDispatch(getCurrentCompany({ companyId }));
                } else {
                  reduxDispatch(
                    companyActions.selectCompany(selectedCompanyId),
                  );
                  await reduxDispatch(
                    getCurrentCompany({ companyId: selectedCompanyId }),
                  );
                }
              } else {
                reduxDispatch(companyActions.selectCompany(selectedCompanyId));
                await reduxDispatch(
                  getCurrentCompany({ companyId: selectedCompanyId }),
                );
              }
            } catch (e) {
              console.warn(e);
            } finally {
              dispatch({
                type: 'INITIALIZE',
                payload: {
                  isAuthenticated: true,
                  permissions: JSON.parse(perms),
                  user: JSON.parse(authUser),
                },
              });
            }

            if (token || permissions) {
              router.replace(router.pathname, undefined, { shallow: true });
            }
          } else {
            dispatch({
              type: 'INITIALIZE',
              payload: {
                isAuthenticated: false,
                permissions: [],
                user: undefined,
              },
            });
            setSession(undefined);

            if (router.pathname !== '/client-landing') {
              router.push('/login');
            }
          }
        }
      } catch (err) {
        console.error(err);
        dispatch({
          type: 'INITIALIZE',
          payload: {
            isAuthenticated: false,
            permissions: [],
            user: undefined,
          },
        });
        //router.push('/login');
      }
    };

    initialize();
  }, [router.isReady]);

  const login = useCallback(async (): Promise<void> => {
    const response = await axios.get('/auth/sign-in-with-intuit');
    window.location = response.data;
  }, []);

  const logout = useCallback(async (): Promise<void> => {
    const token = localStorage.getItem('accessToken');

    // only logout if already logged in
    if (token) {
      dispatch({ type: 'LOGOUT' });
    }

    setSession(null);

    router.push('/login');
  }, [dispatch, router]);

  return (
    <AuthContext.Provider
      value={{
        ...state,
        platform: 'JWT',
        login,
        logout,
      }}
    >
      {state.isInitialized && children}
    </AuthContext.Provider>
  );
};

AuthProvider.propTypes = {
  children: PropTypes.node.isRequired,
};

export default AuthContext;

为了实现上述目的，我们只需确保“finally”语句运行（如果我是正确的）。因此条件语句：

if (router.isReady)

and

if (accessToken && perms)

必须满足。

当我渲染这个时如何使路由器存在AuthProviderJest 中的组件？

或者还有其他替代方法来模拟登录用户吗？

我的测试如下所示：

// test BenchmarksPage
test('renders benchmark', () => {
render(
    <HelmetProvider>
      <Provider store={mockStore(initState)}>
        <AuthProvider>
          <BenchmarksPage />
        </AuthProvider>
      </Provider>
    </HelmetProvider>,
  );

  localStorage.setItem('accessToken', 'sampletokenIsInR5cCI6');
  localStorage.setItem(
    'perms',
    JSON.stringify([
      'create:calcs',
    // and so on
}}

由于您的组件有副作用（即gtm.push、 redux-thunk）您可能需要等待组件状态稳定后再进行测试（因为我不知道 CalculationTable 组件中发生了什么）。因此尝试将您的测试更改为：

// Make the test asynchronous by adding `async`
test('renders header and export dropdown', async () => {
  const initState = {};
  const middlewares = [thunk];
  const mockStore = configureStore(middlewares);

  const { findByRole, getByText, getByTestId } = render(
    <Provider store={mockStore(initState)}>
      <CalculationsPage />
    </Provider>,
  );

   // findByRole will wait for the element to be present.
   // Note the `await` keyword
  const header = await findByRole('heading', { name: /calculations/i });
  
  await waitFor(() => expect(getByTestId('analysis-categories-header')).toBeVisible());
}

“findBy 方法是 getBy 查询和 waitFor 的组合。” - 看here https://testing-library.com/docs/dom-testing-library/api-async/#findby-queries了解更多信息。