Kakao FE Shares Vue Component Testing Practices and Refactoring Strategies

The Kakao FE Platform team shared their experience writing Vue component tests and refactoring strategies for the 'Kakao for Business' project they maintain. The test environment used the ava framework along with sinon and vue-test-utils, employing test doubles (stubs) to mock API responses and applying restore logic to prevent global object pollution.

In particular, they proposed separating logic within templates into computed properties to improve test maintainability. They adopted a strategy of delegating responsibility for DOM structures with high volatility to snapshot tests or E2E tests, while focusing unit tests solely on data changes. Additionally, when testing parent-child component interactions, they used shallowMount to stub child components, enabling independent testing. Through this process, they recognized the importance of test-friendly code structure and explored methods for conducting testing and refactoring in parallel without breaking existing code.