Name: Video recording for Component Testing with Vite, Vue, and Cypress - Codementor Events
Uploaded: 2022-04-27
Description: Together, we'll look at a workflow with Vite, Vue, and Cypress with Jessica in this talk.

Together, we'll look at a workflow with Vite, Vue, and Cypress with Jessica in this talk.

*This talk was part of Developer Growth Summit 2022. Go to [the DGS2022 page](https://www.codementor.io/events/developer-growth-summit?ref=eventpage) to view recordings of all sessions.*

## About the talk
Cypress's component test runner interacts with your components as a user would, meaning you can debug using your favorite dev tools. Together, we'll look at a workflow with Vite, Vue, and Cypress. We'll be learning about Cypress selector and more through Cypress end to end testing example.

### This talk will cover
- The biggest problem with component testing
- Testing in the browser with Cypress
- Exploring components with a Playground

technical events about testing and dev tools like Cypress

Testing & Development Tools

### Why should you test?
There are two reasons why you’d test. If you’re talking to a business minded and not technical person, you would let the business know about the concrete reasons why you need to test. The concrete reasons include so your businesses don’t lose money, and won’t lose your user’s good will and respect. When things break, users suffer and business suffers. You also get to build cooler systems and fancier UI and features if you have security to move quickly. 


The intrinsic reasons why you’d test include wanting more confidence, speed, and accountability to yourself and others. A lot of time, when you don’t have confidence, security, and tests, you have to take a lot of time, and very slowly plan out your plan of attack. However, when you have tests, you can work a little more messily, and build forward without looking back too much. 
### What are some testing theories, types, and testing in the dark?
There are 20+ tests you can find on the internet. One of the ways you can look for the right testing type on Google is to search for “testing types quality assurance.” Because QA engineers have spent the last 30 to 40 years figuring out how to test softwares, but software developers have not. By searching for testing types quality assurance, you’ll quickly get a breadth of understanding for the types of tests out there. 


Day to day, software engineers only deal with four types of tests: end-to-end testing, integration testing, unit testing, and static testing. Static is a recent addition and are only applicable to projects that use a linter or type safe typescript or flow. 


To understand e2e tests, here are the main characteristics: 
1. Visiting either a public website (or a prod-like website on localhost)
2. Real network requests
3. Goes to multiple pages


![Characteristics of e2e testing](https://ucarecdn.com/ac186c2e-11aa-4e37-af89-14d028b48500/)


What is the difference between an integration test and an end-to-end test? An integration test:
1. Mocks network backend API requests
2. Website runs on your own computer or CI
3. Has multiple pages


![Characteristics of an integration test.png](https://ucarecdn.com/2d259b69-3290-47f8-b9f0-b04f55635a06/)


As for component testing, here are the characteristics of component testing:
1. Uses props to pass in data (though can use network-level mocks)
2. Components compile the same way they do locally
3. Sing page (when you change to multiple pages, you switch to integration test)
4. Two user-types: end-user and developer


![Characteristics of a component test (integration).png](https://ucarecdn.com/3cf866c9-d7e2-414b-8e18-e3a34b2b9b6e/)

Video recording for: Component Testing with Vite, Vue, and Cypress

Discussion