Switch to TypeScript unit test for all Joy components

[hbjORbj]

We need your help!

Currently, Joy components have JavaScript versions of tests. We need the community's help to ensure that all Joy components switch to TypeScript tests.

Contribution guides

1. Pick a component in the “Ready to be picked up” section
2. Go to packages/mui-joy/src/ComponentName/ComponentName.test.js. e.g., packages/mui-joy/src/Alert/Alert.test.js
3. Rename ComponentName.test.js with ComponentName.test.tsx.
4. Fix the appearing errors.
5. Verify that it works by running yarn test:unit --grep ComponentName. e.g., yarn test:unit --grep Alert.
6. Run yarn prettier.
7. Open a PR, put the URL to the the end of the component below (so that everyone knows it has been taken) and check the box.
8. Tag @mui/core to review

If you come across any issue or are unsure of the changes, feel free to open a PR and describe the problem + tag @mui/core for help.

Example PR

#37077

List of components

Ready to be picked up

• [x] Alert #37077
• [x] AspectRatio https://github.com/mui/material-ui/pull/37087
• [ ] Autocomplete
• [ ] AutocompleteListbox
• [x] AutocompleteOption https://github.com/mui/material-ui/pull/37087
• [x] Avatar https://github.com/mui/material-ui/pull/37087
• [x] AvatarGroup https://github.com/mui/material-ui/pull/37089
• [x] Badge https://github.com/mui/material-ui/pull/37089
• [x] Box https://github.com/mui/material-ui/pull/37126
• [ ] Breadcrumbs
• [ ] Button
• [x] Card https://github.com/mui/material-ui/pull/37126
• [x] CardContent https://github.com/mui/material-ui/pull/37116
• [x] CardCover https://github.com/mui/material-ui/pull/37116
• [x] CardOverflow https://github.com/mui/material-ui/pull/37116
• [x] Checkbox https://github.com/mui/material-ui/pull/37137
• [x] Chip https://github.com/mui/material-ui/pull/37116
• [x] ChipDelete https://github.com/mui/material-ui/pull/37116
• [ ] CircularProgress
• [x] Container https://github.com/mui/material-ui/pull/37117
• [x] CssBaseline https://github.com/mui/material-ui/pull/37117
• [ ] Divider
• [ ] FormControl
• [x] FormHelperText https://github.com/mui/material-ui/pull/37117
• [x] FormLabel https://github.com/mui/material-ui/pull/37117
• [x] Grid https://github.com/mui/material-ui/pull/37117
• [x] IconButton https://github.com/mui/material-ui/pull/37137
• [x] Input https://github.com/mui/material-ui/pull/37117
• [ ] LinearProgress
• [x] Link https://github.com/mui/material-ui/pull/37117
• [x] List https://github.com/mui/material-ui/pull/37123
• [x] ListDivider https://github.com/mui/material-ui/pull/37123
• [x] ListItem https://github.com/mui/material-ui/pull/37123
• [x] ListItemButton https://github.com/mui/material-ui/pull/37123
• [x] ListItemContent https://github.com/mui/material-ui/pull/37123
• [x] ListItemDecorator https://github.com/mui/material-ui/pull/37123
• [ ] ListSubheader
• [x] Menu https://github.com/mui/material-ui/pull/37123
• [x] MenuItem https://github.com/mui/material-ui/pull/37123
• [x] MenuList https://github.com/mui/material-ui/pull/37126
• [ ] Modal
• [ ] ModalClose
• [ ] ModalDialog
• [ ] ModalOverflow
• [x] Option https://github.com/mui/material-ui/pull/37137
• [x] Radio https://github.com/mui/material-ui/pull/37137
• [ ] RadioGroup
• [ ] ScopedCssBaseline
• [ ] Select
• [ ] Sheet https://github.com/mui/material-ui/pull/37139
• [ ] Slider https://github.com/mui/material-ui/pull/37139
• [ ] Stack https://github.com/mui/material-ui/pull/37139
• [ ] SvgIcon
• [ ] Switch https://github.com/mui/material-ui/pull/37139
• [ ] Tab
• [ ] Table
• [ ] TabList
• [ ] TabPanel
• [ ] Tabs
• [ ] Textarea
• [ ] Tooltip
• [ ] Typography

[PunitSoniME]

AspectRatio Done - #37087 AutocompleteOption Done - #37088 Avatar Done - #37088 AvatarGroup Done - #37089 Badge Done - #37089

CardContent Done - #37116 CardCover Done - #37116 CardOverflow Done - #37116 Checkbox Done - #37116 Chip Done - #37116 ChipDelete Done - #37116

Container Done - #37117 CssBaseline Done - #37117 FormHelperText Done - #37117 FormLabel Done - #37117 Grid Done - #37117 IconButton Done - #37117 Input Done - #37117 Link Done - #37117

[Big-Zude]

Typography Done - https://github.com/mui/material-ui/pull/37113#issue-1690548403

[DerTimonius]

Just opened a PR (#37137) for the following:

• Radio
• IconButton
• Checkbox
• Option

[nicolas-ot]

Tooltip - done https://github.com/mui/material-ui/pull/37149

No packages/mui-joy/src/[ComponentName]/[ComponentName].test.js: Autocomplete AutocompleteListbox Divider FormControl LinearProgress ListSubheader Modal ModalClose ModalDialog ModalOverflow ModalOverflow ScopedCssBaseline Select Tab Table TabList TabPanel Tabs Textarea

[nicolas-ot]

SvgIcon - done https://github.com/mui/material-ui/pull/37151

[DerTimonius]

Typography done in PR #37165

[akash191095]

Button done in PR: #37181

[akash191095]

Breadcrumbs done in PR: #37184

[mauwaz]

Breadcrumbs and Button are already addressed in #37107

[hbjORbj]

@mauwaz I approved and merged your PR. Thanks for the contribution.

[akash191095]

@nicolas-ot are you working on the other files you listed above? If not then I can update the remaining files.

[nicolas-ot]

@nicolas-ot are you working on the other files you listed above? If not then I can update the remaining files.

@akash191095 those files don't have test.JS files. You can take a look yourself, a double check won't hurt.

[akash191095]

@nicolas-ot You are correct, most of the files are converted into tsx, Only these are left in the master branch:

• AutocompleteOption.test.js (#37088)
• index.test.js (the root file)

Shall I update the root file? @hbjORbj

[hbjORbj]

@akash191095

Shall I update the root file?

I think we can leave it as it is :)

[hbjORbj]

Thanks to all of you for amazing contributions! I am closing the umbrella issue now!