tezvyn:

What is the fundamental difference between unit and component tests?

AI-drafted, machine-checkedSource: vuejs.orgbeginner
WHAT IT TESTS

Isolation levels in frontend testing. Unit tests verify single functions or composables with mocked dependencies; component tests verify mounting, rendering, and interaction and pull in more code.

RED FLAG

Claiming it is only the tool.

WHAT THIS TESTS: This question tests whether you understand the isolation boundary and execution cost between unit tests and component tests in a modern frontend framework. Interviewers want to see that you know unit tests target small isolated pieces of logic while component tests exercise the integration of a component with its template and lifecycle.

A GOOD ANSWER COVERS: A good answer hits four things in order. First, define a unit test as a verification that a single function, class, composable, or module produces the expected output or side effects given specific inputs. Second, note that unit tests mock large parts of the environment such as initial state, complex classes, third party modules, and network requests to stay isolated. Third, define a component test as a verification that a component mounts, renders, can be interacted with, and behaves as expected. Fourth, explicitly contrast the two by stating that component tests import more code, are more complex, and require more time to execute than unit tests.

COMMON WRONG ANSWERS: Common wrong answers include claiming the difference is only the testing tool or file naming convention. Another red flag is saying unit tests never mock dependencies or that component tests are just end to end tests with a different name. Some candidates also fail to give concrete examples, which makes it hard for the interviewer to trust they have actually written both kinds of tests.

LIKELY FOLLOW-UPS: A likely follow-up is asking when you would mock a dependency versus letting a component test pull in the real child component. Another is asking how you test a composable in Vue specifically, or how you balance the speed of unit tests against the confidence provided by component tests in a CI pipeline. Interviewers may also ask you to compare both to end to end testing.

ONE CONCRETE EXAMPLE: For a unit test, you might import an increment function from helpers.js, call it with a current value of zero and a max of ten, and assert it returns one. This is self contained and requires no framework mounting. For a component test, you might mount a counter component, trigger a click on the increment button, and assert that the rendered DOM now shows the updated count. This pulls in the template, reactivity system, and event handling, so it runs slower but gives broader confidence.

Read the original → vuejs.org

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.