Migrate to vitest (#87)

0no-co · Apr 30, 2023 · ed954e0 · ed954e0
1 parent 59b5f28
commit ed954e0
Show file tree

Hide file tree

Showing 16 changed files with 845 additions and 2,734 deletions.
diff --git a/.codecov.yml b/.codecov.yml
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -45,42 +45,8 @@ jobs:
       - name: Install Dependencies
         run: pnpm install --frozen-lockfile --prefer-offline
 
-      - run: pnpm build
+      - name: Build
+        run: pnpm build
 
-  test:
-    name: Test
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repo
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-
-      - name: Setup Node
-        uses: actions/setup-node@v3
-        with:
-          node-version: '18'
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v2.2.4
-        with:
-          version: 8
-          run_install: false
-
-      - name: Get pnpm store directory
-        id: pnpm-store
-        run: echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - name: Use pnpm store
-        uses: actions/cache@v3
-        id: pnpm-cache
-        with:
-          path: ${{ steps.pnpm-store.outputs.pnpm_cache_dir }}
-          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-
-
-      - name: Install Dependencies
-        run: pnpm install --frozen-lockfile --prefer-offline
-      - run: pnpm test
-      - uses: codecov/codecov-action@v1
+      - name: Test
+        run: pnpm test
diff --git a/.npmignore b/.npmignore
@@ -6,7 +6,6 @@ example
 yarn.lock
 pnpm-lock.yaml
 .rpt2_cache
-coverage
 packages
 typings.d.ts
 Dockerfile
@@ -17,7 +16,6 @@ docker-compose.yml
 .eslintrc.json
 .prettierignore
 /website
-jest.preact.config.json
 /docs
 .rts2_cache_es
 .rts2_cache_umd

diff --git a/README.md b/README.md
@@ -2,7 +2,6 @@
 
 [![npm version](https://badgen.net/npm/v/hoofd)](https://www.npmjs.com/package/hoofd)
 [![Bundle size](https://badgen.net/bundlephobia/minzip/hoofd)](https://badgen.net/bundlephobia/minzip/hoofd)
-[![codecov](https://codecov.io/gh/JoviDeCroock/hoofd/branch/main/graph/badge.svg)](https://codecov.io/gh/JoviDeCroock/hoofd)
 
 This project aims at providing a set of hooks to populate `<meta>`, ... for each page. With crawlers now supporting
 client-side alterations it's important to support a fallback model for our `<head>` tags. The dispatcher located in this
@@ -128,8 +127,8 @@ const stringify = (title, metas, links) => {
       `${acc}<${tagName}${Object.keys(tag).reduce(
         (properties, key) => `${properties} ${key}="${tag[key]}"`,
         ''
-      )}>`
-    }, '')
+      )}>`;
+    }, '');
 
   return `
     <title>${title}</title>

diff --git a/__tests__/ssr.test.tsx b/__tests__/ssr.test.tsx
@@ -1,9 +1,12 @@
-jest.mock('../src/utils', () => {
+import { expect, describe, it, vi } from 'vitest';
+
+vi.mock('../src/utils', () => {
   return {
     isServerSide: true,
   };
 });
 import * as React from 'react';
+import * as ReactDom from 'react-dom/server';
 import {
   useTitle,
   toStatic,
@@ -13,22 +16,12 @@ import {
   useHead,
   useScript,
 } from '../src';
-import { render } from '@testing-library/react';
-
-describe('ssr', () => {
-  let original: any;
 
-  beforeAll(() => {
-    original = React.useEffect;
-    (React as any).useEffect = jest.fn(() => {});
-  });
-
-  afterAll(() => {
-    (React as any).useEffect = original;
-  });
+const render = ReactDom.renderToString;
 
+describe('ssr', () => {
   it('should render to string (basic-individual)', () => {
-    jest.useFakeTimers();
+    vi.useFakeTimers();
     const MyComponent = () => {
       useTitle('hi');
       useLang('nl');
@@ -49,7 +42,7 @@ describe('ssr', () => {
     };
 
     render(<MyComponent />);
-    jest.runAllTimers();
+    vi.runAllTimers();
     const { lang, title, metas, links, scripts } = toStatic();
 
     expect(lang).toEqual('nl');
@@ -74,15 +67,15 @@ describe('ssr', () => {
   });
 
   it('should escape meta-content', () => {
-    jest.useFakeTimers();
+    vi.useFakeTimers();
     const MyComponent = () => {
       useMeta({ property: 'fb:admins', content: "''<>&" });
       useMeta({ property: 'fb:something', content: '""' });
       return <p>hi</p>;
     };
 
     render(<MyComponent />);
-    jest.runAllTimers();
+    vi.runAllTimers();
     const { metas } = toStatic();
 
     expect(metas).toEqual([
@@ -92,7 +85,7 @@ describe('ssr', () => {
   });
 
   it('should render to string (basic-useHead)', () => {
-    jest.useFakeTimers();
+    vi.useFakeTimers();
     const MyComponent = () => {
       useHead({
         title: 'hi',
@@ -102,14 +95,14 @@ describe('ssr', () => {
     };
 
     render(<MyComponent />);
-    jest.runAllTimers();
+    vi.runAllTimers();
     const { title, metas } = toStatic();
     expect(title).toEqual('hi');
     expect(metas).toEqual([{ content: 'hi', property: 'fb:admins' }]);
   });
 
   it('should render to string (nested-individual)', () => {
-    jest.useFakeTimers();
+    vi.useFakeTimers();
     const MyComponent = (props: any) => {
       useTitle('hi');
       useMeta({ property: 'fb:admins', content: 'hi' });
@@ -142,7 +135,7 @@ describe('ssr', () => {
         <MyNestedComponent />
       </MyComponent>
     );
-    jest.runAllTimers();
+    vi.runAllTimers();
     const { title, metas, links, scripts } = toStatic();
     expect(title).toEqual('bye');
     expect(metas).toEqual([{ content: 'bye', property: 'fb:admins' }]);
@@ -166,7 +159,7 @@ describe('ssr', () => {
   });
 
   it('should render to string (nested-useHead)', () => {
-    jest.useFakeTimers();
+    vi.useFakeTimers();
     const MyComponent = (props: any) => {
       useHead({
         title: 'hi',
@@ -188,7 +181,7 @@ describe('ssr', () => {
         <MyNestedComponent />
       </MyComponent>
     );
-    jest.runAllTimers();
+    vi.runAllTimers();
     const { title, metas } = toStatic();
     expect(title).toEqual('bye');
     expect(metas).toEqual([{ content: 'bye', property: 'fb:admins' }]);

diff --git a/__tests__/ssr.useTitleTemplate.test.tsx b/__tests__/ssr.useTitleTemplate.test.tsx
@@ -1,41 +1,32 @@
-jest.mock('../src/utils', () => {
+import { expect, describe, it, vi } from 'vitest';
+
+vi.mock('../src/utils', () => {
   return {
     isServerSide: true,
   };
 });
 
 import * as React from 'react';
+import * as ReactDom from 'react-dom/server';
 import { useTitle, useTitleTemplate, toStatic } from '../src';
-import { render } from '@testing-library/react';
 
 describe('ssr with a template', () => {
-  let original: any;
-
-  beforeAll(() => {
-    original = React.useEffect;
-    (React as any).useEffect = jest.fn(() => {});
-  });
-
-  afterAll(() => {
-    (React as any).useEffect = original;
-  });
-
   it('should render to string (basic)', () => {
-    jest.useFakeTimers();
+    vi.useFakeTimers();
     const MyComponent = () => {
       useTitleTemplate('%s | you');
       useTitle('hi');
       return <p>hi</p>;
     };
 
-    render(<MyComponent />);
-    jest.runAllTimers();
+    ReactDom.renderToString(<MyComponent />);
+    vi.runAllTimers();
     const { title } = toStatic();
     expect(title).toEqual('hi | you');
   });
 
   it('should render to string (nested)', () => {
-    jest.useFakeTimers();
+    vi.useFakeTimers();
     const MyComponent = (props: any) => {
       useTitleTemplate('%s | you');
       useTitle('hi');
@@ -48,12 +39,12 @@ describe('ssr with a template', () => {
       return <p>hi</p>;
     };
 
-    render(
+    ReactDom.renderToString(
       <MyComponent>
         <MyNestedComponent />
       </MyComponent>
     );
-    jest.runAllTimers();
+    vi.runAllTimers();
     const { title } = toStatic();
     expect(title).toEqual('bye | you');
   });

diff --git a/__tests__/useHead.test.tsx b/__tests__/useHead.test.tsx
@@ -1,6 +1,10 @@
-import '@testing-library/jest-dom';
+/**
+ * @vitest-environment jsdom
+ */
 import * as React from 'react';
 import { act, render, cleanup } from '@testing-library/react';
+import { expect, describe, afterEach, it, vi } from 'vitest';
+
 import { useHead } from '../src';
 import dispatcher from '../src/dispatcher';
 
@@ -11,7 +15,7 @@ describe('useMeta', () => {
   });
 
   it('should use full head', async () => {
-    jest.useFakeTimers();
+    vi.useFakeTimers();
     const MyComponent = ({ description }: any) => {
       useHead({
         title: 'Hello world',
@@ -34,7 +38,7 @@ describe('useMeta', () => {
       ));
     });
 
-    jest.runAllTimers();
+    vi.runAllTimers();
     expect(document.title).toEqual('Hello world');
     expect(document.head.innerHTML).toContain('<meta charset="utf-8">');
     expect(document.head.innerHTML).toContain(
@@ -51,7 +55,7 @@ describe('useMeta', () => {
       await rerender(<MyComponent description="This is not a test" />);
     });
 
-    jest.runAllTimers();
+    vi.runAllTimers();
     expect(document.title).toEqual('Hello world');
     expect(document.head.innerHTML).toContain('<meta charset="utf-8">');
     expect(document.head.innerHTML).toContain(
@@ -72,7 +76,7 @@ describe('useMeta', () => {
   });
 
   it('should deeply utilize head', async () => {
-    jest.useFakeTimers();
+    vi.useFakeTimers();
 
     const MyChild = ({ description, title }: any) => {
       useHead({
@@ -114,7 +118,7 @@ describe('useMeta', () => {
       ));
     });
 
-    jest.runAllTimers();
+    vi.runAllTimers();
     expect(
       document.getElementsByTagName('html')[0].getAttribute('lang')
     ).toEqual('en');
@@ -138,7 +142,7 @@ describe('useMeta', () => {
       );
     });
 
-    jest.runAllTimers();
+    vi.runAllTimers();
     expect(document.title).toEqual('Hello world');
     expect(document.head.innerHTML).toContain('<meta charset="utf-8">');
     expect(document.head.innerHTML).toContain(
@@ -159,7 +163,7 @@ describe('useMeta', () => {
       );
     });
 
-    jest.runAllTimers();
+    vi.runAllTimers();
     expect(document.title).toEqual('Ohaio world');
     expect(document.head.innerHTML).toContain('<meta charset="utf-8">');
     expect(document.head.innerHTML).toContain(
@@ -176,7 +180,7 @@ describe('useMeta', () => {
       await rerender(<MyComponent twitter description="This is not a test" />);
     });
 
-    jest.runAllTimers();
+    vi.runAllTimers();
     expect(document.title).toEqual('Hello world');
     expect(document.head.innerHTML).toContain('<meta charset="utf-8">');
     expect(document.head.innerHTML).toContain(

diff --git a/__tests__/useLanguage.test.tsx b/__tests__/useLanguage.test.tsx
@@ -1,6 +1,10 @@
-import '@testing-library/jest-dom';
+/**
+ * @vitest-environment jsdom
+ */
 import * as React from 'react';
 import { act, render, cleanup } from '@testing-library/react';
+import { expect, describe, afterEach, it } from 'vitest';
+
 import { useLang } from '../src';
 
 describe('useLang', () => {

diff --git a/__tests__/useLink.test.tsx b/__tests__/useLink.test.tsx
@@ -1,6 +1,10 @@
-import '@testing-library/jest-dom';
+/**
+ * @vitest-environment jsdom
+ */
 import * as React from 'react';
 import { act, render, cleanup } from '@testing-library/react';
+import { expect, describe, afterEach, it } from 'vitest';
+
 import { useLink } from '../src';
 
 describe('useLink', () => {
@@ -68,7 +72,7 @@ describe('useLink', () => {
       rel: 'prefetch',
       sizes: 'x',
     };
-    Object.keys(options).forEach((key) => {
+    Object.keys(options).forEach(key => {
       // @ts-ignore
       (node as Element).setAttribute(key, options[key]);
     });
@@ -118,7 +122,7 @@ describe('useLink', () => {
       rel: 'prefetch',
       sizes: 'x',
     };
-    Object.keys(options).forEach((key) => {
+    Object.keys(options).forEach(key => {
       // @ts-ignore
       (node as Element).setAttribute(key, options[key]);
     });