Vue Unit Testing #6 - Icon component test (snapshots)

Summary

In this lesson, the focus is on writing tests for a base icon component to ensure that specific icons are rendered correctly when passed as props. The process involves using snapshot tests to check the component’s markup and ensure it doesn't change unexpectedly. Initially, the test is written for a specific icon (e.g., a clock icon), and later generalized to handle all icons dynamically by iterating over the keys of an icons object. The snapshot feature captures the expected output and throws errors if the markup changes, making it easy to catch regressions in the component's rendering.

Takeaways

• 😀 Ensure that passing a specific icon name to the BaseIcon component results in the correct icon component markup.
• 😀 The icons object in the icons.ts module maps icon names to their corresponding icon view components.
• 😀 The first test is written to ensure that a specific icon, such as the clock icon, renders correctly.
• 😀 Use snapshot testing to ensure that the rendered markup of the icon component does not change unexpectedly.
• 😀 Shallow mount should be replaced with the Mount function when dealing with full component code, such as an SVG icon.
• 😀 Running the test for the first time generates a snapshots folder, which stores the initial component markup.
• 😀 After the first test run, snapshots can be regenerated using the 'u' key in the terminal if changes are required.
• 😀 Snapshot testing ensures that the rendered markup matches the expected structure and flags any differences in future runs.
• 😀 To generalize the tests, use parameterized tests with the 'each' method, passing an array of icon names dynamically.
• 😀 Dynamically extract icon names from the icons object to avoid manually listing them for tests, ensuring better scalability.
• 😀 If any changes occur to the markup or component rendering, the test will fail, ensuring the integrity of the component's structure.

Q & A

What is the purpose of the test in this lesson?

The purpose of the test is to ensure that when a specific icon name is passed as a prop to the BaseIcon component, the corresponding icon component is rendered correctly with the proper markup.

Why is the shallow mount function not sufficient for this test?

The shallow mount function only renders a shallow version of the component, which omits child components. Since the test requires the full SVG icon markup, the mount function is used instead to render the complete component.

What is the role of snapshot testing in this context?

Snapshot testing ensures that the rendered markup of the icon component matches the expected output. It generates a snapshot file the first time the test is run, which is then used for comparison in subsequent tests to detect any changes in the markup.

What should be done if the snapshot needs to be regenerated?

If the snapshot needs to be regenerated, you can press 'u' in the terminal or run the test with the appropriate command (like 'jest -u') to update the snapshot with the new markup.

How does the code ensure that all icons are tested, not just one?

The test dynamically generates a list of all icon names by extracting the keys from the icons object. It then uses this list to iterate over each icon name, ensuring that all icons are tested.

What is the significance of the 'each' method in the test?

'each' is used to create a parameterized test, where the test is run for each value in the array of icon names. This allows the test to check the rendering of every icon in the project without writing repetitive code.

How is the icon name passed to the BaseIcon component in the test?

The icon name is passed as a prop to the BaseIcon component by dynamically inserting the current icon name in the test loop. The icon name is cast to the 'IconName' type to ensure type safety.

What would happen if the markup of an icon changes?

If the markup of an icon changes, the test will fail because the rendered markup no longer matches the stored snapshot. This helps identify unintended changes to the component's output.

Why does the test fail when two keys are swapped inside the icons object?

The test fails because the markup of the icon components no longer matches the expected output as stored in the snapshot. Swapping keys causes the wrong view component to be rendered under a given icon name.

What happens after the snapshot is generated for the first time?

After the snapshot is generated, it will contain the markup of each icon component. In future test runs, the test will compare the rendered markup with the snapshot, and it will only pass if they match exactly.