In terms of front-end testing — or testing of different forms of improvement, for that matter — my philosophy is to run unit exams as wanted however to primarily deal with integration testing. I exploit Jest or Vitest with the React Testing Library to write down my integration exams as a substitute of utilizing Cypress or different related instruments, and the exams work rather well.
Integration exams will let you test that completely different elements are working collectively as anticipated, they require virtually no mocking, and also you don’t want to fret about testing implementation particulars. Plus, writing integration exams is sort of like making a simulation of an actual person interplay, which implies you can too take a look at your person expertise (UX) as nicely.
Regardless of all of these advantages, integration testing shouldn’t be with out its downsides. In my expertise, the principle situation has at all times been a scarcity of pace.
Weighing the choices
In a method, it makes a number of sense that integration testing speeds could be on the sluggish facet. It’s worthwhile to render extra parts when testing how they work collectively, and if you happen to’re operating a whole bunch and even hundreds of exams, it could possibly change into time-consuming. Plus, if you happen to like to write down your tasks in TypeScript, testing instances might be even better.
So what’s the answer?
One strategy is likely to be to make the scope of your exams smaller, however doing so can defeat the aim of operating integration exams within the first place. An alternative choice is to mock sure elements — even when they’re not required for a given take a look at — so that you simply don’t have to attend for them to render. There are a couple of issues with this methodology, one in all them being that sustaining the mocks when refactoring or including options is usually a nightmare.*
A 3rd path to resolving the difficulty is likely to be to attempt to optimize your app. After all, if the app is working fantastic in manufacturing, then the slower take a look at instances aren’t on account of an issue along with your code. As a closing choice, you can additionally take away the TypeScript to keep away from further compilation, however for me, that’s a no-go.
*Full disclosure: I do mock some heavy exterior elements on occasion, however solely when I’m positive it’s going to give me actual beneficial properties.
A easy answer
Someday I discovered** a method to enhance my testing speeds by 50% with only a few adjustments to my exams or manufacturing code. Whereas an enchancment that vital sounds too good to be true, I promise that it isn’t, and the answer is even easier than you would possibly suppose.
There’s one factor that each front-end utility has however is normally not wanted in integration exams.
Are you able to guess what it’s? I’ll offer you a few minutes.
…
…
Types!
Integration exams should not normally rendered in precise net browsers; as a substitute, they use an in-memory library. The most typical one is JSDOM, however there are some doubtlessly sooner alternate options like Pleased-DOM.
Whenever you use an in-memory library, you possibly can’t see the rendered end result, so to the person, it doesn’t actually matter ifbackground-colour: pink; is utilized to the component or not. Nevertheless, even if you happen to can’t see them, the rendering engine nonetheless must course of all your kinds.
Model processing takes a number of time, and given that you may’t view the rendered end result, it’s time that isn’t nicely spent.
So the answer is straightforward: Flip off fashion calculations and luxuriate in sooner exams.
**By discovered, I imply that the answer was steered by David Ortner, the writer of Pleased-DOM library. I’m simply giving the credit score down right here as a result of I didn’t wish to spoil the shock!
The implementation
The one factor higher than a easy answer is a straightforward implementation. All that you must do to show off kinds is to alter one line of code in your take a look at setup file:
window.getComputedStyle = () => ({ getPropertyValue: () => undefined }With this one line of code, the computation of kinds is totally disabled and also you’re free to get pleasure from speedier testing.
The exception
Very similar to the answer itself, the implementation additionally could appear too good to be true. And this time, you caught me — there’s a catch! What if you happen to really need a few of your kinds to be computed? This can be the case in conditions the place you wish to take a look at the visibility of a component or a mode used on it.
Fortunately, there’s a answer. For these situations, it’s doable to re-enable fashion computation for a single take a look at. If you happen to solely have a couple of of those cases, it ought to be quick work. Nevertheless, you possibly can create some helpers to make it even simpler.
For instance, right here is one in all my setup recordsdata:
window.originalGetComputedStyle = window.getComputedStyle
window.lightGetComputedStyle = () => ({ getPropertyValue: () => undefined })
window.getComputedStyle = window.lightGetComputedStyle
beforeAll(() => {
window.getComputedStyle = window.lightGetComputedStyle
})
afterAll(() => {
window.getComputedStyle = window.lightGetComputedStyle
})With some helper capabilities:
export perform withRealStylesComputation() {
window.getComputedStyle = window.originalGetComputedStyle
}
export perform withDummyStylesComputation() {
window.getComputedStyle = window.lightGetComputedStyle
}
export perform resetToDummyStyleComputationForEachTest() {
beforeEach(() => {
withDummyStylesComputation()
})
afterEach(() => {
withDummyStylesComputation()=
})
}At any time when I must compute kinds in a take a look at, I can name the suitable perform and it computes them for me.
Now I’ll say one thing that I most likely ought to’ve stated at first of the put up. After all, if I had, you won’t have caught round!
I discovered the answer described on this put up a while in the past. Since then, libraries have improved their efficiency round computing kinds. For instance, JSDOM made some adjustments, however there isn’t a secure Jest launch that has utilized them, so that you must do it manually. Pleased-DOM has additionally made some enhancements.
Even so, eradicating fashion calculation remains to be an enchancment over making code changes. Some work won’t ever be as quick as no work, so I’m protecting these tips within the codebase, no matter library updates.
Keep in mind: Simply since you get a brand new hammer doesn’t imply it’s a must to throw the outdated one away.
