React testing by input type - reactjs

Question

I am trying to test my below component in which I am returning dynamic control based upon the switch condition:
const DataTableFormControl: FC<DataTableFormControlProp> = ({ displayName, isRequired, dataType, content, cellId }) => {
return (
(() => {
switch (dataType) {
case DataType.NUMBER:
return <TextField
id={cellId}
label={displayName}
defaultValue={content}
required={isRequired}
type="number"
/>
case DataType.DATE:
return <TextField
id={cellId}
label={displayName}
defaultValue={content}
type="date"
required={isRequired}
/>
case DataType.BOOLEAN:
return <FormControl variant="standard">
<Typography>{displayName}</Typography>
<Switch color="primary" defaultChecked={content === 'true'} />
</FormControl>
case DataType.PERCENT:
return <FormControl variant="standard">
<Typography>{displayName}</Typography>
<Input
id={cellId}
defaultValue={content}
required={isRequired}
endAdornment={<InputAdornment position="end">%</InputAdornment>}
/>
</FormControl>
default:
return <TextField
id={cellId}
label={displayName}
type="text"
required={isRequired}
defaultValue={content}
/>
}
})()
)
};
export { DataTableFormControl };
I tried below way to find the item but, how I can run an assertion based upon the TextField type and check if we are getting or have endAdornment property?
describe('DataTableFormControl', () => {
test('should render component with text dataType', () => {
const { container } = renderControl(DataType.TEXT);
const textElement = container.querySelector(`#${cellId}`);
expect(textElement).toBeInTheDocument();
// How we can run find if this element is type of text, date, or number.
});
});

Answer 1

In general React testing library discourages testing props just for the sake of checking that props passed to a component. The whole idea of React testing library is writing tests that translate to "how this is effecting the user?". In other words, a better test would check how does the existence of a prop affect the DOM (and by extension, the user), instead of just checking if a prop was passed or not.
I would also recommend avoiding using querySelector and to use getBy... queries which should be able to find any item you are looking for. In your case, since you are looking for inputs getByRole would be best. Depending on the type of the input you can do getByRole('textbox'), getByRole('checkbox') and so on.