React Hooks-如何测试全球供应商的变更

Question

我正在尝试测试以下情况：

• 令牌过期的用户尝试访问未经授权的资源
• 资源返回401错误
• 应用程序将全局状态“ isExpiredSession”更新为true

为此，我有2个提供者：

• 身份验证提供程序，具有全局身份验证状态
• 负责获取资源的人

两者都有自定义的挂钩，公开了这些组件的共享逻辑，即：fetchResource / expireSesssion

当获取的资源返回401状态时，它将通过共享setState方法在身份验证提供程序中设置isExpiredSession值。

AuthenticationContext.js 从'react'导入React，{createContext，useState};

const AuthenticationContext = createContext([{}, () => {}]);

const initialState = {
  userInfo: null,
  errorMessage: null,
  isExpiredSession: false,
};

const AuthenticationProvider = ({ authStateTest, children }) => {
  const [authState, setAuthState] = useState(initialState);

  return (
    <AuthenticationContext.Provider value={[authStateTest || authState, setAuthState]}>
      { children }
    </AuthenticationContext.Provider>);
};


export { AuthenticationContext, AuthenticationProvider, initialState };

useAuthentication.js

import { AuthenticationContext, initialState } from './AuthenticationContext';


const useAuthentication = () => {
  const [authState, setAuthState] = useContext(AuthenticationContext);
  ...
  const expireSession = () => {
    setAuthState({
      ...authState,
      isExpiredSession: true,
    });
  };
  ...
  return { expireSession };
 }

ResourceContext.js与身份验证类似，公开了一个Provider

而且useResource.js具有以下内容：

const useResource = () => {
  const [resourceState, setResourceState] = useContext(ResourceContext);
  const [authState, setAuthState] = useContext(AuthenticationContext);

  const { expireSession } = useAuthentication();

  const getResource = () => {
    const { values } = resourceState;
    const { userInfo } = authState;

    return MyService.fetchResource(userInfo.token)
      .then((result) => {
        if (result.ok) {
          result.json()
            .then((json) => {
              setResourceState({
                ...resourceState,
                values: json,
              });
            })
            .catch((error) => {
              setErrorMessage(`Error decoding response: ${error.message}`);
            });
        } else {
          const errorMessage = result.status === 401 ?
            'Your session is expired, please login again' :
            'Error retrieving earnings';
          setErrorMessage(errorMessage);
          expireSession();

        }
      })
      .catch((error) => {
        setErrorMessage(error.message);
      });
  };
  ...

然后，在测试中，使用react-hooks-testing-library执行以下操作：

  it.only('Should fail to get resource with invalid session', async () => {
    const wrapper = ({ children }) => (
      <AuthenticationProvider authStateTest={{ userInfo: { token: 'FOOBAR' }, isExpiredSession: false }}>
        <ResourceProvider>{children}</ResourceProvider>
      </AuthenticationProvider>
    );
    const { result, waitForNextUpdate } = renderHook(() => useResource(), { wrapper });

    fetch.mockResponse(JSON.stringify({}), { status: 401 });

    act(() => result.current.getResource());
    await waitForNextUpdate();

    expect(result.current.errorMessage).toEqual('Your session is expired, please login again');
    // Here is the issue, how to test the global value of the Authentication context? the line below, of course, doesn't work
    expect(result.current.isExpiredSession).toBeTruthy();
  });

我尝试了一些解决方案：

• 同时useAuthentication也在测试上进行渲染，但是资源所做的更改似乎并未反映在测试上。
• 通过Resource挂钩公开isExpiredSession变量，即：

      return { 
            ...
            isExpiredSession: authState.isExpiredSession,
            ...
       };

我期望到那时该行将起作用：

expect(result.current.isExpiredSession).toBeTruthy();

但是仍然无法正常工作，并且值仍然为false

知道如何解决此问题吗？

Answer 1

这里的作者react-hooks-testing-library。

如果无法运行代码，这有点困难，但我认为您的问题可能是多个状态更新无法正确批处理，因为它们没有包含在调用中act。act异步调用的功能位于(v16.9.0-alpha.0)的 alpha 版本react中，我们在跟踪它时也遇到了问题。

所以可能有2种方法可以解决：

1. 更新到 alpha 版本并将其移至回调waitForNextUpdate中act

npm install react@16.9.0-alpha.0

  it.only('Should fail to get resource with invalid session', async () => {
    const wrapper = ({ children }) => (
      <AuthenticationProvider authStateTest={{ userInfo: { token: 'FOOBAR' }, isExpiredSession: false }}>
        <ResourceProvider>{children}</ResourceProvider>
      </AuthenticationProvider>
    );
    const { result, waitForNextUpdate } = renderHook(() => useResource(), { wrapper });

    fetch.mockResponse(JSON.stringify({}), { status: 401 });

    await act(async () => {
      result.current.getResource();
      await waitForNextUpdate();
    });

    expect(result.current.errorMessage).toEqual('Your session is expired, please login again');

    expect(result.current.isExpiredSession).toBeTruthy();
  });

2. 添加第二个waitForNextUpdate通话

  it.only('Should fail to get resource with invalid session', async () => {
    const wrapper = ({ children }) => (
      <AuthenticationProvider authStateTest={{ userInfo: { token: 'FOOBAR' }, isExpiredSession: false }}>
        <ResourceProvider>{children}</ResourceProvider>
      </AuthenticationProvider>
    );
    const { result, waitForNextUpdate } = renderHook(() => useResource(), { wrapper });

    fetch.mockResponse(JSON.stringify({}), { status: 401 });

    act(() => result.current.getResource());

    // await setErrorMessage to happen
    await waitForNextUpdate();

    // await setAuthState to happen
    await waitForNextUpdate();

    expect(result.current.errorMessage).toEqual('Your session is expired, please login again');

    expect(result.current.isExpiredSession).toBeTruthy();
  });

您对使用 alpha 版本的兴趣可能会决定您选择哪个选项，但是，选项 1 更“面向未来”。一旦 alpha 版本发布稳定版本，选项 2 可能有一天会停止工作。