use vitest

Author: Daniel A. White

.eslintrc

@@ -12,13 +12,5 @@
     "@typescript-eslint/prefer-optional-chain": "error",
     "@typescript-eslint/no-floating-promises": ["error", { "ignoreVoid": true }],
     "no-console": "warn"
-  },
-  "overrides": [
-    {
-      "files": ["*.spec.{ts,tsx}"],
-      "env": {
-        "jest": true
-      }
-    }
-  ]
+  }
 }

jest.config.js

@@ -30,10 +30,10 @@
     "release.docs": "sl-scripts release:docs",
     "release.dryRun": "sl-scripts release --dry-run --debug",
     "storybook": "start-storybook -p 6006",
-    "test": "jest",
-    "test.prod": "yarn lint && yarn test --coverage --maxWorkers=2",
-    "test.update": "yarn test --updateSnapshot",
-    "test.watch": "yarn test --watch",
+    "test": "vitest run",
+    "test.prod": "yarn lint && yarn vitest run --coverage",
+    "test.update": "yarn vitest run --updateSnapshot",
+    "test.watch": "yarn vitest",
     "test.packaging": "node -e \"require('./dist/index.js')\" && node --input-type=module -e \"import './dist/index.mjs'\"",
     "size-limit": "size-limit"
   },
@@ -68,44 +68,42 @@
     "@storybook/core": "^6.5.0",
     "@storybook/manager-webpack5": "^6.5.0",
     "@storybook/react": "^6.5.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^12.0.0",
     "@types/classnames": "^2.2.11",
     "@types/enzyme": "^3.10.8",
-    "@types/jest": "^29.5.12",
     "@types/lodash": "^4.14.149",
     "@types/node": "^12.7.2",
     "@types/react": "^16.14.0",
     "@types/react-dom": "^16.9.0",
     "@types/treeify": "^1.0.0",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
-    "babel-jest": "^26.6.3",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/ui": "^1.6.0",
     "babel-loader": "^8.2.2",
     "copyfiles": "^2.4.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",
     "eslint": "^8.4.1",
     "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-jest": "^25.3.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
-    "jest": "^29.7.0",
-    "jest-enzyme": "^7.1.2",
+    "jsdom": "^24.1.0",
     "prettier": "^3.2.2",
     "react": "^16.14.0",
     "react-docgen-typescript-plugin": "^1.0.6",
     "react-dom": "^16.14.0",
     "size-limit": "^4.11.0",
     "treeify": "^1.1.0",
-    "ts-jest": "^29.1.4",
     "typescript": "5.4.5",
+    "vite": "^5.3.1",
+    "vitest": "^1.6.0",
     "webpack": "^5.67.0"
   },
