Migrate from karma to vitest to run unit tests

[acelaya]

Depends on hypothesis/frontend-build#722
Depends on #6989
Depends on hypothesis/frontend-testing#76

This PR is the equivalent to hypothesis/frontend-shared#1947, but for client repository.

TODO

• Fix remaining tests
• Investigate some suspicious output printed after starting tests. Frontend-shared has a similar output in one test. Let's investigate this separately

  stderr | build/scripts/tests.bundle.js > ImageTextLayer > debounces text layer size updates
  null
  stdout | build/scripts/tests.bundle.js > NavigationObserver > only fires an event if the path or query params change
  Potential memory leak detected; be sure to call restore() to clean up your sandbox. To suppress this warning, modify the leakThreshold property of your sandbox.
  Sourcemap for "/home/alejandro/Development/hypothesis/client/build/styles/annotator.css" points to missing source files
  

• Do not dump a summary of every successful test in the output (Add SummaryReporter for vitest frontend-testing#76)
• Investigate reduction in code coverage

[acelaya]

There's a bunch of tests that rely on the screen resolution, like the ones around side-by-side mode.

Karma sets bigger screen resolutions, but vitest uses a mobile screen resolution by default. I reckon we probably want to have more control over this and makes sense to set it here.

[acelaya]

Many of the changes here are caused by running yarn dedupe, which was required to fix an incompatibility between different istanbul versions.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.39%. Comparing base (f9592db) to head (7aaa261).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6988      +/-   ##
==========================================
- Coverage   99.50%   99.39%   -0.12%     
==========================================
  Files         278      276       -2     
  Lines       11054    11010      -44     
  Branches     2662     2653       -9     
==========================================
- Hits        10999    10943      -56     
- Misses         55       67      +12     

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

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[acelaya]

There's a 1% decrease in code coverage, I'm not completely sure why 🤔

[acelaya]

I'm investigating some eslint errors. I need to understand why this is not being reported in other projects 🤔

[acelaya]

I'm investigating some eslint errors. I need to understand why this is not being reported in other projects 🤔

No other project is complaining about this because this is the only one using beforeAll and afterAll.

[robertknight]

There's a 1% decrease in code coverage, I'm not completely sure why 🤔

It looks to me like the main reason is that some source files (index.{ts, tsx}) were not included before, but now they are. Did you find other reasons?

[acelaya]

There's a 1% decrease in code coverage, I'm not completely sure why 🤔

It looks to me like the main reason is that some source files (index.{ts, tsx}) were not included before, but now they are. Did you find other reasons?

Yeah, that sounds reasonable, but I can't find where were we excluding those files before 🤔

[acelaya]

Excluding module index files from coverage, because they were not being considered for code coverage when using karma.

[acelaya]

After excluding index files from code coverage, it is still dropping 0.12%.

I'm not sure if it's worth going module by module checking what's going on. I would probably merge this as is, and we can focus on improving the code coverage separately.

[acelaya]

After excluding index files from code coverage, it is still dropping 0.12%.

I'm not sure if it's worth going module by module checking what's going on. I would probably merge this as is, and we can focus on improving the code coverage separately.

I just realized Codecov has an "Indirect changes" tab that indicates what coverage changes have happened in files that were not changed in the PR: https://app.codecov.io/gh/hypothesis/client/pull/6988/indirect-changes