Enzime：等待上下文更新以开始执行测试

Question

我有一个需要测试的React应用。它使用useContext()钩子创建在大多数组件中使用的Provider。我有一个专用的组件来处理上下文，如下所示：[>

UserContext.jsx：

UserContext
所以您可以这样使用import React from 'react'

export const UserContext = React.createContext(undefined)

export const UserProvider = (props) => {
  const [currentUser, setCurrentUser] = React.useState(undefined)

  const context = {
    currentUser,
    setCurrentUser,
  }

  return (
    <UserContext.Provider value={context}>
      {props.children}
    </UserContext.Provider>
  )
}
：

Provider
现在我需要测试使用此import { UserProvider } from './context/UserContext'


<UserProvider>
  { ... }
</UserProvider>
的组件，所以让我们说UserContext：

UserModal.test.jsx

UserModal
问题是，当将import React from 'react'
import { mount } from 'enzyme'
import { BrowserRouter as Router } from 'react-router-dom'

import { UserProvider, UserContext } from '../context/UserContext'
import UserModal from '../components/UserModal'

// D A T A
import exampleUser from '../data/user.json'  // Load user's data from a json file

describe('<UserModal />', () => {
  let wrapper
  const Wrapper = () => {
    const { setCurrentUser } = React.useContext(UserContext)

    React.useEffect(() => {
      // Init UserContext value
      setCurrentUser(exampleUser)
    }, [])

    return (
      <UserProvider>
        <UserModal />
      </UserProvider>
    )
  }

  beforeEach(() => {
    wrapper = mount(<Wrapper />)
  })
})
安装在<UserModal />的内部时，出现一个错误，即<UserProvider>中的currentUser为UserContext。该错误是有道理的，因为使用undefined一次安装了组件时，我会调用setCurrentUser()。

所以你知道如何以上下文不是React.useEffect(() => { }, [])的方式在上下文提供者内部mount()我的<UserModal />组件吗？

我有一个需要测试的React应用。它使用useContext（）钩子来创建在我的大多数组件中使用的Provider。我有一个专用的组件来处理上下文（可以说...

Answer 1

您的测试应如下所示：