How to test a react component using JEST and react testing library - reactjs

Question

I want to test a custom created Filter in JEST using react testing library. Here is the code:
Filter.js
import React, { useContext } from "react";
import { FormGroup, List, ListItem } from "#material-ui/core";
import FullAccordion from "../../components/shared/accordion/FullAccordion";
import { Context } from "../../utils/store/context/store";
import RenderTextBox from "../../components/shared/fields/Textbox";
import RenderDropDown from "../../components/shared/fields/Dropdown";
import RenderCheckBox, { RenderCheckBoxList } from "../../components/shared/fields/Checkbox";
import useMatchMaking from "../../utils/hooks/useMatchMaking";
import RadioInput from "../../components/shared/fields/RadioInput";
const Filter = ({ field, classes }) => {
const [state, dispatch] = useContext(Context);
const { handleChangeFilters: handleChange } = useMatchMaking();
const fieldsParam = { field, classes, state, handleChange };
return (
<FullAccordion classes={classes} title={field.title}>
<FormGroup row className={classes.width_100}>
<List className={`${classes.List} ${classes.width_100}`}>
<ListItem disableGutters className={classes.ListItem}>
{
field.html_type === "Email" || field.html_type === "Text" || field.html_type === "Textbox" || field.html_type === "Password"
? RenderTextBox({ ...fieldsParam, value: `reg_${field.id}` }) : null
}
{
field.html_type === "Custom Json Radio"
? RadioInput({ ...fieldsParam, value: `reg_${field.id}` })
: null
}
{
field.html_type === "Custom Json Drop Down" || field.html_type === "Dropdown" || field.html_type === "Custom Json Drop Down with Multi Select Options"
? RenderDropDown({ ...fieldsParam, value: `reg_${field.id}` })
: null
}
{
field.html_type === "Checkbox" || field.html_type === "Single Checkbox" || field.html_type === "Terms & Condition / NewsLetter checkbox"
? RenderCheckBox({ ...fieldsParam, value: `reg_${field.id}` })
: null
}
{
field.html_type === "Checkbox list"
? Object.keys(field.dropdown_options).map((data, index) => {
return <RenderCheckBoxList
key={index} data={data} classes={classes} field={field} handleChange={handleChange} state={state} value={`reg_${data}`}
/>
})
: null
}
</ListItem>
</List>
</FormGroup>
</FullAccordion>
)
}
export default Filter;
and for the time being lets say I am only talking about TextBox field and I want to test it properly if it is working fine what assertions should I make and what would be the test case. My renderTextbox component so far is :
RenderTextBox.js:
import { TextField } from "#material-ui/core";
const RenderTextBox = ({ field: { title }, value, classes, state, handleChange }) => {
const name = value;
return (
<TextField
className={classes.width_100}
color="primary"
id={name}
name={name}
// placeholder={placeholder}
// label={title}
variant="outlined"
value={(Object.keys(state.filters).length > 0 && state.filters[value]) || ""}
onChange={(e) => handleChange(e.target.value, name)}
/>
)
}
export default RenderTextBox;
But how to create its test cases like If the component is rendered and then I want to test the fields such as if it is an email field then it should properly validate email text and not accept any other special character. What would be the possible test code for that?
What I have tried for simple email field if it is getting valid input or not is below:
Filter.test.js
import React from 'react';
import ReactDOM from "react-dom";
import Filter from "../../containers/matchmaking/Filter";
import {cleanup, render} from "#testing-library/react";
import {act, renderHook} from "#testing-library/react-hooks";
import RenderTextBox from "../../components/shared/fields/Textbox";
import renderer from 'react-test-renderer';
import {BrowserRouter} from "react-router-dom";
import {UserProvider} from "../../utils/store/context/UserContext";
import {Store} from "../../utils/store/context/store";
import Attendee from "../../pages/Attendee";
import classes from "*.module.css";
import {matchMakingStyle} from "../../utils/hooks/useApplyStyles";
describe("component: Filter", () => {
afterEach(() => {
cleanup();
});
test('Component: Filter Textbox component renders', () => {
jest.fn(()=>{const styles = matchMakingStyle(); const classes = styles();});
render(<BrowserRouter>
<UserProvider>
<Store>
<Filter field={{html_type:'Email',title:'Textbox'}} classes={classes}/>
</Store>
</UserProvider>
</BrowserRouter>);
});
test('it should check TextBox field is working fine', () => {
let wrapped = render(<BrowserRouter>
<UserProvider>
<Store>
<Filter field={{html_type:'Email',title:'EmailTextbox'}} classes={classes}/>
</Store>
</UserProvider>
</BrowserRouter>);
expect(wrapped.getAllByText("Email").get(0).props.value).toEqual("something#test.com");
});
});
But I am not able to get anything out of this. Basically, I want to test all the fields which are in the code above