What is Test Case:
A test case is a set of actions performed on a system to determine if it satisfies software requirements and functions correctly. Test case document has a set of test data preconditions, expected results and postconditions .Depending on actions on the test data we determine compliance of the test scenario against a specific requirement.
Testing library:-
The testing library helps to test UI component in user centric way that is gives more importance to test components from user’s perspective rather than internal details
What is Front End Testing?
To start with, the front end is part of a software application that is visible to the user or the area the user interacts with.Essentially, it is all aspects of software that are visible to clients. This usually includes GUI elements such as menus, buttons, forms or anything that end users can see when navigating the application. It can also include aspects like page load speed – factors contributing to overall user experience.To make sure that all these things are functioning well we perform front end testing
Difference between Front End Testing and Back End Testing:
- Front End Testing:
It verifies the user-facing interface of a software application. For front end testing one requires knowledge about requirements related to user experience, but not about the database and the back-end mechanics.
- Back End Testing:
It verifies the efficacy of the functionality on the server and database side of the software.
Why Is it necessary to write front-end tests?
The problem is that as an app grows over the time we cannot be sure that everything still works properly each time you add some new code or when making changes in the existing code so test cases can help us to verify that everything is in a place or not?
The first thing we must know is that at the beginning it seems that tests are not worth the time and can be a hurdle in the process of development . But as the app grows it becomes more and more difficult to implement them and your app will be more and more unstable. That’s why you should implement tests from the beginning of a project as it is easier and it will be a timesaver later.
How to test using React Testing Library?
The principle of React Testing Library is to render a component and then simulate some interaction with it using some different sets of methods and then finally compare the actual result with the expectation.
Installing React Testing Library :
To install the React Testing library you’ll need to use npm/yarn to add:
• @testing-library/jest-dom – this is the DOM Testing Library, as called from Jest browser-based tests
• @testing-library/react – the React Testing Library
• @testing-library/user-event – a library to trigger user events (click, scroll, type, etc)
RTL Render:
The React Testing Library (RTL) provides a method called render() for virtually rendering React components in the testing environment. Once it is rendered in this way, the screen.debug() method can be used to view the virtually rendered DOM or we can use console to view specific element in the rendered DOM
Queries :
Queries are the essential methods that the Testing library gives you to find elements on the page.
Depending on what part of page content you are selecting, different queries may be more or less appropriate.
The screen object from the React Testing Library (RTL) provides you methods for querying the rendered elements of the DOM in order to make assertions about their text content, attributes, and more.
Types of Queries
There are two types of Queries
- Single Elements : In this type It returns matching node for the given query if not found or have multiple occurrences then it throws a descriptive error
example : getBy,queryBy,findBy
- Multiple:In this type it returns an array of all matching nodes for given query and throws error if no elements match.
example:getAllBy,queryAllBy,findAllBy
Priority:
There are some Guiding principles for using queries in the test cases and your tests should resemble how users interact with your code (component, page, etc.) as much as possible.
1.Queries Accessible to Everyone:
These are the Queries that reflect the experience of visual user as well as those users that use assistive technology.Following are few examples
getByRole:This should be your top preference for just about everything. There’s not much you can’t get with this.you can choose specific role that you want to test like checkbox buttons etc
Example:
getByPlaceholderText: We can get element by LabelText and it have higher priority than Placeholder but if we all have is placeholder that too works and we query elements as follows
Example:
getByText: When querying outside of forms, text content is the main way users find elements. This method can be used to find non-interactive elements (like divs, spans, and paragraphs).
Example:
2.Semantic Queries :
In this type getByAltText and getByTitle methods are used but important thing to keep in mind is user experience of interacting with these attributes varies from browser to browser
3.Test IDs:
As users can’t see these, It is recommended for cases when you cannot match by role or text or if the text is dynamic or is going to change in future. getByTestId method is used in this type
example:
FireEvent :
With React Testing Library it’s very easy to simulate browser events such as a click event. The library comes with a function called fireEvent which handles this. Let’s first look at the small component we’ll be working with:
example:
User Event :
The @testing-library/user-event library is an extension of @testing-library it tries to simulate the real events that would happen in the browser as the user interacts with it. It is somewhat similar like fireEvents. For example userEvent.click(checkbox) will change the state of the checkbox.The userEvent documentation gives details to find the appropriate method for your specific needs.
Jest Dom:
The @testing-library/jest-dom package contains DOM-specific matching methods for testing frontend applications with Jest. Some common methods include:
- toBeInTheDocument()
It checks if the element is present in the dom or not?
- toBeVisible()
It Checks if the element is visible or not
- toHaveValue()
It check if the given element possess the specific value or not
- toHaveStyle()
It verifies if the given element has a specific style like color or not .
It is common for this library to be used alongside the React Testing Library.The jest-dom documentation can be used to find the appropriate matching methods for specific needs.
You can check following repo for some illustrative test cases which covers some of the major test scenarios which we discussed above
