我需要一些帮助来了解如何使用React
Context
测试应用程序。
这是我的示例设置。
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
MyComponent.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
中渲染App
来测试它,但是我只想为MyComponent
编写单元测试。
答案 0 :(得分:5)
您只需使用组件渲染上下文即可。
const addItem = jest.fn()
render(
<AppContext.Provider value={{ addItem }}>
<MyComponent />
</ApppContext.Provider>
)
答案 1 :(得分:1)
我想使用@Giorgio 的解决方案添加一个完整的测试示例。 在这里,我们正在测试 MyComponent 已呈现并且其按钮将被单击一次。
MyComponent.test.js
import React from 'react'
import { render, fireEvent } from 'react-testing-library'
test('component handles button click', () => {
const addItem = jest.fn()
render(
<AppContext.Provider value={{ addItem }}>
<MyComponent />
</AppContext.Provider>
)
fireEvent.click(screen.getByText(/click me/))
expect(addItem).toHaveBeenCalledTimes(1)
}