Document considerations when using Vitest

Author: acelaya

README.md

@@ -3,18 +3,18 @@
 This package contains common utilities for testing UI components across
 Hypothesis frontend projects. It includes tools for:
 
- - Rendering UI components and unmounting them once the test ends
- - Waiting for conditions to be met
- - Mocking UI components
- - Testing accessibility using [axe-core](https://github.com/dequelabs/axe-core)
+- Rendering UI components and unmounting them once the test ends
+- Waiting for conditions to be met
+- Mocking UI components
+- Testing accessibility using [axe-core](https://github.com/dequelabs/axe-core)
 
 This package is designed to work with downstream projects that use Hypothesis's
 standard UI and UI testing stack, built on:
 
- - [Preact](https://preactjs.com)
- - [Enzyme](https://github.com/enzymejs/enzyme)
- - [Vitest](http://vitest.dev/)
- - [babel-plugin-mockable-imports](https://github.com/robertknight/babel-plugin-mockable-imports)
+- [Preact](https://preactjs.com)
+- [Enzyme](https://github.com/enzymejs/enzyme)
+- [Vitest](http://vitest.dev/)
+- [babel-plugin-mockable-imports](https://github.com/robertknight/babel-plugin-mockable-imports)
 
 ## API guide
 
@@ -36,13 +36,13 @@ describe('MyWidget', () => {
   });
 
   it('should render', () => {
-    const wrapper = mount(<MyWidget/>);
+    const wrapper = mount(<MyWidget />);
 
     // Query component content etc.
   });
 
   it('should do something that requires component to be connected', () => {
-    const wrapper = mount(<MyWidget/>, { connected: true });
+    const wrapper = mount(<MyWidget />, { connected: true });
 
     // Test behavior that relies on rendered component being part of the
     // DOM tree under `document.body`.
@@ -58,30 +58,30 @@ However, we don't follow all practices recommended by Vitest. You should take
 these points into consideration when reading Vitest's documentation:
 
 1. By default, Vitest uses [Vite](https://vite.dev/) to bundle the tests and
-    source code as test files are run.
-    Instead, we manually pre-bundle our tests and source code in a single file
-    with Rollup, and that's the only test file we run.
-    That file is still processed by Vite, but since it has nothing to transform,
-    the time it takes is negligible.
+   source code as test files are run.
+   Instead, we manually pre-bundle our tests and source code in a single file
+   with Rollup, and that's the only test file we run.
+   That file is still processed by Vite, but since it has nothing to transform,
+   the time it takes is negligible.
 2. Due to the point above, Vitest tries to capture and calculate code coverage while
-    tests and sources are bundled with Vite.
-    In our case, we use `babel-plugin-istanbul` to instrument the code coverage
-    while we do our own pre-bundling.
-    This requires two configuration options to be set in `babel-plugin-istanbul`,
-    so that `istanbul-lib-instrument` checks the file is already instrumented.
-    See the details below.
-
-    ```js
-    [
-      'babel-plugin-istanbul',
-      {
-        coverageGlobalScope: 'globalThis',
-        coverageVariable: '__VITEST_COVERAGE__',
-
-        // Other options...
-      },
-    ]
-    ```
+   tests and sources are bundled with Vite.
+   In our case, we use `babel-plugin-istanbul` to instrument the code coverage
+   while we do our own pre-bundling.
+   This requires two configuration options to be set in `babel-plugin-istanbul`,
+   so that `istanbul-lib-instrument` checks the file is already instrumented.
+   [See the discussion](https://github.com/vitest-dev/vitest/discussions/7841#discussioncomment-12855608).
+
+   ```js
+   [
+     'babel-plugin-istanbul',
+     {
+       coverageGlobalScope: 'globalThis',
+       coverageVariable: '__VITEST_COVERAGE__',
+
+       // Other options...
+     },
+   ];
+   ```
 
 ### Istanbul coverage options
 
@@ -132,7 +132,6 @@ still prints the real-time summary and details for any failed test.
 
 ```js
 // vitest.config.js
-
 import { SummaryReporter } from '@hypothesis/frontend-testing';
 import { defineConfig } from 'vitest/config';