add-test-ids

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.

Installation

You can install add-test-ids globally with npm:

npm  install  -g  add-test-ids

After installing you run simply the following command in you project root directory.

npx add-test-ids

This will ask you for two questions:

Please enter a directory path: src

Please enter file extensions, separated by commas: .tsx, .jsx

Example result

    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