Fix new test-library eslint errors

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()
     }
   )
 })

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()
   })
 })

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()
   })
 })