This content originally appeared on DEV Community and was authored by YashasaveeKesarwani99
Using typescript and testing code with react testing library
Typescript really makes it easy for developers to know the type of variables and return type of the functions which are in play.
I have used hooks for managing states, one can mention the type of state they are defining which makes its type unchangeable resulting in lesser discrepancy issues.
const [task,setTask] = useState<string>("");
const [tasks,setTasks] = useState<Array<string>>([])
The type of props should be defined before using them in the children component which can be done using type or interface keyword.
type props = {
setTask:React.Dispatch<React.SetStateAction<string>>
tasks:string[]
setTasks:React.Dispatch<React.SetStateAction<string[]>>
task:string
}
For testing purpose I've used react testing library to do simple unit and integration testing.
const mockSetTask = jest.fn()
const mockSetTasks = jest.fn()
var task:string
var tasks:string[] = []
it('gets input from input component', ()=>{
render(<Input setTask={mockSetTask} setTasks={mockSetTasks} tasks={tasks} task={task}/>)
const ele = screen.getByPlaceholderText("Enter Task") as HTMLInputElement
fireEvent.change(ele,{target:{value:'Go To Gym'}})
expect(ele.value).toBe('Go To Gym')
})
Github Repo : To do list app
This content originally appeared on DEV Community and was authored by YashasaveeKesarwani99
YashasaveeKesarwani99 | Sciencx (2022-01-13T18:26:44+00:00) To do list app with react typescript and react testing library. Retrieved from https://www.scien.cx/2022/01/13/to-do-list-app-with-react-typescript-and-react-testing-library/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.