reactjs - Material UI + Jest + Enzyme 测试标签
问题描述
我正在尝试测试具有选项卡的组件。我的第一个测试将确保初始状态正确,接下来的测试将确保单击另一个选项卡时会更改状态。我正在material-ui
使用jest
和enzyme
。
import React, { useState } from 'react';
import { Grid, Typography, Tabs, Tab, CircularProgress, Button } from '@material-ui/core';
import useStyles from './styles';
const TabExample = () => {
const classes = useStyles();
const [activeTab, setActiveTab] = useState(0);
return (
<Grid container className={classes.container}>
<div className={classes.formContainer}>
<div className={classes.form}>
<Tabs
id="tabs"
value={activeTab}
onChange={(_e, id) => setActiveTab(id)}
indicatorColor="primary"
textColor="primary"
centered
>
<Tab label="Tab1" classes={{ root: classes.tab }} />
<Tab label="Tab2" classes={{ root: classes.tab }} />
</Tabs>
{activeTab === 0 ? (
<div>TAB 1 </div>
) : (
<div>TAB 1 </div>
)}
</div>
</div>
</Grid>
)
}
我尝试了一些解决方案,但都不起作用,并且不确定该文档的位置。这是我尝试过的:
import TabExample from '../TabExample';
it('Tab is changed when tab is clicked', () => {
const wrapper = mount(
<Provider>
<TabExample />
</Provider>,
);
// prints tabs component
console.log(wrapper.find('#tabs').debug());
// prints nothing
console.log(wrapper.find('WithStyles(Grid)').debug());
// prints first tab
console.log(wrapper.find('#tabs button').first().debug());
// TypeError: Cannot read property 'value' of undefined
console.log(wrapper.find('#tabs button').value.debug());
});
不知道如何获得 t
解决方案
我想到了:
it('Initial tab is 0', () => {
expect(
wrapper
.find('WithStyles(ForwardRef(Tabs))')
.childAt(0)
.props().value,
).toBe(0);
expect(
wrapper
.find('WithStyles(ForwardRef(Tab))')
.at(0)
.props().selected,
).toBe(true);
});
推荐阅读
- node.js - 在 S3 中允许公共读取和存储桶所有者完全控制
- sql-server - 使用混合连接从应用服务到本地 SQL Server 的 Sqlcmd
- javascript - 如何使用javascript计算出哪个变量的字符最多
- go - 视频奖励的 AdMob 服务器端验证
- visual-studio-code - 如何在 vscode 上为特定的 React.Js 语法着色?
- ios - Ionic 4 Google Maps 插件“无法在路径加载优化模型......”
- java - org.powermock.modules.junit4.common.internal.impl.AbstractCommonPowerMockRunner 未找到
- python-3.x - Graphviz 似乎认为第一列中的每一行都是一个属性,无法解决
- sql - 将多行合并为一行
- python-3.x - 如何在 Windows 中修复此 UnicodeDecodeError?