我需要一些帮助来了解如何使用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
。
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
在 my中渲染来测试它App
,但我只想编写一个单元测试MyComponent
。