Speed Up Component Testing

[cubanx]

Hello!

We have over 400 component tests. When the component test runner fires up, it rebuilds the site AND the tests.

This is getting rather slow. The site rebuilds in under 2 seconds, but the tests take much longer.

They will take about 50 seconds on a cold run, and take 11 seconds on a save and rebuild.

Once they're running they're of course blindingly fast, but the Red/Green/Refactor with 10 seconds of wait in between each run is rough.

Is there anyway to speed these up? Is there a possibility of doing code splitting on the specs so it doesn't have to rebuild all the specs on a single change?

Thanks in advance!

[cubanx]

In doing some research, I found if I took the cypress.json and changed the componentTesting.testFiles property to the exact file I wanted, I got it to speed up tremendously.

Basically, the initial load up time was a little quicker, but the time between runs dropped down to nearly sub second compiles, so the Red/Green/Refactor goes super fast.

If Cypress could support this elegantly somehow, it would REALLY help.

Until then, in the Hack of the Week category, I present to you my PowerShell version of making this easy:

function Test-SpecificComponent {
	[CmdletBinding()]
	param (
		[string]$RootOfRepo = "c:\my\repo\root"
		[string]$Spec,
		[switch]$Reset
	)

	$locationOfMain = Join-Path $RootOfRepo "Sites/main"
	Push-Location $locationOfMain

	try {
		$pathToCypressConfiguration = ".\cypress.json"
		$cypressConfiguration = Get-Content -Raw -Path $pathToCypressConfiguration | ConvertFrom-Json

		if ($Reset) {
			$Spec = "src"
			$cypressConfiguration.component.testFiles = "src"
			Set-Content -Path $pathToCypressConfiguration -Value ($cypressConfiguration | ConvertTo-Json)
		} else {
			if (-not $Spec) {
				$Spec = Get-ChildItem -Exclude .\node_modules\*.* -Recurse -Filter *.cspecs.jsx | Select-Object FullName | Invoke-Fzf
			}

			if (-not $Spec) { 
				Write-Verbose "Nothing selected"
				return 
			}

			Write-Verbose "Running: $Spec"

			$cypressConfiguration = Get-Content -Raw -Path $pathToCypressConfiguration | ConvertFrom-Json
			$cypressConfiguration.component.testFiles = $Spec
			Set-Content -Path $pathToCypressConfiguration -Value ($cypressConfiguration | ConvertTo-Json)

			& yarn cypress:component --browser edge

			$cypressConfiguration.component.testFiles = "src"
			Set-Content -Path $pathToCypressConfiguration -Value ($cypressConfiguration | ConvertTo-Json)
		}
	} finally {
		Pop-Location
	}
}

Invoke-Fzf up there is what makes this work wonderfully. It's a wrapper for fzf which is available on Windows and Linux.

So for you bash gurus out there, feel free to figure out how to do this on there :)

The line & yarn cypress: component --browser edge is specific to my setup, as is the $RepoRoot in the parameter definitions.

Also, don't miss that we name our spec files as *.cspecs.jsx on the Invoke-Fzf line. You'll probably want to change that as well.