adding testkit package or testkit driver to each component

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.

No repository files or tests are named. Start by reviewing the existing component test patterns and the Select example from the issue, then determine the scope and API for adding testkit drivers across components; done would mean reusable drivers support component tests without repeated interaction code.