Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Summary 💡
When developing a real app with many reusable components and writing tests for it, it is essential to have a testkit driver for each component so it will be much easier and faster to write unit-component tests for my app.
Examples 🌈
An Example:
Today in order to select some value of the <Select /> component in tests, I'll need to write the following code:
function selectOptionAt(index: number) {
const wrapperEl = getByTestId(htmlContainer, 'my-test-id')
fireEvent.mouseDown(getByRole(wrapperEl, 'button'))
const options = getAllByRole(document.body, 'option')
return fireEvent.click(options[index])
}and for each component that contains <Select /> component which I'd like to test, I'll need to copy-paste the above code.
Instead, I'd like to have some like the following:
import { SelectTestkit } from '@mui/material/testkits'
// ...
const myComponentDriver (container: HTMLElement) {
const selectTk = SelectTestkit(container)
return {
selectOptionAt(index: number) {
selectTk.selectOptionAt(index)
}
}
}Motivation 🔦
I want to believe the motivation is clear from the example above. There might be a better way to achieve what I was doing in my code but again, this is just an example of code that lacking a specific driver for such basic component, making me copy-pasting this piece of code from one test to another. It both wastes a lot of time and hard to maintain in case changes are needed.