Fix linting issues

Author: afontcu

.eslintrc.js

@@ -8,5 +8,9 @@ module.exports = {
   rules: {
     'no-console': 'off',
     'import/no-unresolved': 'off',
+
+    'testing-library/no-dom-import': 'off',
+    'testing-library/prefer-screen-queries': 'off',
+    'testing-library/no-manual-cleanup': 'off',
   },
 }

src/__tests__/axios-mock.js

@@ -16,7 +16,7 @@ test('mocks an API call when load-greeting is clicked', async () => {
 
   expect(axiosMock.get).toHaveBeenCalledTimes(1)
   expect(axiosMock.get).toHaveBeenCalledWith('/greeting')
-  getByText('hello there')
+  expect(getByText('hello there')).toBeInTheDocument()
 
   // You can render component snapshots by using html(). However, bear in mind
   // that Snapshot Testing should not be treated as a replacement for regular

src/__tests__/debug.js

@@ -1,3 +1,4 @@
+/* eslint-disable testing-library/no-debug */
 import {render} from '@testing-library/vue'
 import HelloWorld from './components/HelloWorld'
 

src/__tests__/directive.js

@@ -8,13 +8,13 @@ import Directive from './components/Directive'
 test('Component with a custom directive', () => {
   // Do not forget to add the new custom directive to the render function as
   // the third parameter.
-  const {queryByText} = render(Directive, {}, vue =>
+  const {queryByText, getByText} = render(Directive, {}, vue =>
     vue.directive('uppercase', uppercaseDirective),
   )
 
   // Test that the text in lower case does not appear in the DOM
   expect(queryByText('example text')).not.toBeInTheDocument()
 
   // Test that the text in upper case does appear in the DOM thanks to the directive
-  expect(queryByText('EXAMPLE TEXT')).toBeInTheDocument()
+  expect(getByText('EXAMPLE TEXT')).toBeInTheDocument()
 })

src/__tests__/disappearance.js

@@ -6,7 +6,7 @@ test('waits for the data to be loaded', async () => {
   const {getByText, queryByText, queryByTestId} = render(Disappearance)
 
   // Assert initial state
-  getByText('Loading...')
+  expect(getByText('Loading...')).toBeInTheDocument()
   expect(queryByText(/Loaded this message/)).not.toBeInTheDocument()
 
   // Following line reads as follows:

src/__tests__/form.js

@@ -37,20 +37,20 @@ test('Review form submits', async () => {
   const initiallySelectedInput = getByLabelText('Awful')
   const ratingSelect = getByLabelText('Wonderful')
 
-  expect(initiallySelectedInput.checked).toBe(true)
-  expect(ratingSelect.checked).toBe(false)
+  expect(initiallySelectedInput).toBeChecked()
+  expect(ratingSelect).not.toBeChecked()
 
   await fireEvent.update(ratingSelect)
 
-  expect(ratingSelect.checked).toBe(true)
-  expect(initiallySelectedInput.checked).toBe(false)
+  expect(ratingSelect).toBeChecked()
+  expect(initiallySelectedInput).not.toBeChecked()
 
   // Get the Input element by its implicit ARIA role.
   const recommendInput = getByRole('checkbox')
 
-  expect(recommendInput.checked).toBe(false)
+  expect(recommendInput).not.toBeChecked()
   await fireEvent.update(recommendInput)
-  expect(recommendInput.checked).toBe(true)
+  expect(recommendInput).toBeChecked()
 
   // Make sure the submit button is enabled.
   expect(submitButton).toBeEnabled()

src/__tests__/functional.js

@@ -1,4 +1,5 @@
 import {render} from '@testing-library/vue'
+import '@testing-library/jest-dom'
 import FunctionalSFC from './components/FunctionalSFC'
 
 const Functional = {
@@ -11,11 +12,11 @@ const Functional = {
 test('renders functional component', () => {
   const {getByText} = render(Functional)
 
-  getByText('Hi!')
+  expect(getByText('Hi!')).toBeInTheDocument()
 })
 
 test('renders functional SFC component', () => {
   const {getByText} = render(FunctionalSFC)
 
-  getByText('Hi!')
+  expect(getByText('Hi!')).toBeInTheDocument()
 })

src/__tests__/slots.js

@@ -19,14 +19,14 @@ test('Card component', () => {
   })
 
   // The default slot should render the template above with the scoped prop "content".
-  getByText('Yay! Scoped content!')
+  expect(getByText('Yay! Scoped content!')).toBeInTheDocument()
 
   // Instead of the default slot's fallback content.
   expect(
     queryByText('Nothing used the Scoped content!'),
   ).not.toBeInTheDocument()
 
   // And the header and footer slots should be rendered with the given templates.
-  getByText('HEADER')
-  getByText('FOOTER')
+  expect(getByText('HEADER')).toBeInTheDocument()
+  expect(getByText('FOOTER')).toBeInTheDocument()
 })

src/__tests__/stopwatch.js

@@ -12,11 +12,11 @@ test('updates component state', async () => {
 
   // Assert initial state.
   expect(elapsedTime).toHaveTextContent('0ms')
-  getByText('Start')
+  expect(getByText('Start')).toBeInTheDocument()
 
   await fireEvent.click(startButton)
 
-  getByText('Stop')
+  expect(getByText('Stop')).toBeInTheDocument()
 
   // Wait for one tick of the event loop.
   await waitFor(() => {

src/__tests__/stubs.js

@@ -1,9 +1,10 @@
 import {render} from '@testing-library/vue'
+import '@testing-library/jest-dom'
 import Stubs from './components/Stubs'
 
 test('Form contains search button', () => {
   const {getByText} = render(Stubs, {
     stubs: ['FontAwesomeIcon'],
   })
-  getByText('Search now')
+  expect(getByText('Search now')).toBeInTheDocument()
 })

src/__tests__/vue-portal.js

@@ -21,7 +21,7 @@ test('portal', async () => {
   // wait until PortalVue has removed content from the source element
   // and moved it to the target one.
   await waitFor(() => {
-    expect(getByTestId('portal')).toBeEmpty()
+    expect(getByTestId('portal')).toBeEmptyDOMElement()
   })
 
   expect(getByTestId('target')).toHaveTextContent(

src/__tests__/vuetify.js

@@ -33,7 +33,7 @@ const renderWithVuetify = (component, options, callback) => {
 test('should set [data-app] attribute on outer most div', () => {
   const {container} = renderWithVuetify(VuetifyDemoComponent)
 
-  expect(container.getAttribute('data-app')).toEqual('true')
+  expect(container).toHaveAttribute('data-app', 'true')
 })
 
 test('renders a Vuetify-powered component', async () => {

src/__tests__/within.js

@@ -21,6 +21,7 @@ test('within() returns an object with all queries bound to the DOM node', () =>
   // within() returns queries bound to the provided DOM node, so the following
   // assertion passes. Notice how we are not using the getByText() function
   // provided by render(), but the one coming from within().
+  // eslint-disable-next-line testing-library/prefer-explicit-assert
   within(divNode).getByText('repeated text')
 
   // Here, proof that there's only one match for the specified text.

src/vue-testing-library.js

@@ -1,3 +1,4 @@
+/* eslint-disable testing-library/no-wait-for-empty-callback */
 import {createLocalVue, mount} from '@vue/test-utils'
 
 import {