React Testing #1

 

 Basic test type

what not to test 

RTL Queries


 

 The dot signifies suffix

 GetByRole 

 

 

 

 FE created before hand

 

 

 How do I know role of each componet ?

https://www.w3.org/TR/html-aria/#docconformance

getbyRole -options

However, if multiple elemet with same role than error

 

 To fix this we use options

 

 Now test verifies

 

 Works for bio as well (Here name signifies label content)

Check if heading is present by test

 

 Got an error when we do this

 To Fix this

Niw the test passes

We also want to make sure first heading is h1 and second is h2


 Other role

 getByLabelText

 

Here instead of finding them by role we are finding by label


 Wrapper Labels

 

 Plz intenionally fail the test as well as always test pass is common occurence while testing

 Errro as multiple elemet have the same text as name

we are fixing it by adding selector element

 getByPlaceholderText

 

 

 

 test passes as it is present

 getByText

Typically we use for span,div and p element


 

 It also excepts accepts an option like getByLabel


getByDisplayValue

 

 

 Test passes

use for form control value

 

 

 

 

 

 

 

 

 

 

 

 

h

 

Comments

Post a Comment

Popular posts from this blog

Form Part 2

App.jsx import React , { useState } from 'react' ; const App = () => { const [ Name , setName ] = useState (); const [ Pass , setPass ] = useState (); const [ seename , seename1 ] = useState (); const [ seepass , seepass1 ] = useState (); const inputEvent = ( event ) => { setName ( event . target . value ); }; const inputEvent1 = ( event ) => { setPass ( event . target . value ); }; const onSubmit = ( event ) => { event . preventDefault (); seename1 ( Name ); seepass1 ( Pass ); } return ( < > < div > < form onSubmit = { onSubmit } > < h1 > Hello { seename } { seepass } </ h1 > < input type = "text" placeholder = "Enter your Name" value = { Name } ...
Read more

Event mini project by Thapa#33

 Index.jsx import React from 'react' import ReactDOM from 'react-dom' ; import "./index.css" ; import App from "./App" ; ReactDOM . render ( < App /> , document . getElementById ( "root" )); index.css * { margin : 0 ; padding : 0 ; } div { width : 100% ; height : 100vh ; background : rgb ( 221 , 39 , 221 ); display : flex ; flex-direction : column ; justify-content : center ; align-items : center ; } button { padding : 12px 20px ; background : #9b59b6 ; color : white ; border : 2px solid #ecf0f1 ; outline : none ; border-radius : 5px ; text-transform : uppercase ; cursor : pointer ; } app.jsx import React , { useState } from 'react' ; const App =() => { const Purple = "yellow" ; const Old = "Click Me" const [ bg , setBg ] = useState ( Purple ); const [ name , newName ] = useState ( Old ); const bgChange =() => { let ...
Read more

De-mystifying 'this' keyword of Javascript

 Hello today I will be talking about 'this' keyword of javascript.It is one of the most confusing term of javascript. Since it is quite a confusion thing I will be compiling stuffs based on the materials I have learnt from the internet so as to help myself in the future. 'this' keyword can be considered quite the literal this word is English alphabet atleast for the initial understanding. Let's consider a main table of a house. It will be termed in js langauge as this.table = "main table" If we console log window.table or this.table than we will be considering the main house's table console.log(window.table) //main table Now let consider the dinning table of the house. It will be  this.dinning={ table:"dinning table"} If we want to call it will be  this.dinning.table // dinning table   Now let consider a private room and in this case it will be a function and if we want to use there we can use as mentioned below let johnsroom = { table:'j...
Read more