diff --git a/ui/src/common/MultiLineTextField.test.js b/ui/src/common/MultiLineTextField.test.js
index c8833705..44dede43 100644
--- a/ui/src/common/MultiLineTextField.test.js
+++ b/ui/src/common/MultiLineTextField.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { render, cleanup } from '@testing-library/react'
+import { render, cleanup, screen } from '@testing-library/react'
 import { MultiLineTextField } from './MultiLineTextField'
 
 describe('<MultiLineTextField />', () => {
@@ -7,24 +7,22 @@ describe('<MultiLineTextField />', () => {
 
   it('should render each line in a separated div', () => {
     const record = { comment: 'line1\nline2' }
-    const { queryByTestId } = render(
-      <MultiLineTextField record={record} source={'comment'} />
-    )
-    expect(queryByTestId('comment.0').textContent).toBe('line1')
-    expect(queryByTestId('comment.1').textContent).toBe('line2')
+    render(<MultiLineTextField record={record} source={'comment'} />)
+    expect(screen.queryByTestId('comment.0').textContent).toBe('line1')
+    expect(screen.queryByTestId('comment.1').textContent).toBe('line2')
   })
 
   it.each([null, undefined])(
     'should render the emptyText when value is %s',
     (body) => {
-      const { queryByText } = render(
+      render(
         <MultiLineTextField
           record={{ id: 123, body }}
           emptyText="NA"
           source="body"
         />
       )
-      expect(queryByText('NA')).not.toBeNull()
+      expect(screen.getByText('NA')).toBeInTheDocument()
     }
   )
 })
diff --git a/ui/src/common/QualityInfo.test.js b/ui/src/common/QualityInfo.test.js
index aec3a3bc..735fe70b 100644
--- a/ui/src/common/QualityInfo.test.js
+++ b/ui/src/common/QualityInfo.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cleanup, render } from '@testing-library/react'
+import { cleanup, render, screen } from '@testing-library/react'
 import { QualityInfo } from './QualityInfo'
 
 describe('<QualityInfo />', () => {
@@ -7,21 +7,21 @@ describe('<QualityInfo />', () => {
 
   it('only render suffix for lossless formats', () => {
     const info = { suffix: 'FLAC', bitRate: 1008 }
-    const { queryByText } = render(<QualityInfo record={info} />)
-    expect(queryByText('FLAC')).not.toBeNull()
+    render(<QualityInfo record={info} />)
+    expect(screen.getByText('FLAC')).toBeInTheDocument()
   })
   it('only render suffix and bitrate for lossy formats', () => {
     const info = { suffix: 'MP3', bitRate: 320 }
-    const { queryByText } = render(<QualityInfo record={info} />)
-    expect(queryByText('MP3 320')).not.toBeNull()
+    render(<QualityInfo record={info} />)
+    expect(screen.getByText('MP3 320')).toBeInTheDocument()
   })
   it('renders placeholder if suffix is missing', () => {
     const info = {}
-    const { queryByText } = render(<QualityInfo record={info} />)
-    expect(queryByText('N/A')).not.toBeNull()
+    render(<QualityInfo record={info} />)
+    expect(screen.getByText('N/A')).toBeInTheDocument()
   })
   it('does not break if record is null', () => {
-    const { queryByText } = render(<QualityInfo />)
-    expect(queryByText('N/A')).not.toBeNull()
+    render(<QualityInfo />)
+    expect(screen.getByText('N/A')).toBeInTheDocument()
   })
 })
diff --git a/ui/src/common/QuickFilter.test.js b/ui/src/common/QuickFilter.test.js
index aad70311..56426af9 100644
--- a/ui/src/common/QuickFilter.test.js
+++ b/ui/src/common/QuickFilter.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cleanup, render } from '@testing-library/react'
+import { cleanup, render, screen } from '@testing-library/react'
 import { QuickFilter } from './QuickFilter'
 import StarIcon from '@material-ui/icons/Star'
 
@@ -7,27 +7,23 @@ describe('QuickFilter', () => {
   afterEach(cleanup)
 
   it('renders label if provided', () => {
-    const { getByText } = render(
-      <QuickFilter resource={'song'} source={'name'} label={'MyLabel'} />
-    )
-    expect(getByText('MyLabel')).not.toBeNull()
+    render(<QuickFilter resource={'song'} source={'name'} label={'MyLabel'} />)
+    expect(screen.getByText('MyLabel')).not.toBeNull()
   })
 
   it('renders resource translation if label is not provided', () => {
-    const { getByText } = render(
-      <QuickFilter resource={'song'} source={'name'} />
-    )
-    expect(getByText('resources.song.fields.name')).not.toBeNull()
+    render(<QuickFilter resource={'song'} source={'name'} />)
+    expect(screen.getByText('resources.song.fields.name')).not.toBeNull()
   })
 
   it('renders a component label', () => {
-    const { getByTestId } = render(
+    render(
       <QuickFilter
         resource={'song'}
         source={'name'}
         label={<StarIcon data-testid="label-icon-test" />}
       />
     )
-    expect(getByTestId('label-icon-test')).not.toBeNull()
+    expect(screen.getByTestId('label-icon-test')).not.toBeNull()
   })
 })
diff --git a/ui/src/dialogs/AboutDialog.test.js b/ui/src/dialogs/AboutDialog.test.js
index e3f8d3a8..389034fe 100644
--- a/ui/src/dialogs/AboutDialog.test.js
+++ b/ui/src/dialogs/AboutDialog.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cleanup, render } from '@testing-library/react'
+import { cleanup, render, screen } from '@testing-library/react'
 import { LinkToVersion } from './AboutDialog'
 import TableBody from '@material-ui/core/TableBody'
 import TableRow from '@material-ui/core/TableRow'
@@ -20,35 +20,35 @@ describe('<LinkToVersion />', () => {
 
   it('should not render any link for "dev" version', () => {
     const version = 'dev'
-    const { queryByRole } = render(<Wrapper version={version} />)
-    expect(queryByRole('link')).toBeNull()
+    render(<Wrapper version={version} />)
+    expect(screen.queryByRole('link')).toBeNull()
   })
 
   it('should render link to GH tag page for full releases', () => {
     const version = '0.40.0 (300a0292)'
-    const { queryByRole } = render(<Wrapper version={version} />)
+    render(<Wrapper version={version} />)
 
-    const link = queryByRole('link')
+    const link = screen.queryByRole('link')
     expect(link.href).toBe(
       'https://github.com/navidrome/navidrome/releases/tag/v0.40.0'
     )
     expect(link.textContent).toBe('0.40.0')
 
-    const cell = queryByRole('cell')
+    const cell = screen.queryByRole('cell')
     expect(cell.textContent).toBe('0.40.0 (300a0292)')
   })
 
   it('should render link to GH comparison page for snapshot releases', () => {
     const version = '0.40.0-SNAPSHOT (300a0292)'
-    const { queryByRole } = render(<Wrapper version={version} />)
+    render(<Wrapper version={version} />)
 
-    const link = queryByRole('link')
+    const link = screen.queryByRole('link')
     expect(link.href).toBe(
       'https://github.com/navidrome/navidrome/compare/v0.40.0...300a0292'
     )
     expect(link.textContent).toBe('0.40.0-SNAPSHOT')
 
-    const cell = queryByRole('cell')
+    const cell = screen.queryByRole('cell')
     expect(cell.textContent).toBe('0.40.0-SNAPSHOT (300a0292)')
   })
 })
diff --git a/ui/src/dialogs/AddToPlaylistDialog.test.js b/ui/src/dialogs/AddToPlaylistDialog.test.js
index 7a1fe515..5f433dfc 100644
--- a/ui/src/dialogs/AddToPlaylistDialog.test.js
+++ b/ui/src/dialogs/AddToPlaylistDialog.test.js
@@ -1,7 +1,13 @@
 import * as React from 'react'
 import { TestContext } from 'ra-test'
 import { DataProviderContext } from 'react-admin'
-import { cleanup, fireEvent, render, waitFor } from '@testing-library/react'
+import {
+  cleanup,
+  fireEvent,
+  render,
+  waitFor,
+  screen,
+} from '@testing-library/react'
 import { AddToPlaylistDialog } from './AddToPlaylistDialog'
 
 const mockData = [
@@ -71,17 +77,18 @@ describe('AddToPlaylistDialog', () => {
       }),
     }
 
-    const testUtils = createTestUtils(mockDataProvider)
+    createTestUtils(mockDataProvider)
 
-    fireEvent.change(document.activeElement, { target: { value: 'sample' } })
-    fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
-    fireEvent.keyDown(document.activeElement, { key: 'Enter' })
-    fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
-    fireEvent.keyDown(document.activeElement, { key: 'Enter' })
+    let textBox = screen.getByRole('textbox')
+    fireEvent.change(textBox, { target: { value: 'sample' } })
+    fireEvent.keyDown(textBox, { key: 'ArrowDown' })
+    fireEvent.keyDown(textBox, { key: 'Enter' })
+    fireEvent.keyDown(textBox, { key: 'ArrowDown' })
+    fireEvent.keyDown(textBox, { key: 'Enter' })
     await waitFor(() => {
-      expect(testUtils.getByTestId('playlist-add')).not.toBeDisabled()
+      expect(screen.getByTestId('playlist-add')).not.toBeDisabled()
     })
-    fireEvent.click(testUtils.getByTestId('playlist-add'))
+    fireEvent.click(screen.getByTestId('playlist-add'))
     await waitFor(() => {
       expect(mockDataProvider.create).toHaveBeenNthCalledWith(
         1,
@@ -115,30 +122,31 @@ describe('AddToPlaylistDialog', () => {
       }),
     }
 
-    const testUtils = createTestUtils(mockDataProvider)
+    createTestUtils(mockDataProvider)
 
-    fireEvent.change(document.activeElement, { target: { value: 'sample' } })
-    fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
-    fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
-    fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
-    fireEvent.keyDown(document.activeElement, { key: 'Enter' })
+    let textBox = screen.getByRole('textbox')
+    fireEvent.change(textBox, { target: { value: 'sample' } })
+    fireEvent.keyDown(textBox, { key: 'ArrowDown' })
+    fireEvent.keyDown(textBox, { key: 'ArrowDown' })
+    fireEvent.keyDown(textBox, { key: 'ArrowDown' })
+    fireEvent.keyDown(textBox, { key: 'Enter' })
     await waitFor(() => {
-      expect(testUtils.getByTestId('playlist-add')).not.toBeDisabled()
+      expect(screen.getByTestId('playlist-add')).not.toBeDisabled()
     })
-    fireEvent.click(testUtils.getByTestId('playlist-add'))
+    fireEvent.click(screen.getByTestId('playlist-add'))
     await waitFor(() => {
       expect(mockDataProvider.create).toHaveBeenNthCalledWith(1, 'playlist', {
         data: { name: 'sample' },
       })
-      expect(mockDataProvider.create).toHaveBeenNthCalledWith(
-        2,
-        'playlistTrack',
-        {
-          data: { ids: selectedIds },
-          filter: { playlist_id: 'created-id1' },
-        }
-      )
     })
+    expect(mockDataProvider.create).toHaveBeenNthCalledWith(
+      2,
+      'playlistTrack',
+      {
+        data: { ids: selectedIds },
+        filter: { playlist_id: 'created-id1' },
+      }
+    )
   })
 
   it('adds distinct songs to multiple new playlists', async () => {
@@ -152,21 +160,20 @@ describe('AddToPlaylistDialog', () => {
       }),
     }
 
-    const testUtils = createTestUtils(mockDataProvider)
+    createTestUtils(mockDataProvider)
 
-    fireEvent.change(document.activeElement, { target: { value: 'sample' } })
-    fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
-    fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
-    fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
-    fireEvent.keyDown(document.activeElement, { key: 'Enter' })
-    fireEvent.change(document.activeElement, {
-      target: { value: 'new playlist' },
-    })
-    fireEvent.keyDown(document.activeElement, { key: 'Enter' })
+    let textBox = screen.getByRole('textbox')
+    fireEvent.change(textBox, { target: { value: 'sample' } })
+    fireEvent.keyDown(textBox, { key: 'ArrowDown' })
+    fireEvent.keyDown(textBox, { key: 'ArrowDown' })
+    fireEvent.keyDown(textBox, { key: 'ArrowDown' })
+    fireEvent.keyDown(textBox, { key: 'Enter' })
+    fireEvent.change(textBox, { target: { value: 'new playlist' } })
+    fireEvent.keyDown(textBox, { key: 'Enter' })
     await waitFor(() => {
-      expect(testUtils.getByTestId('playlist-add')).not.toBeDisabled()
+      expect(screen.getByTestId('playlist-add')).not.toBeDisabled()
     })
-    fireEvent.click(testUtils.getByTestId('playlist-add'))
+    fireEvent.click(screen.getByTestId('playlist-add'))
     await waitFor(() => {
       expect(mockDataProvider.create).toHaveBeenCalledTimes(4)
     })
diff --git a/ui/src/dialogs/SelectPlaylistInput.test.js b/ui/src/dialogs/SelectPlaylistInput.test.js
index f3485594..544e0260 100644
--- a/ui/src/dialogs/SelectPlaylistInput.test.js
+++ b/ui/src/dialogs/SelectPlaylistInput.test.js
@@ -1,7 +1,13 @@
 import * as React from 'react'
 import { TestContext } from 'ra-test'
 import { DataProviderContext } from 'react-admin'
-import { cleanup, fireEvent, render, waitFor } from '@testing-library/react'
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react'
 import { SelectPlaylistInput } from './SelectPlaylistInput'
 
 describe('SelectPlaylistInput', () => {
@@ -70,17 +76,18 @@ describe('SelectPlaylistInput', () => {
       })
     })
 
-    fireEvent.change(document.activeElement, { target: { value: 'sample' } })
-    fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
-    fireEvent.keyDown(document.activeElement, { key: 'Enter' })
+    let textBox = screen.getByRole('textbox')
+    fireEvent.change(textBox, { target: { value: 'sample' } })
+    fireEvent.keyDown(textBox, { key: 'ArrowDown' })
+    fireEvent.keyDown(textBox, { key: 'Enter' })
     await waitFor(() => {
       expect(onChangeHandler).toHaveBeenCalledWith([
         { id: 'sample-id1', name: 'sample playlist 1', ownerId: 'admin' },
       ])
     })
 
-    fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
-    fireEvent.keyDown(document.activeElement, { key: 'Enter' })
+    fireEvent.keyDown(textBox, { key: 'ArrowDown' })
+    fireEvent.keyDown(textBox, { key: 'Enter' })
     await waitFor(() => {
       expect(onChangeHandler).toHaveBeenCalledWith([
         { id: 'sample-id1', name: 'sample playlist 1', ownerId: 'admin' },
@@ -88,11 +95,11 @@ describe('SelectPlaylistInput', () => {
       ])
     })
 
-    fireEvent.change(document.activeElement, {
+    fireEvent.change(textBox, {
       target: { value: 'new playlist' },
     })
-    fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' })
-    fireEvent.keyDown(document.activeElement, { key: 'Enter' })
+    fireEvent.keyDown(textBox, { key: 'ArrowDown' })
+    fireEvent.keyDown(textBox, { key: 'Enter' })
     await waitFor(() => {
       expect(onChangeHandler).toHaveBeenCalledWith([
         { id: 'sample-id1', name: 'sample playlist 1', ownerId: 'admin' },
@@ -101,10 +108,10 @@ describe('SelectPlaylistInput', () => {
       ])
     })
 
-    fireEvent.change(document.activeElement, {
+    fireEvent.change(textBox, {
       target: { value: 'another new playlist' },
     })
-    fireEvent.keyDown(document.activeElement, { key: 'Enter' })
+    fireEvent.keyDown(textBox, { key: 'Enter' })
     await waitFor(() => {
       expect(onChangeHandler).toHaveBeenCalledWith([
         { id: 'sample-id1', name: 'sample playlist 1', ownerId: 'admin' },
diff --git a/ui/src/layout/DynamicMenuIcon.test.js b/ui/src/layout/DynamicMenuIcon.test.js
index d134120f..3d8e238f 100644
--- a/ui/src/layout/DynamicMenuIcon.test.js
+++ b/ui/src/layout/DynamicMenuIcon.test.js
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cleanup, render } from '@testing-library/react'
+import { cleanup, render, screen } from '@testing-library/react'
 import { createMemoryHistory } from 'history'
 import { Router } from 'react-router-dom'
 import StarIcon from '@material-ui/icons/Star'
@@ -14,12 +14,12 @@ describe('<DynamicMenuIcon />', () => {
     const route = '/test'
     history.push(route)
 
-    const { getByTestId } = render(
+    render(
       <Router history={history}>
         <DynamicMenuIcon icon={StarIcon} path={'test'} />
       </Router>
     )
-    expect(getByTestId('icon')).not.toBeNull()
+    expect(screen.getByTestId('icon')).not.toBeNull()
   })
 
   it('renders icon if path does not match the URL', () => {
@@ -27,7 +27,7 @@ describe('<DynamicMenuIcon />', () => {
     const route = '/path'
     history.push(route)
 
-    const { getByTestId } = render(
+    render(
       <Router history={history}>
         <DynamicMenuIcon
           icon={StarIcon}
@@ -36,7 +36,7 @@ describe('<DynamicMenuIcon />', () => {
         />
       </Router>
     )
-    expect(getByTestId('icon')).not.toBeNull()
+    expect(screen.getByTestId('icon')).not.toBeNull()
   })
 
   it('renders activeIcon if path matches the URL', () => {
@@ -44,7 +44,7 @@ describe('<DynamicMenuIcon />', () => {
     const route = '/path'
     history.push(route)
 
-    const { getByTestId } = render(
+    render(
       <Router history={history}>
         <DynamicMenuIcon
           icon={StarIcon}
@@ -53,6 +53,6 @@ describe('<DynamicMenuIcon />', () => {
         />
       </Router>
     )
-    expect(getByTestId('activeIcon')).not.toBeNull()
+    expect(screen.getByTestId('activeIcon')).not.toBeNull()
   })
 })