test: use tsx for E2E tests instead of ts-node

[HowardBraham]

Description

On my computer, it took 17 seconds just to launch Mocha for an E2E test. Not launch a browser, not start chromedriver/Ganache, not withFixtures. 17 seconds just to launch Mocha and do nothing. And on CircleCI, this 17 seconds happens thousands of times per workflow.

A lot of this time was taken by ts-node, which has a very slow startup time. I switched to using tsx, which is much much faster.

CircleCI Insights on develop showing about 16k credits per workflow

CircleCI Insights on this branch showing about 12k credits per workflow

After this is merged and observed for a bit, it may make sense to rebalance some parallelism in config.yml.

Related issues

Manual testing steps

1. Locally run yarn test:e2e:single [TESTPATH] --browser=chrome
2. Make sure it still works, and see if it starts faster than before this PR

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

---

Co-authored-by: David Murdoch [email protected]

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[metamaskbot]

Builds ready [e3b7c7a]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (54 ± 3 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	69	110	89	11	5
		domContentLoaded	9	20	12	3	1
		load	42	73	54	7	3
		domInteractive	9	20	12	3	1

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 0 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 65.38%. Comparing base (85783b1) to head (e3b7c7a).
Report is 1 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #25399   +/-   ##
========================================
  Coverage    65.38%   65.38%           
========================================
  Files         1382     1382           
  Lines        54765    54765           
  Branches     14367    14367           
========================================
  Hits         35807    35807           
  Misses       18958    18958           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[davidmurdoch]

🚀

[Gudahtt]

Fascinating, that's a significant improvement. I wonder how it's so much faster.

I see that tsx uses esbuild under the hood, maybe that's a significant factor. I've given the documented esbuild-related limitations a quick review, and none of them seem like a concern for our tests.

[Gudahtt]

LGTM!

[metamaskbot]

Missing release label release-12.0.0 on PR. Adding release label release-12.0.0 on PR and removing other release labels(release-12.1.0), as PR was cherry-picked in branch 12.0.0.