Vue Unit Testing #4 - mount vs shallowMount

Summary

In this video, the presenter explains various techniques for testing Vue components using the Vest testing framework. Key topics include mocking the browser environment with the vest environment directive, using configuration files for better control, and exploring the difference between the `mount` and `shallowMount` functions. The presenter also demonstrates the use of the `HTML` and `text` methods for checking component content. By applying these techniques, the tests run smoothly even in different environments. The video concludes with a reminder to ensure all tests pass before moving forward.

Takeaways

• 😀 The vest environment directive can be used to mock the browser environment in a Node environment during test execution.
• 😀 Removing the vest environment annotation from a test file can break access to the document object, causing tests to fail if not configured correctly.
• 😀 The browser environment for specific tests can be configured using the `V.C.config.yml` file, allowing control over which files run in a browser environment.
• 😀 Using `Globe notation` with asterisks (`**`) in the `V.C.config.yml` file allows us to specify file paths that should be executed in a browser environment.
• 😀 The library `hpid doome` can be used to run tests in the browser environment.
• 😀 After configuring the browser environment in the config file, tests can successfully run with the document object still available even after removing the vest environment annotation.
• 😀 The `mount` function renders both the main component and its child components, whereas the `shallow mount` function only renders the main component and replaces child components with stubs.
• 😀 The difference between `mount` and `shallow mount` is more apparent when components have child components, though the difference isn't visible with simple components like the base button.
• 😀 The `HTML` method returns the full markup of a component, whereas the `text` method only returns the text content, such as the label of the button.
• 😀 Replacing the `HTML` method with `text` method works well when testing for the presence of a label or other text content in a component.
• 😀 If a default slot or text content is removed from a component, tests using the `text` method can fail, showing that the label no longer exists in the component.

Q & A

What is the issue with specifying the `vest environment` directive at the beginning of each test file?

Specifying the `vest environment` directive at the beginning of each test file to mock the browser environment in the Node environment isn't optimal because, without this directive, the `document` object becomes unavailable while running tests.

How can we specify which tests should run in a browser environment?

We can specify which tests should run in a browser environment by using the `V.C config.yml` file. In this file, we define an array with two elements: the first specifies the files to be executed in the browser environment (using Glob notation), and the second specifies the library (e.g., `hpid doom`) for the browser environment.

What happens when the `vest environment` annotation is removed from a test file?

When the `vest environment` annotation is removed, the `document` object is no longer available, causing the tests to fail. However, if the proper configuration is set up in the `V.C config.yml` file, the tests will still run successfully in the browser environment.

What is the difference between the `mount` and `shallowMount` functions in testing?

The `mount` function renders the main component along with all its child components, while `shallowMount` renders only the main component and replaces all child components with stubs, without rendering them.

In which scenario would the difference between `mount` and `shallowMount` become more apparent?

The difference between `mount` and `shallowMount` is more apparent when the component being tested contains child components. The `mount` function will render those child components, while `shallowMount` will not, instead rendering stubs.

Why is the `base button` component not a good candidate for showcasing the difference between `mount` and `shallowMount`?

The `base button` component doesn't contain any child components, so the difference between `mount` and `shallowMount` is not visible in this case. The behavior of both functions is similar for this component.

What is the role of the `text` method in the `raer` object, and how does it differ from the `html` method?

The `text` method returns the text content of a component, while the `html` method returns the full HTML markup of the component. If a component has child elements or content inside slots, the `html` method will capture that, but the `text` method only returns the visible text.

When would you use the `text` method over the `html` method in testing?

You would use the `text` method when you're interested in testing only the textual content of a component, without worrying about its HTML structure. This can be particularly useful when checking for specific labels or text within the component.

What happens when the `base button` component's default slot is removed?

If the `default slot` is removed from the `base button` component, the test that checks for the label will fail. This is because the `text` method relies on the presence of content in the slot, and if no content is rendered, the label will not be found.

What steps did the developer take to ensure that the tests still pass after removing the `vest environment` directive?

The developer modified the `V.C config.yml` file to specify that the tests should run in a browser environment. This ensured that even after removing the `vest environment` directive, the tests could still successfully execute in the browser environment.