Bump Vitest to v4 (#19216)

This PR bumps Vitest from v2 to v4. As far as I know we don't use any
Vitest specific features in our tests, but had to upgrade the
`vitest.workspace.ts` file to a `vitest.config.ts` file instead.

The only features we use are the typical `describe`, `it`, `test`, and
`expect` functions.

The only other part we use is `vi.spyOn` and `vi.fn` but those didn't
change in API either.

The test shards were removed to prevent errors. Not all suites have
enough files / tests to be broken up into 3 parts so Vitest now errors
when that happens.

### Test plan

1. All tests should pass in CI.
2. All integration tests should pass in CI.

---------

Co-authored-by: Jordan Pittman <[email protected]>

Author: RobinMalfait

.github/workflows/integration-tests.yml

@@ -103,18 +103,8 @@ jobs:
           CARGO_PROFILE_RELEASE_LTO: 'off'
           CARGO_TARGET_X86_64_PC_WINDOWS_MSVC_LINKER: 'lld-link'
 
-      - name: Test ${{ matrix.integration }} 1/3
-        run: pnpm run test:integrations ./integrations/${{ matrix.integration }} --shard 1/3
-        env:
-          GITHUB_WORKSPACE: ${{ github.workspace }}
-
-      - name: Test ${{ matrix.integration }} 2/3
-        run: pnpm run test:integrations ./integrations/${{ matrix.integration }} --shard 2/3
-        env:
-          GITHUB_WORKSPACE: ${{ github.workspace }}
-
-      - name: Test ${{ matrix.integration }} 3/3
-        run: pnpm run test:integrations ./integrations/${{ matrix.integration }} --shard 3/3
+      - name: Test ${{ matrix.integration }}
+        run: pnpm run test:integrations ./integrations/${{ matrix.integration }}
         env:
           GITHUB_WORKSPACE: ${{ github.workspace }}
 

integrations/upgrade/index.test.ts

@@ -174,6 +174,8 @@ test(
 test(
   `upgrades a v3 project with prefixes to v4`,
   {
+    // Somehow this test takes *way* longer than the rest (but not always?)
+    timeout: 120_000,
     fs: {
       'package.json': json`
         {

integrations/utils.ts

@@ -37,6 +37,7 @@ interface TestConfig {
     [filePath: string]: string | Uint8Array
   }
 
+  timeout?: number
   installDependencies?: boolean
 }
 interface TestContext {
@@ -86,7 +87,7 @@ export function test(
   return defaultTest(
     name,
     {
-      timeout: TEST_TIMEOUT,
+      timeout: config.timeout ?? TEST_TIMEOUT,
       retry: process.env.CI ? 2 : 0,
       only: only || (!process.env.CI && debug),
       skip,

package.json

@@ -58,7 +58,7 @@
     "tsup": "^8.5.1",
     "turbo": "^2.6.1",
     "typescript": "^5.5.4",
-    "vitest": "^2.0.5"
+    "vitest": "^4.0.3"
   },
   "packageManager": "[email protected]",
   "pnpm": {

packages/@tailwindcss-upgrade/src/codemods/css/migrate-at-apply.test.ts

@@ -13,6 +13,11 @@ async function migrate(input: string, config: Config = {}) {
   let designSystem = await __unstable__loadDesignSystem(
     css`
       @import 'tailwindcss';
+
+      /* TODO(perf): Only here to speed up the tests */
+      @theme {
+        --*: initial;
+      }
     `,
     { base: __dirname },
   )
@@ -85,35 +90,44 @@ it('should move the legacy `!` prefix, to the new `!` postfix notation', async (
   `)
 })
 
-it('should apply all candidate migration when migrating with a config', async () => {
-  async function migrateWithPrefix(input: string) {
-    return postcss()
-      .use(
-        migrateAtApply({
-          designSystem: await __unstable__loadDesignSystem(
-            css`
-              @import 'tailwindcss' prefix(tw);
-            `,
-            { base: __dirname },
-          ),
-          userConfig: {
-            prefix: 'tw_',
-          },
-        }),
-      )
-      .process(input, { from: expect.getState().testPath })
-      .then((result) => result.css)
-  }
+it(
+  'should apply all candidate migration when migrating with a config',
+  { timeout: 10_000 },
+  async () => {
+    async function migrateWithPrefix(input: string) {
+      return postcss()
+        .use(
+          migrateAtApply({
+            designSystem: await __unstable__loadDesignSystem(
+              css`
+                @import 'tailwindcss' prefix(tw);
 
-  expect(
-    await migrateWithPrefix(css`
-      .foo {
-        @apply !tw_flex [color:--my-color] tw_bg-gradient-to-t;
-      }
-    `),
-  ).toMatchInlineSnapshot(`
+                /* TODO(perf): Only here to speed up the tests */
+                @theme {
+                  --*: initial;
+                }
+              `,
+              { base: __dirname },
+            ),
+            userConfig: {
+              prefix: 'tw_',
+            },
+          }),
+        )
+        .process(input, { from: expect.getState().testPath })
+        .then((result) => result.css)
+    }
+
+    expect(
+      await migrateWithPrefix(css`
+        .foo {
+          @apply !tw_flex [color:--my-color] tw_bg-gradient-to-t;
+        }
+      `),
+    ).toMatchInlineSnapshot(`
     ".foo {
       @apply tw:flex! tw:text-(--my-color) tw:bg-linear-to-t;
     }"
   `)
-})
+  },
+)

packages/@tailwindcss-upgrade/src/codemods/template/is-safe-migration.test.ts

@@ -4,10 +4,22 @@ import * as versions from '../../utils/version'
 import { migrateCandidate } from './migrate'
 vi.spyOn(versions, 'isMajor').mockReturnValue(true)
 
+const css = String.raw
+
 describe('is-safe-migration', async () => {
-  let designSystem = await __unstable__loadDesignSystem('@import "tailwindcss";', {
-    base: __dirname,
-  })
+  let designSystem = await __unstable__loadDesignSystem(
+    css`
+      @import 'tailwindcss';
+
+      /* TODO(perf): Only here to speed up the tests */
+      @theme {
+        --*: initial;
+        --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+        --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+      }
+    `,
+    { base: __dirname },
+  )
 
   test.each([
     [`let notBorder = !border    \n`, '!border'],