♻️ react-inspect: migrate to vitest (#12)

Author: cloud-walker

packages/react-inspect/.eslintrc.js

@@ -2,7 +2,12 @@ module.exports = {
   root: true,
   overrides: [
     {
-      files: ['src/**/*.js'],
+      files: ['./*.js'],
+      extends: ['eslint:recommended'],
+      env: {node: true},
+    },
+    {
+      files: ['src/**/*.{js,jsx}'],
       parser: '@babel/eslint-parser',
       extends: ['eslint:recommended', 'plugin:react/recommended'],
       settings: {
@@ -15,7 +20,7 @@ module.exports = {
       },
     },
     {
-      files: ['src/**/*.stories.js', 'src/**/*.test.js'],
+      files: ['src/**/*.stories.js', 'src/**/*.test.{js,jsx}'],
       env: {node: true},
     },
   ],

packages/react-inspect/jest.config.js

@@ -3,9 +3,9 @@
   "version": "0.6.0",
   "description": "Because json stringify is not enough",
   "scripts": {
-    "lint": "eslint src/**",
-    "test": "jest --watch",
-    "coverage": "jest --coverage",
+    "lint": "eslint --ignore-path=\"../../.gitignore\" .",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
     "storybook": "start-storybook -p 9000 -c .storybook",
     "build": "tsup src/main.js"
   },
@@ -42,12 +42,11 @@
     "@testing-library/react": "^13.3.0",
     "eslint": "^8.23.0",
     "eslint-plugin-react": "^7.3.0",
-    "jest": "^29.0.1",
-    "jest-environment-jsdom": "^29.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sanitize.css": "^13.0.0",
-    "tsup": "^6.2.3"
+    "tsup": "^6.2.3",
+    "vitest": "^0.22.1"
   },
   "dependencies": {
     "just-is-circular": "^2.1.1"

packages/react-inspect/package.json

@@ -1,5 +1,4 @@
 import React from 'react'
-import {keys, map, pipe} from 'remeda'
 
 import CollapseHandler from '../CollapseHandler'
 import Key from '../Key'
@@ -69,17 +68,13 @@ const Component = class extends React.Component {
     }
 
     if (data != null && typeof data == 'object') {
-      const value = pipe(
-        data,
-        keys,
-        map((x) => (
-          <Level key={x}>
-            <Key theme={theme}>{x}</Key>
-            <Punctuation theme={theme}>:</Punctuation>{' '}
-            <Component data={data[x]} theme={theme} />
-          </Level>
-        )),
-      )
+      const value = Object.keys(data).map((x) => (
+        <Level key={x}>
+          <Key theme={theme}>{x}</Key>
+          <Punctuation theme={theme}>:</Punctuation>{' '}
+          <Component data={data[x]} theme={theme} />
+        </Level>
+      ))
 
       return (
         <span>

…nspect/src/components/CollapseHandler.js …spect/src/components/CollapseHandler.jsxpackages/react-inspect/src/components/CollapseHandler.js renamed to packages/react-inspect/src/components/CollapseHandler.jsx packages/react-inspect/src/components/CollapseHandler.js renamed to packages/react-inspect/src/components/CollapseHandler.jsx

@@ -1,10 +1,10 @@
-import {render} from '@testing-library/react'
+import { render } from '@testing-library/react'
 import React from 'react'
-import data, {arr, fun, nil, num, str} from '../../mocks/data'
+import { describe, expect, it } from 'vitest'
 
+import data, { arr, fun, nil, num, str } from '../../mocks/data'
 import Component from './index'
 
-/* eslint-env jest */
 describe(`${Component.displayName} component`, () => {
   it('should render properly if data is undefined', () => {
     const {container} = render(<Component />)
@@ -81,21 +81,21 @@ describe(`${Component.displayName} component`, () => {
       <div>
         <span>
           <span
-            style="font-weight: bold;"
+            style="font-weight: bold; color: inherit;"
           >
             {
           </span>
           <span
             style="cursor: pointer;"
           >
             <span
-              style="font-weight: bold;"
+              style="font-weight: bold; color: inherit;"
             >
               ...
             </span>
           </span>
           <span
-            style="font-weight: bold;"
+            style="font-weight: bold; color: inherit;"
           >
             }
           </span>
@@ -110,21 +110,21 @@ describe(`${Component.displayName} component`, () => {
       <div>
         <span>
           <span
-            style="font-weight: bold;"
+            style="font-weight: bold; color: inherit;"
           >
             [
           </span>
           <span
             style="cursor: pointer;"
           >
             <span
-              style="font-weight: bold;"
+              style="font-weight: bold; color: inherit;"
             >
               ...
             </span>
           </span>
           <span
-            style="font-weight: bold;"
+            style="font-weight: bold; color: inherit;"
           >
             ]
           </span>