IT技术 - Jest 模拟react上下文 - 吾爱随笔录

我需要一些帮助来了解如何使用React Context.

这是我的示例设置。

上下文.js

import React from 'react'

export const AppContext = React.createContext()

应用程序.js

import React from 'react'

import MyComponent from './MyComponent'
import {AppContext} from './context'

const App extends React.Component {

  state = {
    items: []
  }

  handleItemAdd = newItem => {
    const {items} = this.state
    items.push(newItem)
    this.setState(items)
  }

  render() {
    return (
      <AppContext.Provider value={{
        addItem: this.handleItemAdd
      }}>
        <MyComponent />
      </AppContext.Provider>
    )
  }
}

export default App

我的组件.js

import React from 'react'

import {AppContext} from './context'

const MyComponent extends React.Component {    
  render() {
    return (
      <AppContext.Consumer>
        {addItem => 
          <button onClick={() => addItem('new item')}>
            Click me
          </button>
        }
      </AppContext.Consumer>
    )
  }
}

export default MyComponent

这是一个简化的例子。想象一下，App和之间有更多的层MyComponent，因此使用React Context.

这是我的测试文件MyComponent。

我的组件.test.js

import React from 'react'
import {render, fireEvent} from 'react-testing-library'

test('component handles button click', () => {
  const {getByText} = render(
    <MyComponent />
  )
  const button = getByText('Click me')
  fireEvent.click(button)
  expect...?
}

问题是，AppContext.Consumer是实现的一部分MyComponent，所以在这个测试中我没有直接访问它。我如何模拟AppContext.Consumer以便我实际上能够验证单击按钮会触发函数调用？

我知道，在理论上我可以被渲染测试这MyComponent在我App，但我想编写一个单元测试MyComponent只。