feat: migrate suggestions/pretty-dom/helpers/role-helpers to ts

package.json

@@ -65,7 +65,8 @@
       "import/prefer-default-export": "off",
       "import/no-unassigned-import": "off",
       "import/no-useless-path-segments": "off",
-      "no-console": "off"
+      "no-console": "off",
+      "@typescript-eslint/no-non-null-assertion": "off"
     }
   },
   "eslintIgnore": [

src/__tests__/config.js → src/__tests__/config.ts

@@ -1,7 +1,8 @@
 import {configure, getConfig} from '../config'
+import {Config} from '../../types/config'
 
 describe('configuration API', () => {
-  let originalConfig
+  let originalConfig: Config
   beforeEach(() => {
     // Grab the existing configuration so we can restore
     // it at the end of the test
@@ -15,10 +16,6 @@ describe('configuration API', () => {
     configure(originalConfig)
   })
 
-  beforeEach(() => {
-    configure({other: 123})
-  })
-
   describe('getConfig', () => {
     test('returns existing configuration', () => {
       const conf = getConfig()

src/__tests__/helpers.js → src/__tests__/helpers.ts

@@ -16,12 +16,14 @@ test('returns global document if exists', () => {
 describe('window retrieval throws when given something other than a node', () => {
   test('Promise as node', () => {
     expect(() =>
+      // @ts-expect-error using a promise will trhow a specific error
       getWindowFromNode(new Promise(jest.fn())),
     ).toThrowErrorMatchingInlineSnapshot(
       `"It looks like you passed a Promise object instead of a DOM node. Did you do something like \`fireEvent.click(screen.findBy...\` when you meant to use a \`getBy\` query \`fireEvent.click(screen.getBy...\`, or await the findBy query \`fireEvent.click(await screen.findBy...\`?"`,
     )
   })
   test('unknown as node', () => {
+    // @ts-expect-error using an object will throw a specific error
     expect(() => getWindowFromNode({})).toThrowErrorMatchingInlineSnapshot(
       `"Unable to find the \\"window\\" object for the given node. Please file an issue with the code that's causing you to see this error: https://github.com/testing-library/dom-testing-library/issues/new"`,
     )
@@ -37,16 +39,19 @@ describe('query container validation throws when validation fails', () => {
     )
   })
   test('null as container', () => {
+    // @ts-expect-error passing a wrong container will throw an error
     expect(() => checkContainerType(null)).toThrowErrorMatchingInlineSnapshot(
       `"Expected container to be an Element, a Document or a DocumentFragment but got null."`,
     )
   })
   test('array as container', () => {
+    // @ts-expect-error passing a wrong container will throw an error
     expect(() => checkContainerType([])).toThrowErrorMatchingInlineSnapshot(
       `"Expected container to be an Element, a Document or a DocumentFragment but got Array."`,
     )
   })
   test('object as container', () => {
+    // @ts-expect-error passing a wrong container will throw an error
     expect(() => checkContainerType({})).toThrowErrorMatchingInlineSnapshot(
       `"Expected container to be an Element, a Document or a DocumentFragment but got Object."`,
     )
@@ -61,7 +66,9 @@ test('should always use realTimers before using callback when timers are faked w
   runWithRealTimers(() => {
     expect(originalSetTimeout).toEqual(globalObj.setTimeout)
   })
+  // @ts-expect-error if we are using logacy timers
   expect(globalObj.setTimeout._isMockFunction).toBe(true)
+  // @ts-expect-error if we are using logacy timers
   expect(globalObj.setTimeout.clock).toBeUndefined()
 
   jest.useRealTimers()
@@ -71,19 +78,22 @@ test('should always use realTimers before using callback when timers are faked w
   runWithRealTimers(() => {
     expect(originalSetTimeout).toEqual(globalObj.setTimeout)
   })
+  // @ts-expect-error if we are using modern timers
   expect(globalObj.setTimeout._isMockFunction).toBeUndefined()
+  // @ts-expect-error if we are using modern timers
   expect(globalObj.setTimeout.clock).toBeDefined()
 })
 
 test('should not use realTimers when timers are not faked with useFakeTimers', () => {
   const originalSetTimeout = globalObj.setTimeout
 
   // useFakeTimers is not used, timers are faked in some other way
-  const fakedSetTimeout = callback => {
+  const fakedSetTimeout = (callback: () => void) => {
     callback()
   }
   fakedSetTimeout.clock = jest.fn()
 
+  //@ts-expect-error override the default setTimeout with a fake timer
   globalObj.setTimeout = fakedSetTimeout
 
   runWithRealTimers(() => {

src/__tests__/matches.js → src/__tests__/matches.ts

@@ -3,7 +3,7 @@ import {fuzzyMatches, matches} from '../matches'
 // unit tests for text match utils
 
 const node = null
-const normalizer = str => str
+const normalizer = (text: string) => text
 
 test('matchers accept strings', () => {
   expect(matches('ABC', node, 'ABC', normalizer)).toBe(true)
@@ -39,3 +39,8 @@ test('matchers throw on invalid matcher inputs', () => {
     `"It looks like undefined was passed instead of a matcher. Did you do something like getByText(undefined)?"`,
   )
 })
+
+test('should use matchers with numbers', () => {
+  expect(matches('1234', node, 1234, normalizer)).toBe(true)
+  expect(fuzzyMatches('test1234', node, 1234, normalizer)).toBe(true)
+})

src/__tests__/pretty-dom.js → src/__tests__/pretty-dom.ts

@@ -9,7 +9,7 @@ beforeEach(() => {
 })
 
 afterEach(() => {
-  console.log.mockRestore()
+  ;(console.log as jest.Mock).mockRestore()
 })
 
 test('prettyDOM prints out the given DOM element tree', () => {
@@ -38,6 +38,7 @@ test('prettyDOM defaults to document.body', () => {
 `
   renderIntoDocument('<div>Hello World!</div>')
   expect(prettyDOM()).toMatchInlineSnapshot(defaultInlineSnapshot)
+  //@ts-expect-error js check, should print the document.body
   expect(prettyDOM(null)).toMatchInlineSnapshot(defaultInlineSnapshot)
 })
 
@@ -54,7 +55,8 @@ test('logDOM logs prettyDOM to the console', () => {
   const {container} = render('<div>Hello World!</div>')
   logDOM(container)
   expect(console.log).toHaveBeenCalledTimes(1)
-  expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(`
+  expect(((console.log as jest.Mock).mock.calls[0] as string[])[0])
+    .toMatchInlineSnapshot(`
     "<div>
       <div>
         Hello World!
@@ -64,7 +66,7 @@ test('logDOM logs prettyDOM to the console', () => {
 })
 
 test('logDOM logs prettyDOM with code frame to the console', () => {
-  getUserCodeFrame.mockImplementationOnce(
+  ;(getUserCodeFrame as jest.Mock).mockImplementationOnce(
     () => `"/home/john/projects/sample-error/error-example.js:7:14
       5 |         document.createTextNode('Hello World!')
       6 |       )
@@ -76,7 +78,8 @@ test('logDOM logs prettyDOM with code frame to the console', () => {
   const {container} = render('<div>Hello World!</div>')
   logDOM(container)
   expect(console.log).toHaveBeenCalledTimes(1)
-  expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(`
+  expect(((console.log as jest.Mock).mock.calls[0] as string[])[0])
+    .toMatchInlineSnapshot(`
     "<div>
       <div>
         Hello World!
@@ -95,16 +98,19 @@ test('logDOM logs prettyDOM with code frame to the console', () => {
 
 describe('prettyDOM fails with first parameter without outerHTML field', () => {
   test('with array', () => {
+    // @ts-expect-error use an array as arg
     expect(() => prettyDOM(['outerHTML'])).toThrowErrorMatchingInlineSnapshot(
       `"Expected an element or document but got Array"`,
     )
   })
   test('with number', () => {
+    // @ts-expect-error use a number as arg
     expect(() => prettyDOM(1)).toThrowErrorMatchingInlineSnapshot(
       `"Expected an element or document but got number"`,
     )
   })
   test('with object', () => {
+    // @ts-expect-error use an object as arg
     expect(() => prettyDOM({})).toThrowErrorMatchingInlineSnapshot(
       `"Expected an element or document but got Object"`,
     )