build(ui): migrate from CRA/Jest to Vite/Vitest (#3311)

* feat: create vite project

* feat: it's alive!

* feat: `make dev` working!

* feat: replace custom serviceWorker with vite plugin

* test: replace Jest with Vitest

* fix: run prettier

* fix: skip eslint for now.

* chore: remove ui.old folder

* refactor: replace lodash.pick with simple destructuring

* fix: eslint errors (wip)

* fix: eslint errors (wip)

* fix: display-name eslint errors (wip)

* fix: no-console eslint errors (wip)

* fix: react-refresh/only-export-components eslint errors (wip)

* fix: react-refresh/only-export-components eslint errors (wip)

* fix: react-refresh/only-export-components eslint errors (wip)

* fix: react-refresh/only-export-components eslint errors (wip)

* fix: build

* fix: pwa manifest

* refactor: pwa manifest

* refactor: simplify PORT configuration

* refactor: rename simple JS files

* test: cover playlistUtils

* fix: react-image-lightbox

* feat(ui): add sourcemaps to help debug issues

ui/src/dialogs/AddToPlaylistDialog.jsx

@@ -86,8 +86,7 @@ export const AddToPlaylistDialog = () => {
         }
         setCheck(true)
       })
-      .catch((error) => {
-        console.error(error)
+      .catch(() => {
         notify('ra.page.error', 'warning')
       })
   }

ui/src/dialogs/AddToPlaylistDialog.test.jsx

@@ -9,6 +9,7 @@ import {
   screen,
 } from '@testing-library/react'
 import { AddToPlaylistDialog } from './AddToPlaylistDialog'
+import { describe, beforeAll, afterEach, it, expect, vi } from 'vitest'
 
 const mockData = [
   { id: 'sample-id1', name: 'sample playlist 1', ownerId: 'admin' },
@@ -62,9 +63,9 @@ const createTestUtils = (mockDataProvider) =>
     </DataProviderContext.Provider>,
   )
 
-jest.mock('../dataProvider', () => ({
-  ...jest.requireActual('../dataProvider'),
-  httpClient: jest.fn(),
+vi.mock('../dataProvider', () => ({
+  ...vi.importActual('../dataProvider'),
+  httpClient: vi.fn(),
 }))
 
 describe('AddToPlaylistDialog', () => {
@@ -72,15 +73,15 @@ describe('AddToPlaylistDialog', () => {
   afterEach(cleanup)
 
   it('adds distinct songs to already existing playlists', async () => {
-    const dataProvider = require('../dataProvider')
-    jest.spyOn(dataProvider, 'httpClient').mockResolvedValue({ data: mockData })
+    const dataProvider = await import('../dataProvider')
+    vi.spyOn(dataProvider, 'httpClient').mockResolvedValue({ data: mockData })
 
     const mockDataProvider = {
-      getList: jest
+      getList: vi
         .fn()
         .mockResolvedValue({ data: mockData, total: mockData.length }),
-      getOne: jest.fn().mockResolvedValue({ data: { id: 'song-3' }, total: 1 }),
-      create: jest.fn().mockResolvedValue({
+      getOne: vi.fn().mockResolvedValue({ data: { id: 'song-3' }, total: 1 }),
+      create: vi.fn().mockResolvedValue({
         data: { id: 'created-id', name: 'created-name' },
       }),
     }
@@ -121,11 +122,11 @@ describe('AddToPlaylistDialog', () => {
 
   it('adds distinct songs to a new playlist', async () => {
     const mockDataProvider = {
-      getList: jest
+      getList: vi
         .fn()
         .mockResolvedValue({ data: mockData, total: mockData.length }),
-      getOne: jest.fn().mockResolvedValue({ data: { id: 'song-3' }, total: 1 }),
-      create: jest.fn().mockResolvedValue({
+      getOne: vi.fn().mockResolvedValue({ data: { id: 'song-3' }, total: 1 }),
+      create: vi.fn().mockResolvedValue({
         data: { id: 'created-id1', name: 'created-name' },
       }),
     }
@@ -159,11 +160,11 @@ describe('AddToPlaylistDialog', () => {
 
   it('adds distinct songs to multiple new playlists', async () => {
     const mockDataProvider = {
-      getList: jest
+      getList: vi
         .fn()
         .mockResolvedValue({ data: mockData, total: mockData.length }),
-      getOne: jest.fn().mockResolvedValue({ data: { id: 'song-3' }, total: 1 }),
-      create: jest.fn().mockResolvedValue({
+      getOne: vi.fn().mockResolvedValue({ data: { id: 'song-3' }, total: 1 }),
+      create: vi.fn().mockResolvedValue({
         data: { id: 'created-id1', name: 'created-name' },
       }),
     }

ui/src/dialogs/SelectPlaylistInput.test.jsx

@@ -9,11 +9,12 @@ import {
   waitFor,
 } from '@testing-library/react'
 import { SelectPlaylistInput } from './SelectPlaylistInput'
+import { describe, beforeAll, afterEach, it, expect, vi } from 'vitest'
 
 describe('SelectPlaylistInput', () => {
   beforeAll(() => localStorage.setItem('userId', 'admin'))
   afterEach(cleanup)
-  const onChangeHandler = jest.fn()
+  const onChangeHandler = vi.fn()
 
   it('should call the handler with the selections', async () => {
     const mockData = [
@@ -34,7 +35,7 @@ describe('SelectPlaylistInput', () => {
     }
 
     const mockDataProvider = {
-      getList: jest
+      getList: vi
         .fn()
         .mockResolvedValue({ data: mockData, total: mockData.length }),
     }

ui/src/dialogs/useTranscodingOptions.jsx

@@ -45,7 +45,7 @@ export const useTranscodingOptions = () => {
   )
 
   const TranscodingOptionsInput = useMemo(() => {
-    return ({ label, basePath, ...props }) => {
+    const Component = ({ label, basePath, ...props }) => {
       return (
         <>
           <BooleanInput
@@ -83,6 +83,9 @@ export const useTranscodingOptions = () => {
         </>
       )
     }
+
+    Component.displayName = 'TranscodingOptionsInput'
+    return Component
   }, [
     handleOriginal,
     formatOptions,