add-test-ids is a command-line tool that adds unique test IDs to your React components on one click. It's designed to work with MUI components.
You can install add-test-ids globally with npm:
npm install -g add-test-idsAfter installing you run simply the following command in you project root directory.
npx add-test-idsThis will ask you for two questions:
Please enter a directory path: src
Please enter file extensions, separated by commas: .tsx, .jsx
import React from 'react';
const ExampleComponent = () => {
return (
<Box data-testId="ypq-12h">Example Component</Box>
)
}
export default Component;This package will add data-testId in the following MUI components:
const muiElements = [
'AppBar',
'Avatar',
'Backdrop',
'Badge',
'BottomNavigation',
'BottomNavigationAction',
'Box',
'Button',
'ButtonBase',
'ButtonGroup',
'Card',
'CardActionArea',
'CardActions',
'CardContent',
'CardHeader',
'CardMedia',
'Checkbox',
'Chip',
'CircularProgress',
'ClickAwayListener',
'Collapse',
'Container',
'CssBaseline',
'Dialog',
'DialogActions',
'DialogContent',
'DialogContentText',
'DialogTitle',
'Divider',
'Drawer',
'ExpansionPanel',
'ExpansionPanelActions',
'ExpansionPanelDetails',
'ExpansionPanelSummary',
'Fab',
'Fade',
'FilledInput',
'FormControl',
'FormControlLabel',
'FormGroup',
'FormHelperText',
'FormLabel',
'Grid',
'GridList',
'GridListTile',
'GridListTileBar',
'Hidden',
'Icon',
'IconButton',
'Input',
'InputLabel',
'LinearProgress',
'Link',
'List',
'ListItem',
'ListItemAvatar',
'ListItemIcon',
'ListItemSecondaryAction',
'ListItemText',
'ListSubheader',
'Menu',
'MenuItem',
'MenuList',
'MobileStepper',
'Modal',
'NativeSelect',
'OutlinedInput',
'Pagination',
'PaginationItem',
'Paper',
'Popover',
'Popper',
'Portal',
'Radio',
'RadioGroup',
'RootRef',
'Select',
'Slide',
'Slider',
'Snackbar',
'SnackbarContent',
'Step',
'StepButton',
'StepConnector',
'StepContent',
'StepIcon',
'StepLabel',
'Stepper',
'SvgIcon',
'SwipeableDrawer',
'Switch',
'Tab',
'Table',
'TableBody',
'TableCell',
'TableContainer',
'TableFooter',
'TableHead',
'TablePagination',
'TableRow',
'TableSortLabel',
'Tabs',
'TextField',
'TextareaAutosize',
'Toolbar',
'Tooltip',
'Typography',
];Contributions are welcomed, you can contribute in this github repo: Repo Link