We will learn how to automate user action on the browser, wait for the server to return data and for our application to process and render it, to actually retrieving information from the website and comparing it to the data to see if our application actually works as expected for a given user action.
Given so, the Puppeteer + Jest become has become a nice, open source way of testing web applications, by opening the application on the headless browser provided by puppeteer and simulating user input and/or interaction, and then checking that the data presented and the way our application reacts to the different actions is as expected with Jest.
In this article we provided a comprehensive overview on how to test applications that present asynchronous data fetched from a server, by using Puppeteer + Jest.
Assume the following case: You need to cover the project codebase with tests, so what should you start with and what should you get at the end of testing?
Of course, the structure of your project can differ; it can have other directory names or can have additional components, actions, and reducers, but the logic of defining the order for testing the components is the same.
Snapshot Testing is a useful testing tool in case you want to be sure user interface hasn’t changed.
Write test for the component and in the expect block, use .toMatchSnapshot() method that creates Snapshot itself.
Everything is fine when I test a small component without logic, just UI rendering, but as practice shows, there are no such components on real projects.
Now you have full guidance on how to perform full coverage testing of components based on project structure.