代码之家 › 专栏 › 技术社区 › artooras

笑话模仿反应上下文

react-testing-library react-context jestjs unit-testing reactjs

1

artooras · 技术社区 · 7 年前

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

这是我的示例设置。

上下文JS

import React from 'react'

export const AppContext = React.createContext()

App.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

MyCalpTun.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 因此使用 反应 语境 .

这是我的测试文件 肌力成分 .

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 是实现的一部分 肌力成分 ,所以在这个测试中,我没有直接访问它的权限。我如何嘲弄 应用上下文.使用者 所以我实际上能够验证点击一个按钮是否会触发一个函数调用?

我知道理论上我可以通过 肌力成分 在我的 应用程序 ,但我想为 肌力成分 只有。

1 回复 | 直到 7 年前

1

2

Gio Polvara 7 年前

只需使用组件呈现上下文。

const addItem = jest.fn()
render(
  <AppContext.Provider value={{ addItem }}>
    <MyComponent />
  </ApppContext.Provider>
)