An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
January 13, 2022 06:26 pm GMT
Original Link: https://dev.to/yashasaveekesarwani99/to-do-list-app-with-react-typescript-and-react-testing-library-4a22
To do list app with react typescript and react testing library
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:stringvar 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
Original Link: https://dev.to/yashasaveekesarwani99/to-do-list-app-with-react-typescript-and-react-testing-library-4a22
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To