reactjs - 从 React Hook 测试中获取状态

Question

我在尝试使用 react-hooks-testing-library 访问 state 和 setState 时遇到问题。

我已经使用 Provider 跟踪了来自各种来源的示例，但它不起作用

支付.tsx

export const Pay = (): JSX.Element => {
  const location = useLocation()
  const [paymentState, setPaymentState] = useState<
    'IDLE' | 'LOADING' | 'SUCCESS' | 'FAILURE'
  >('IDLE')

  return (
    <View style={{ minHeight: '100vh' }}>
      {paymentState === 'LOADING' && <PaymentLoading />}
      {paymentState === 'SUCCESS' && <PaymentResult status="SUCCESS" />}
      {paymentState === 'FAILURE' && <PaymentResult status="FAIL" />}

支付.test.tsx

import { renderHook, act } from '@testing-library/react-hooks'

it(`Payment Input`, async () => {
const wrapper: FC = ({ children }) => (
  <SafeAreaProvider>
    <Router history={history}>
     <Route path="/pay">{children}</Route>
    </Router>
  </SafeAreaProvider>
)
const { result: payHook, waitForNextUpdate } = renderHook(() => Pay(), {
  wrapper,
})
console.log(payHook.current)
})

预期 console.log(payHook.current)

{paymentState: 'IDLE', setPaymentState: [Function]}

我得到的结果 console.log(payHook.current)

{        '$$typeof': Symbol(react.element),
        type: {
          '$$typeof': Symbol(react.forward_ref),
          render: [Function (anonymous)] { displayName: 'View' }
        },
        key: null,
        ref: null,
        props: {
          style: { minHeight: '100vh' },
          children: [ [Object], false, false, false ]
        },
        _owner: <ref *1> FiberNode {
          tag: 0,
          key: null,
          elementType: [Function: TestComponent],
          type: [Function: TestComponent],

标签： reactjsreact-hooksreact-testing-libraryreact-hooks-testing-library