Question

我花了几天的时间来测试包装在提供程序中的组件，该组件的值来自组件useReducer减速器。

此刻，我将reducer称为 <NavUpdateDispatchContext.Provider value={useNavDispatch()}>

问题在于这无法正常工作，因为我无法在组件外部使用useReducer？

有人知道解决这个问题的方法吗？

这是代码框：https://codesandbox.io/s/stupefied-firefly-3gqyz

测试在src/SignOut/__tests__/SignOut-test.tsx

中

我得到的错误是：

不变违反：无效的挂钩调用。钩子只能叫在功能组件主体内部。

抱歉，沙箱无法渲染，因为它需要firebase，但我认为代码可能足够了？

非常感谢

要保存访问代码和框，请执行以下操作：

//Current test: /src/SignOut/__tests__/SignOut-test.tsx
test('renders a Sign Out button', () => {
  render(
    <NavUpdateDispatchContext.Provider value={useNavDispatch()}>
      <NavStatusContext.Provider value={{ navIsOpen: false }}>
        <SignOut />
      </NavStatusContext.Provider>
    </NavUpdateDispatchContext.Provider>,
  )
})

// Sign out: /src/SignOut/index.tsx
interface P {
  firebase: firebase.app.App
}

const SignOut = ({ firebase }: P) => {
  const dispatch = useNavDispatch()

  return (
    <LinkButton
      onClick={() => {
        firebase
          .auth()
          .signOut()
          .then(() => dispatch({ type: 'close' }))
      }}
    >
      SignOut
    </LinkButton>
  )
}

// Nav Reducer in /src/Header/index.tsx
const navReducer = (state: State, action: Action) => {
  switch (action.type) {
    case 'open': {
      return { navIsOpen: true }
    }
    case 'close': {
      return { navIsOpen: false }
    }
    default: {
      throw new Error(`Unhandled action type in navReducer: ${action!.type}`)
    }
  }
}

Answer 1

我建议您在测试中呈现Header，这样就不必模拟上下文。

使用Jest使用useReducer测试React Provider包装的组件

1 个答案: