2

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

在附加的代码中，我尝试使用 useContext 挂钩访问 Context。错误说我不能在 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.
});
4

2 回答 2

2

你只需要渲染你的Provider传递value道具。这就是您在应用程序中执行此操作的方式。

const isUserLogged = true
render(<Provider value={{ isUserLogged }}><Star /></Provider>)
于 2019-02-18T14:05:28.283 回答
0

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

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
于 2020-04-11T12:21:07.703 回答