chore(playground): Use vitest (remove react-scripts) (#6265)

packages/cubejs-backend-shared/test/promises.test.ts

@@ -494,7 +494,7 @@ describe('asyncMemoizeBackground', () => {
 
   // Wait for promises running in the non-async timer callback to complete.
   // From https://stackoverflow.com/a/58716087/308237
-  const flushPromises = () => new Promise(resolve => setImmediate(resolve));
+  const flushPromises = () => new Promise(jest.requireActual('timers').setImmediate);
 
   test('asyncMemoizeBackground cache', async () => {
     let called = 0;

packages/cubejs-playground/.env

@@ -1 +1 @@
-SKIP_PREFLIGHT_CHECK=true
+SKIP_PREFLIGHT_CHECK=true

packages/cubejs-playground/package.json

@@ -11,7 +11,7 @@
   "module": "lib/playground/index.js",
   "types": "lib/playground/index.d.ts",
   "scripts": {
-    "unit": "react-scripts test",
+    "unit": "vitest run",
     "dev": "vite",
     "watch": "tsc --noEmit false --watch",
     "build": "tsc && yarn build:playground && yarn build:lib",
@@ -60,8 +60,6 @@
   "devDependencies": {
     "@ant-design/compatible": "^1.0.2",
     "@ant-design/icons": "^4.7.0",
-    "@babel/cli": "^7.5.5",
-    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
     "@cubejs-client/core": "^0.34.19",
     "@cubejs-client/react": "^0.34.19",
     "@types/flexsearch": "^0.7.3",
@@ -81,15 +79,16 @@
     "eslint-plugin-react": "^7.20.0",
     "fs-extra": "^8.1.0",
     "graphql": "^15.8.0",
+    "jsdom": "^16.7.0",
     "prismjs": "^1.25.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scripts": "4.0.3",
     "recursive-readdir": "^2.2.2",
     "styled-components": "5.2.0",
     "tslib": "^2.3.0",
     "typescript": "~5.2.2",
-    "vite": "^3.1.0"
+    "vite": "^4.5.0",
+    "vitest": "^0.34.6"
   },
   "peerDependencies": {
     "@ant-design/icons": ">=4.7.0",

packages/cubejs-playground/src/__tests__/__snapshots__/cube-graphql-converter.test.ts.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Cube GraphQL converter: {"measures":["Orders.count"],"dimensions":["Orders.status","Users.country","Orders.createdAt"],"order":[["Orders.count","desc"],["Orders.status","asc"],["Users.country","desc"]]} 1`] = `
+exports[`Cube GraphQL converter > {"measures":["Orders.count"],"dimensions":["Orders.status","Users.country","Orders.createdAt"],"order":[["Orders.count","desc"],["Orders.status","asc"],["Users.country","desc"]]} 1`] = `
 "query CubeQuery {
   cube {
     orders(orderBy: {count: desc, status: asc}) {
@@ -18,7 +18,7 @@ exports[`Cube GraphQL converter: {"measures":["Orders.count"],"dimensions":["Ord
 "
 `;
 
-exports[`Cube GraphQL converter: {"measures":["Orders.count"],"dimensions":["Orders.status","Users.country","Orders.createdAt"],"order":{"Orders.count":"desc","Orders.status":"asc","Users.country":"desc"}} 1`] = `
+exports[`Cube GraphQL converter > {"measures":["Orders.count"],"dimensions":["Orders.status","Users.country","Orders.createdAt"],"order":{"Orders.count":"desc","Orders.status":"asc","Users.country":"desc"}} 1`] = `
 "query CubeQuery {
   cube {
     orders(orderBy: {count: desc, status: asc}) {
@@ -36,7 +36,7 @@ exports[`Cube GraphQL converter: {"measures":["Orders.count"],"dimensions":["Ord
 "
 `;
 
-exports[`Cube GraphQL converter: {"measures":["Orders.count"],"dimensions":["Orders.status","Users.country","Orders.createdAt"]} 1`] = `
+exports[`Cube GraphQL converter > {"measures":["Orders.count"],"dimensions":["Orders.status","Users.country","Orders.createdAt"]} 1`] = `
 "query CubeQuery {
   cube {
     orders {
@@ -54,7 +54,7 @@ exports[`Cube GraphQL converter: {"measures":["Orders.count"],"dimensions":["Ord
 "
 `;
 
-exports[`Cube GraphQL converter: {"measures":["Orders.count"],"dimensions":["Orders.status","Users.country"],"filters":[{"member":"Orders.amount","operator":"equals","values":["5","10"]},{"or":[{"member":"Users.country","operator":"equals","values":["US"]},{"and":[{"member":"Orders.status","operator":"equals","values":["canceled","active"]},{"member":"Users.country","operator":"equals","values":["US"]}]}]}]} 1`] = `
+exports[`Cube GraphQL converter > {"measures":["Orders.count"],"dimensions":["Orders.status","Users.country"],"filters":[{"member":"Orders.amount","operator":"equals","values":["5","10"]},{"or":[{"member":"Users.country","operator":"equals","values":["US"]},{"and":[{"member":"Orders.status","operator":"equals","values":["canceled","active"]},{"member":"Users.country","operator":"equals","values":["US"]}]}]}]} 1`] = `
 "query CubeQuery {
   cube(
     where: {orders: {amount: {in: [5, 10]}}, OR: [{users: {country: {equals: \\"US\\"}}}, {AND: [{orders: {status: {in: [\\"canceled\\", \\"active\\"]}}}, {users: {country: {equals: \\"US\\"}}}]}]}
@@ -71,7 +71,7 @@ exports[`Cube GraphQL converter: {"measures":["Orders.count"],"dimensions":["Ord
 "
 `;
 
-exports[`Cube GraphQL converter: {"measures":["Orders.count"],"dimensions":["Orders.status","Users.country"],"filters":[{"member":"Users.country","operator":"equals","values":["US"]},{"member":"Orders.status","operator":"equals","values":["canceled","active"]}]} 1`] = `
+exports[`Cube GraphQL converter > {"measures":["Orders.count"],"dimensions":["Orders.status","Users.country"],"filters":[{"member":"Users.country","operator":"equals","values":["US"]},{"member":"Orders.status","operator":"equals","values":["canceled","active"]}]} 1`] = `
 "query CubeQuery {
   cube(
     where: {users: {country: {equals: \\"US\\"}}, orders: {status: {in: [\\"canceled\\", \\"active\\"]}}}
@@ -88,7 +88,7 @@ exports[`Cube GraphQL converter: {"measures":["Orders.count"],"dimensions":["Ord
 "
 `;
 
-exports[`Cube GraphQL converter: {"measures":["Orders.count"],"dimensions":["Orders.status","Users.country"],"filters":[{"member":"Users.country","operator":"equals","values":["US"]},{"member":"Users.country","operator":"equals","values":["Canada"]}]} 1`] = `
+exports[`Cube GraphQL converter > {"measures":["Orders.count"],"dimensions":["Orders.status","Users.country"],"filters":[{"member":"Users.country","operator":"equals","values":["US"]},{"member":"Users.country","operator":"equals","values":["Canada"]}]} 1`] = `
 "query CubeQuery {
   cube(
     where: {users: {AND: [{country: {equals: \\"US\\"}}, {country: {equals: \\"Canada\\"}}]}}
@@ -105,7 +105,7 @@ exports[`Cube GraphQL converter: {"measures":["Orders.count"],"dimensions":["Ord
 "
 `;
 
-exports[`Cube GraphQL converter: {"measures":["Orders.count"],"dimensions":["Orders.status"],"filters":[{"member":"Orders.status","operator":"equals","values":["canceled","active"]},{"or":[{"member":"Users.country","operator":"notSet"},{"member":"Users.country","operator":"equals","values":["US"]}]}]} 1`] = `
+exports[`Cube GraphQL converter > {"measures":["Orders.count"],"dimensions":["Orders.status"],"filters":[{"member":"Orders.status","operator":"equals","values":["canceled","active"]},{"or":[{"member":"Users.country","operator":"notSet"},{"member":"Users.country","operator":"equals","values":["US"]}]}]} 1`] = `
 "query CubeQuery {
   cube(
     where: {orders: {status: {in: [\\"canceled\\", \\"active\\"]}}, OR: [users: {OR: [{country: {set: false}}, {country: {equals: \\"US\\"}}]}]}
@@ -119,7 +119,7 @@ exports[`Cube GraphQL converter: {"measures":["Orders.count"],"dimensions":["Ord
 "
 `;
 
-exports[`Cube GraphQL converter: {"measures":["Orders.count"],"dimensions":["Orders.status"],"timeDimensions":[{"dimension":"Orders.createdAt","granularity":"day","dateRange":["2020-01-01","2021-01-01"]}]} 1`] = `
+exports[`Cube GraphQL converter > {"measures":["Orders.count"],"dimensions":["Orders.status"],"timeDimensions":[{"dimension":"Orders.createdAt","granularity":"day","dateRange":["2020-01-01","2021-01-01"]}]} 1`] = `
 "query CubeQuery {
   cube(where: {orders: {createdAt: {inDateRange: [\\"2020-01-01\\", \\"2021-01-01\\"]}}}) {
     orders {
@@ -134,7 +134,7 @@ exports[`Cube GraphQL converter: {"measures":["Orders.count"],"dimensions":["Ord
 "
 `;
 
-exports[`Cube GraphQL converter: {"measures":["Orders.count"],"dimensions":["Orders.status"],"timezone":"America/Los_Angeles","limit":100} 1`] = `
+exports[`Cube GraphQL converter > {"measures":["Orders.count"],"dimensions":["Orders.status"],"timezone":"America/Los_Angeles","limit":100} 1`] = `
 "query CubeQuery {
   cube(timezone: \\"America/Los_Angeles\\", limit: 100) {
     orders {
@@ -146,7 +146,7 @@ exports[`Cube GraphQL converter: {"measures":["Orders.count"],"dimensions":["Ord
 "
 `;
 
-exports[`Cube GraphQL converter: {"measures":["Orders.count"],"dimensions":["Orders.status"],"timezone":"America/Los_Angeles","limit":100} 2`] = `
+exports[`Cube GraphQL converter > {"measures":["Orders.count"],"dimensions":["Orders.status"],"timezone":"America/Los_Angeles","limit":100} 2`] = `
 "query CubeQuery {
   cube(timezone: \\"America/Los_Angeles\\", limit: 100) {
     orders {
@@ -158,7 +158,7 @@ exports[`Cube GraphQL converter: {"measures":["Orders.count"],"dimensions":["Ord
 "
 `;
 
-exports[`Cube GraphQL converter: {"measures":["Orders.count"],"timeDimensions":[{"dimension":"Orders.createdAt","granularity":"quarter"}],"order":[["Orders.count","asc"],["Users.country","asc"]],"dimensions":["Users.country","Orders.createdAt"]} 1`] = `
+exports[`Cube GraphQL converter > {"measures":["Orders.count"],"timeDimensions":[{"dimension":"Orders.createdAt","granularity":"quarter"}],"order":[["Orders.count","asc"],["Users.country","asc"]],"dimensions":["Users.country","Orders.createdAt"]} 1`] = `
 "query CubeQuery {
   cube {
     orders(orderBy: {count: asc}) {

packages/cubejs-playground/tsconfig.json

@@ -6,6 +6,7 @@
       "dom",
       "esnext"
     ],
+    "types": ["vitest/globals"],
     "declaration": true,
     "rootDir": "src",
     "outDir": "./lib",

packages/cubejs-playground/vite.config.ts

@@ -1,3 +1,4 @@
+/// <reference types="vitest" />
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
@@ -22,7 +23,6 @@ export default defineConfig(({ mode }) => ({
       },
     },
   },
-
   define:
     mode === 'development'
       ? {

packages/cubejs-playground/vitest.config.ts

@@ -0,0 +1,10 @@
+/// <reference types="vitest" />
+
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+  },
+})