fix: resolve test failures after dependency updates

Author: sectsect

apps/solidjs-boilerplate/vite.config.ts

@@ -55,15 +55,15 @@ export default defineConfig({
         '**/mocks/**',
       ],
     },
+    // Enable isolation to prevent test pollution
+    isolate: true,
     // solid needs to be inline to work around
     // a resolution issue in vitest:
-    // deps: {
-    //   inline: [/solid-js/],
-    // },
-    // if you have few tests, try commenting one
-    // or both out to improve performance:
-    // threads: false,
-    // isolate: false,
+    server: {
+      deps: {
+        inline: [/solid-js/],
+      },
+    },
     exclude: [
       '**/node_modules/**',
       '**/dist/**',
@@ -72,8 +72,7 @@ export default defineConfig({
       '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress}.config.*',
       '**/e2e/**', // Additional e2e directory for Playwright.
       '**/mocks/**',
-    ],
-    deps: {}, // @ https://qiita.com/Stead08/items/762093fe86999fec4e80
+    ]
   },
   define: process.env.VITEST ? {} : { global: 'window' },
 });

apps/solidjs-boilerplate/vitest.setup.ts

@@ -1,10 +1,14 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import '@testing-library/jest-dom/vitest';
 import { beforeAll, afterEach, afterAll } from 'vitest';
+import { cleanup } from '@solidjs/testing-library';
 
 import { server } from '@/mocks/server';
 
 // So this is basically saying any network requests that come through route them to mock service worker instead of the actual network.
 beforeAll(() => server.listen());
-afterEach(() => server.resetHandlers());
+afterEach(() => {
+  server.resetHandlers();
+  cleanup(); // Add cleanup after each test
+});
 afterAll(() => server.close());

packages/solid-hiding-header/tests/index.test.tsx

@@ -1,6 +1,5 @@
-import { render, screen, within } from '@solidjs/testing-library';
+import { render, screen } from '@solidjs/testing-library';
 import { expect, describe, test, vi, beforeAll } from 'vitest';
