Suggest an edit

Improve this article

Refine the answer for “How does component testing differ from E2E?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

Component testing and E2E testing check the interface at different levels.

---

### **What a component test checks**

- One specific component **in isolation**
- Its rendering, state and reaction to actions
- Behavior with different props and events

**Focus:** *a small, controlled fragment of the UI.*

**The question it answers:**
*"Does this component work correctly on its own?"*

---

### **What an E2E test checks**

- A complete user scenario **from start to finish**
- The interaction of many components, APIs, routes, data and pages at once
- The real operation of the application in the browser

**Focus:** *the behavior of the whole system through the user's eyes.*

**The question it answers:**
*"Can the user complete the task without errors?"*

---

### **The key difference in scale**

| Characteristic | Component test | E2E test |
| --- | --- | --- |
| Level | Local (one component) | Global (the whole user journey) |
| Context | Isolated DOM | Real browser, routes, server |
| Speed | Fast | Slow |
| Failure cause | Easy to find | Can be unclear |
| Goal | Check the behavior of a block | Check a working scenario |

---

### **The main idea**

- **Component testing** protects the UI building blocks
- **E2E** protects user scenarios

Both approaches are needed, but they complement rather than replace each other.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts232 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.