reactjs - 使用上下文消费者对 React 组件进行单元测试
问题描述
我曾经有这样的组件:
class Foo extends React.Component {
render() {
return (
<div className="Foo">
<div id="user">Bar</div>
<SomeOtherComponent />
</div>
)
}
}
这个测试:
it('renders a help button', () => {
expect(shallow(<Foo />).find('#user').length).toEqual(1);
});
但是现在我已经向这个对象添加了一个上下文使用者:
class Foo extends React.Component {
render() {
return (
<UserContext.Consumer>
{({user}) => (
<div className="Foo">
<div id="user">{user}</div>
<SomeOtherComponent />
</div>
)}
</UserContext.Consumer>
)
}
}
如何测试以下条件?
- “#user”的数量是1
- 显示的用户是提供的用户
解决方案
您可以模拟UserContext.Consumer
以使用某个硬编码用户进行渲染。不知道你是如何导出UserContext
的,但它看起来像这样:
jest.mock('path/to/UserContextModule', () => ({
UserContext: {
Consumer: ({children}) => children({user: 'User'})
}
}))
其余的测试将保持不变。
推荐阅读
- php - 在 php 中验证字母数字代码并在 SQL 语句中使用它
- google-cloud-platform - GCP GCE 在没有 gcloud 命令的情况下建立跨项目 VM SSH 连接
- angular - ERROR TypeError: control.registerOnChange 不是动态添加组件时的函数
- java - 为什么编译接口后,“javap -v”中的“default”方法修饰符消失了?
- python - AWS Neptune Jupyter Gremlin 查询无法显示图表的可视化?
- javascript - 如何调试 emscripten 编译错误未定义符号:ai_func
- unit-testing - 触发 http 客户端错误以使用 httptest 进行测试
- node.js - 如何在postgres sequelize中按位置获取所有用户列表组?
- r - 我可以通过多边形绑定 st_distance 调用吗?
- python-3.x - 在opencv python中旋转线