reactjs - 如何模拟 React Context 以用玩笑测试组件
问题描述
我想测试组件是否在渲染函数中渲染。组件封装在 Consumer 内部:
const TestComponent = () => (
<div>
<ItemsContext.Consumer>
{(value) => (
<Autos
autoEnabled={value.autoEnabled}
/>
)}
</ItemsContext.Consumer>
</div>
);
我在上层组件中设置了上下文:
const AutosWrapper = () => (
<ItemsContext.Provider value={{ autoEnabled: false, sourcesEnabled: true }}>
<TestComponent/>
</ItemsContext.Provider>
)
我的测试如下:
import ItemsContext from '../ItemsContext';
describe('<TestComponent /> Component render', () => {
let wrapper;
beforeEach(() => {
wrapper = shallow(<TestComponent {...props} />);
});
describe('<TestComponent /> rendering', () => {
test('should render child components in <TestComponent /> component', () => {
const autoContextWrapper = wrapper.find(ItemsContext.Consumer).at(0)
.renderProp('children')();
expect(autoContextWrapper.find(Autos).length).toEqual(1);
});
});
});
但是当我运行这个测试时,我有以下错误 -TypeError: Cannot read property 'autoEnabled' of undefined
我无法理解如何将默认值传递给上下文或模拟它们。我尝试了这样的变体但没有成功:
ItemsContext.Consumer = jest.fn((props) => props.children({ autoEnabled: false }));
解决方案
您必须使用提供者包装您的组件,以便消费者可以访问上下文。这特别有用,因为这使您能够更改上下文并根据给定的上下文值进行断言。
例子:
import ItemsContext from '../ItemsContext';
describe('<TestComponent /> Component render', () => {
describe('<TestComponent /> rendering', () => {
test('should render child components in <SearchResult /> component', () => {
const wrapper = shallow((
<ItemsContext.Provider value={{ autoEnabled: true, sourcesEnabled: true }}>
<TestComponent />
</ItemsContext.Provider>
));
const autoContextWrapper = wrapper
.find(ItemsContext.Consumer)
.at(0)
.renderProp('children')();
expect(autoContextWrapper.find(Topics).length).toEqual(1);
});
});
});
推荐阅读
- python - 在考虑先前结果的同时运行一系列随机化
- google-cloud-platform - 如何完全自动化 Google Cloud Build 触发器的创建
- c# - Azure 应用服务未从连接的 Azure SQL 数据库返回数据,显示消息“发生错误”
- cassandra - Datastax DSBulk 实用程序在将 CSV 数据加载到 Astra 时出现错误
- python - “tensorflow.python.framework.errors_impl.AlreadyExistsError:另一个同名的指标已经存在。” 错误
- flutter - 如何在 Flutter 中锁定手机屏幕方向?(不在选项卡/ iPad 中)
- javascript - 如何附加到赛普拉斯的窗口
- rust - 期望 HashSet<&'a str> 但找到 HashSet<&&str>
- javascript - 抽屉内容内的 Material UI 可滚动标签
- javascript - 为什么工具提示在我的图表 JS 中出现错误?