从正在测试的组件外部访问上下文 API

Question

我正在使用 Jest 和 React-testing-library 来测试 React 组件。我已经使用 Context API Provider 渲染了一个组件，因此该组件可以访问 Context。不幸的是，我不知道如何从呈现的组件外部访问它。在这种情况下，上下文中有一个 isUserLogged 属性，具体取决于哪个组件发生变化。但我不知道如何更改此属性的值。我该如何处理这个案子？如果需要模拟上下文 API 我该怎么做？

在附加的代码中，我尝试使用 useContext 挂钩访问上下文。错误说我不能在 React 组件之外使用钩子。而且，显然，我正在尝试访问 Context Provider 之外的 Context，因此它无论如何都无法工作。

import { Provider, Context } from '../../context';

test('Star is not clickable for a non-registered user', () => {
  const { getByTestId } = render(<Provider><Star /></Provider>);
  const isUserLogged = useContext(Context).isUserLogged; // Error.
});

Answer 1

您只需渲染您的 Provider 并传递一个 value 道具。这就是您在应用程序中的做法。

const isUserLogged = true
render(<Provider value={{ isUserLogged }}><Star /></Provider>)

Answer 2

这就是我访问上下文以初始化状态以为正在测试的功能做好准备的方式：

let authContext

const TestWrapper = ({ children }) => {
  authContext = useContext(AuthContext)

  return children
}

const renderer = renderHook(() => useAuth(), {
  wrapper: ({ children }) => (
    <AuthProvider>
      <TestWrapper>{children}</TestWrapper>
    </AuthProvider>
  ),
})

act(() => {
  authContext.setUser(user)
})

// hook that uses the same context now have 'user' initialised

从正在测试的组件外部访问上下文 API

Access to Context API from outside of the component being tested

jestjs

react-testing-library