windsuzu / web-testing-beginner

This is a collection of web testing skills tutorials focusing on jest, react-testing-library and end-to-end cypress.

Web Testing for Beginners

In this repository, I would like to share with you some of the testing techniques you will use in your web development. There are plenty of third libraries and tools can help you to test your code, such as Jest, Mocha, Chai, Karma, Jasmine, Cypress, Enzyme, Pupeeter and React-testing-library (why so many 😭). But now, I just want to focus on some basic knowledge and techniques, so I chose Jest, React-testing-library, and Cypress to share with you.

Jest

Move here to learn more about Jest testing skills ❤️

In this section, we will practice some basic testing methods in Jest.

1. Matchers - Implementing the fundamental test process
2. Asynchronous - Implementing asynchronous code testing
3. Setup - Implementing setup and dispose code before/after tests
4. Mock - Simulating side effects to focus on testing core code

React-testing-library

Move here to learn more about React-testing-library skills ❤️

In this section, we will learn how to test on React components using react-testing-library based on Jest.

1. Test Structure - Introducing the structure required for a component test
2. Find the Elements - Introducing how to use get, query, find to find the component to test
3. Assertions - Verifying that the component is working or displayed as expected
4. Fire Events - Introducing some functions that can interact with elements
5. Asynchronous - Handling components that take time to display
6. Mock - Simulating non-core but required components, functions, api requests
7. Integration Tests - Testing the interaction between multiple components
8. MSW (Mock Service Worker) - A handy tool to mock and intercept network requests and responses

Cypress

TBD.