Question

我正在使用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.
});

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

从要测试的组件外部访问Context API

2 个答案: