DEV Community

Jonathan Bakebwa
Jonathan Bakebwa

Posted on

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

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!

Top comments (0)