-import { mount } from '@vue/test-utils';
 import { HidingHeader } from '@/index';
 
 describe('HidingHeader component', () => {
@@ -17,54 +16,57 @@ describe('HidingHeader component', () => {
   });
 
   test('should exists', () => {
-    const wrapper = mount(HidingHeader)
-    expect(wrapper).toBeTruthy()
+    const { unmount } = render(() => <HidingHeader>Header</HidingHeader>);
+    const element = screen.getByRole('banner');
+    expect(element).toBeTruthy();
+    unmount();
   });
 
   test('is assigned a <div> tag', () => {
-    render(() => (
+    const { unmount } = render(() => (
       <HidingHeader>Header</HidingHeader>
     ));
-    // screen.getByRole('button', { name: '' });
 
-    const containerElm = screen.getByRole('banner', { name: '' });
+    const containerElm = screen.getByRole('banner');
     console.log(containerElm.tagName);
     expect(containerElm.tagName).toBe('DIV');
+    unmount();
   });
 
   test('is assigned a <header> tag', () => {
-    render(() => (
+    const { unmount } = render(() => (
       <HidingHeader component="header">Header</HidingHeader>
     ));
-    // screen.getByRole('button', { name: '' });
 
-    const containerElm = screen.getByRole('banner', { name: '' });
+    const containerElm = screen.getByRole('banner');
     expect(containerElm.tagName).toBe('HEADER');
+    unmount();
   });
 
   test('Top Level element has correct default class assigned', () => {
-    render(() => (
+    const { unmount } = render(() => (
       <HidingHeader>
         <div class="inner">
           <p>Header</p>
         </div>
       </HidingHeader>
     ));
 
-    const containerElm = screen.getByRole('banner', { name: '' });
+    const containerElm = screen.getByRole('banner');
     expect(containerElm).toHaveClass('hidingHeader');
+    unmount();
   });
 
   test('Top Level element has correct default style assigned', () => {
-    render(() => (
+    const { unmount } = render(() => (
       <HidingHeader>
         <div class="inner">
           <p>Header</p>
         </div>
       </HidingHeader>
     ));
 
-    const containerElm = screen.getByRole('banner', { name: '' });
+    const containerElm = screen.getByRole('banner');
 
     // Bug for `toHaveStyle()` on CSS Custom Property @ https://github.com/testing-library/jest-dom/issues/280
     // expect(containerElm).toHaveStyle(`--hidingHeader-height: 0px;`);
@@ -79,57 +81,64 @@ describe('HidingHeader component', () => {
     expect(containerElm.style._values).toMatchObject({
       '--hidingHeader-height': '0px',
     });
+    unmount();
   });
 
   test('Top Level element has correct additional classes assigned', () => {
-    render(() => (
+    const { unmount } = render(() => (
       <HidingHeader class="bg-black">
         <div class="inner">
           <p>Header</p>
         </div>
       </HidingHeader>
     ));
 
-    const containerElm = screen.getByRole('banner', { name: '' });
+    const containerElm = screen.getByRole('banner');
     expect(containerElm).toHaveClass('hidingHeader', 'bg-black');
+    unmount();
   });
 
   test('inner element has correct default class assigned', () => {
-    render(() => (
+    const { unmount } = render(() => (
       <HidingHeader>
         <div class="inner">
           <p>Header</p>
         </div>
       </HidingHeader>
     ));
 
-    const innerElm = screen.getByRole('banner', { name: '' }).querySelector('div');
+    const containerElm = screen.getByRole('banner');
+    const innerElm = containerElm.querySelector('div');
     expect(innerElm).toHaveClass('hidingHeader-in');
+    unmount();
   });
 
   test('inner element has correct additional classes assigned', () => {
-    render(() => (
+    const { unmount } = render(() => (
       <HidingHeader innerClass="bg-black">
         <div class="inner">
           <p>Header</p>
         </div>
       </HidingHeader>
     ));
 
-    const innerElm = screen.getByRole('banner', { name: '' }).querySelector('div');
+    const containerElm = screen.getByRole('banner');
+    const innerElm = containerElm.querySelector('div');
     expect(innerElm).toHaveClass('hidingHeader-in', 'bg-black');
+    unmount();
   });
 
   test('should have a element', () => {
-    render(() => (
+    const { unmount } = render(() => (
       <HidingHeader>
         <div class="inner">
           <p>Header</p>
         </div>
       </HidingHeader>
     ));
 
-    const headerElm = screen.getByText(/^Header$/i); // full string match, ignore case
+    const headerElm = screen.getByText('Header'); // Use exact text match instead of regex
     expect(headerElm).toBeInTheDocument();
+    unmount();
   });
 });

packages/solid-hiding-header/vite.config.ts

@@ -36,15 +36,16 @@ export default defineConfig({
       provider: 'v8',
       reporter: ['text', 'json', 'html', 'lcov'],
     },
+    // Ensure proper cleanup between tests
+    globals: false,
+    // Enable isolation to prevent test pollution
+    isolate: true,
     // solid needs to be inline to work around
     // a resolution issue in vitest:
-    // deps: {
-    //   inline: [/solid-js/],
-    // },
-    // if you have few tests, try commenting one
-    // or both out to improve performance:
-    // threads: false,
-    // isolate: false,
-    deps: {}, // @ https://qiita.com/Stead08/items/762093fe86999fec4e80
+    server: {
+      deps: {
+        inline: [/solid-js/],
+      },
+    },
   },
 });

packages/solid-hiding-header/vitest.setup.ts

@@ -1,2 +1,11 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import '@testing-library/jest-dom/vitest';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { cleanup } from '@solidjs/testing-library';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { afterEach } from 'vitest';
+
+// Automatically cleanup after each test
+afterEach(() => {
+  cleanup();
+});