Question: How to test large pages in Vue/React?

codebender828 profile image Jonathan Bakebwa ・2 min read

Hello friends! 😄 (Long question approaching... )

I'm looking for some advice on Testing large Vue SFC pages that have lots of smaller already unit tested components.

We have a pretty big enterprise application at work, and it's pretty heavily unit tested. All the smaller atom and a few big components that consist of many parts are all pretty well tested. I feel secure about them.

The problem for me comes it when it comes to page level tests that have a lot of modules and it's very taxing to simply create mocks for each module. Some of these include Vuex store modules, and DOM APIs, WebRTC streaming libraries that we plug into the component instance, etc.

It's honestly a bit worrisome when it comes to unit-testing these pages, because technically they are no longer units, and I'm worried that testing them will require me to mock so many parts of the page and I worry that I may end up testing implementation details especially because some of the internals change a lot depending on the features we add or remove.

So I wanted to know how to go about this. I decided to write end to end tests for these pages, but this doesn't entirely cover everything that I feel should be tested. Is there a way to write these kinds of tests for big SFC pages in Vue?

On my searching journey, I've heard of integration tests, but there's very little written about this topic. Most coverage is about unit tests and E2E tests. I'd some advice and perhaps any suggestions that would guide me towards the right course of action. 🙏🏽

I might also be approaching this the wrong way! So I'm happy to gather some insight on this topic! Thanks!

Posted on Mar 13 by:

codebender828 profile

Jonathan Bakebwa


I'm a passionate and habitual Javascript code bender.


markdown guide