-  "resolutions": {
-    "jest-environment-jsdom": "^29.7.0"
-  },
   "lint-staged": {
     "*.{ts,tsx}$": [
       "yarn lint.fix"

package.json

@@ -146,7 +146,7 @@ const JsonSchemaViewerInner = ({
   );
   if (isEmpty) {
     return (
-      <Box className={cn(className, 'JsonSchemaViewer')} fontSize="sm">
+      <Box className={cn(className, 'JsonSchemaViewer')} fontSize="sm" data-test="empty-text">
         {emptyText}
       </Box>
     );

setupTests.ts

@@ -1,14 +1,13 @@
-import 'jest-enzyme';
+import '@testing-library/jest-dom';
 
 import { RootNode } from '@stoplight/json-schema-tree';
-import { Icon } from '@stoplight/mosaic';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import { JSONSchema4 } from 'json-schema';
 import * as React from 'react';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { SchemaRow } from '../SchemaRow';
 import { buildTree, findNodeWithPath } from '../shared/__tests__/utils';
-import { Properties } from '../shared/Properties';
 
 describe('SchemaRow component', () => {
   describe('resolving error', () => {
@@ -28,13 +27,12 @@ describe('SchemaRow component', () => {
       tree = buildTree(schema);
     });
 
-    it('given no custom resolver, should render a generic error message', () => {
-      const wrapper = mount(<SchemaRow schemaNode={tree.children[0]!} nestingLevel={0} />);
-      expect(wrapper.find(Icon).at(1)).toHaveProp('aria-label', `Could not resolve '#/properties/foo'`);
-      wrapper.unmount();
+    it('given no custom resolver, should render a generic error message', async () => {
+      const wrapper = render(<SchemaRow schemaNode={tree.children[0]!} nestingLevel={0} />);
+      expect(await wrapper.findByLabelText(`Could not resolve '#/properties/foo'`)).toBeInTheDocument();
     });
 
-    it('given a custom resolver, should render a message thrown by it', () => {
+    it('given a custom resolver, should render a message thrown by it', async () => {
       const message = "I don't know how to resolve it. Sorry";
 
       tree = buildTree(schema, {
@@ -43,77 +41,71 @@ describe('SchemaRow component', () => {
         },
       });
 
-      const wrapper = mount(<SchemaRow schemaNode={tree.children[0]!} nestingLevel={0} />);
-      expect(wrapper.find(Icon).at(1)).toHaveProp('aria-label', message);
-      wrapper.unmount();
+      const wrapper = render(<SchemaRow schemaNode={tree.children[0]!} nestingLevel={0} />);
+      expect(await wrapper.findByLabelText(message)).toBeInTheDocument();
     });
   });
 
   describe('resolving permission error', () => {
     let tree: RootNode;
     let schema: JSONSchema4;
 
-    it('given an object schema is marked as internal, a permission denied error message should be shown', () => {
+    it('given an object schema is marked as internal, a permission denied error message should be shown', async () => {
       schema = {
         type: 'object',
         'x-sl-internally-excluded': true,
         'x-sl-error-message': 'You do not have permission to view this reference',
       };
       tree = buildTree(schema);
-      const wrapper = mount(<SchemaRow schemaNode={tree.children[0]!} nestingLevel={0} />);
-      expect(wrapper.find(Icon).at(0)).toHaveProp('aria-label', `You do not have permission to view this reference`);
-      wrapper.unmount();
+      const wrapper = render(<SchemaRow schemaNode={tree.children[0]!} nestingLevel={0} />);
+      expect(await wrapper.findByLabelText(`You do not have permission to view this reference`)).toBeInTheDocument();
     });
 
-    it('given a number schema is marked as internal, a permission denied error messsage should be shown', () => {
+    it('given a number schema is marked as internal, a permission denied error messsage should be shown', async () => {
       schema = {
         type: 'number',
         'x-sl-internally-excluded': true,
         'x-sl-error-message': 'You do not have permission to view this reference',
       };
       tree = buildTree(schema);
-      const wrapper = mount(<SchemaRow schemaNode={tree.children[0]!} nestingLevel={0} />);
-      expect(wrapper.find(Icon).at(0)).toHaveProp('aria-label', `You do not have permission to view this reference`);
-      wrapper.unmount();
+      const wrapper = render(<SchemaRow schemaNode={tree.children[0]!} nestingLevel={0} />);
+      expect(await wrapper.findByLabelText(`You do not have permission to view this reference`)).toBeInTheDocument();
     });
 
-    it('given an integer schema is marked as internal, a permission denied error messsage should be shown', () => {
+    it('given an integer schema is marked as internal, a permission denied error messsage should be shown', async () => {
       schema = {
         type: 'integer',
         'x-sl-internally-excluded': true,
         'x-sl-error-message': 'You do not have permission to view this reference',
       };
       tree = buildTree(schema);
-      const wrapper = mount(<SchemaRow schemaNode={tree.children[0]!} nestingLevel={0} />);
-      expect(wrapper.find(Icon).at(0)).toHaveProp('aria-label', `You do not have permission to view this reference`);
-      wrapper.unmount();
+      const wrapper = render(<SchemaRow schemaNode={tree.children[0]!} nestingLevel={0} />);
+      expect(await wrapper.findByLabelText(`You do not have permission to view this reference`)).toBeInTheDocument();
     });
 
-    it('given a string schema is marked as internal, a permission denied error messsage should be shown', () => {
+    it('given a string schema is marked as internal, a permission denied error messsage should be shown', async () => {
       schema = {
         type: 'string',
         'x-sl-internally-excluded': true,
         'x-sl-error-message': 'You do not have permission to view this reference',
       };
       tree = buildTree(schema);
-      const wrapper = mount(<SchemaRow schemaNode={tree.children[0]!} nestingLevel={0} />);
-      expect(wrapper.find(Icon).at(0)).toHaveProp('aria-label', `You do not have permission to view this reference`);
-      wrapper.unmount();
+      const wrapper = render(<SchemaRow schemaNode={tree.children[0]!} nestingLevel={0} />);
+      expect(await wrapper.findByLabelText(`You do not have permission to view this reference`)).toBeInTheDocument();
     });
 
-    it('given a boolean schema is marked as internal, a permission denied error messsage should be shown', () => {
+    it('given a boolean schema is marked as internal, a permission denied error messsage should be shown', async () => {
       schema = {
         type: 'boolean',
         'x-sl-internally-excluded': true,
         'x-sl-error-message': 'You do not have permission to view this reference',
       };
       tree = buildTree(schema);
-      const wrapper = mount(<SchemaRow schemaNode={tree.children[0]!} nestingLevel={0} />);
-      expect(wrapper.find(Icon).at(0)).toHaveProp('aria-label', `You do not have permission to view this reference`);
-      wrapper.unmount();
+      const wrapper = render(<SchemaRow schemaNode={tree.children[0]!} nestingLevel={0} />);
+      expect(await wrapper.findByLabelText(`You do not have permission to view this reference`)).toBeInTheDocument();
     });
 
-    it('given an array schema is marked as internal, a permission denied error messsage should be shown', () => {
+    it('given an array schema is marked as internal, a permission denied error messsage should be shown', async () => {
       schema = {
         title: 'test',
         type: 'array',
@@ -124,9 +116,8 @@ describe('SchemaRow component', () => {
         },
       };
       tree = buildTree(schema);
-      const wrapper = mount(<SchemaRow schemaNode={tree.children[0]!} nestingLevel={0} />);
-      expect(wrapper.find(Icon).at(0)).toHaveProp('aria-label', `You do not have permission to view this reference`);
-      wrapper.unmount();
+      const wrapper = render(<SchemaRow schemaNode={tree.children[0]!} nestingLevel={0} />);
+      expect(await wrapper.findByLabelText(`You do not have permission to view this reference`)).toBeInTheDocument();
     });
   });
 
@@ -140,9 +131,13 @@ describe('SchemaRow component', () => {
       if (!schemaNode) {
         throw Error('Node not found, invalid configuration');
       }
-      const wrapper = mount(<SchemaRow schemaNode={schemaNode} nestingLevel={0} />);
-      expect(wrapper.find(Properties)).toHaveProp('required', value);
-      wrapper.unmount();
+      const wrapper = render(<SchemaRow schemaNode={schemaNode} nestingLevel={0} />);
+      const requiredEl = wrapper.queryByTestId('property-required');
+      if (value) {
+        expect(requiredEl).toBeInTheDocument();
+      } else {
+        expect(requiredEl).not.toBeInTheDocument();
+      }
     }
 
     beforeEach(() => {
@@ -276,17 +271,16 @@ describe('SchemaRow component', () => {
       };
     });
 
-    it('should render correct type name for binary type', () => {
+    it('should render correct type name for binary type', async () => {
       const tree = buildTree(schema);
 
       const schemaNode = findNodeWithPath(tree, ['properties', 'profile_photo']);
       if (!schemaNode) {
         throw Error('Node not found, invalid configuration');
       }
-      const wrapper = mount(<SchemaRow schemaNode={schemaNode} nestingLevel={0} />);
-      const spanWrapper = wrapper.find({ 'data-test': 'property-type' });
-      expect(spanWrapper.at(0).text()).toContain('string<binary>');
-      wrapper.unmount();
+      const wrapper = render(<SchemaRow schemaNode={schemaNode} nestingLevel={0} />);
+      const spanWrapper = await wrapper.findByTestId('property-type');
+      expect(spanWrapper).toHaveTextContent('string<binary>');
     });
   });
 });

src/components/JsonSchemaViewer.tsx

@@ -0,0 +1,10 @@
+import {defineConfig} from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: './vitest.setup.ts',
+  },
+})

src/components/__tests__/SchemaRow.spec.tsx

@@ -0,0 +1,24 @@
+import '@testing-library/jest-dom/vitest';
+
+import { cleanup, configure } from '@testing-library/react';
+import { afterEach, expect, vitest } from 'vitest';
+
+// @ts-ignore
+global.expect = expect;
+
+configure({ testIdAttribute: 'data-test' });
+
+afterEach(() => {
+  cleanup();
+});
+
+const observe = vitest.fn();
+const unobserve = vitest.fn();
+const disconnect = vitest.fn();
+
+// @ts-ignore
+window.IntersectionObserver = vitest.fn(() => ({
+  observe,
+  unobserve,
+  disconnect,
+}));