(refactor/types): rewrite tests in TypeScript

- not much to change except for some code to cast things to correct
  types

- remove file extensions from TS imports as TS errors on them
- configure .ts for ts-jest, and remove testMatch as we only have
  .spec.tsx? extensions now

- leave out test/config/ set-up files as I'd like to split those out
  into separate packages anyway and their types aren't really necessary
  for test correctness

(deps): add @types/enzyme for more explicit typings of tests

Author: agilgur5

jest.config.js

@@ -10,10 +10,8 @@ module.exports = {
   transform: {
     // support babel-jest. TSDX defaults to just ts-jest. see https://github.com/jaredpalmer/tsdx/pull/486
     '\\.js$': 'babel-jest',
-    '\\.tsx$': 'ts-jest'
+    '\\.tsx?$': 'ts-jest'
   },
-  // support JS + JSX. TSDX defaults to just TS + TSX. see https://github.com/jaredpalmer/tsdx/pull/486
-  testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'],
   coveragePathIgnorePatterns: [
     '/node_modules/', // default
     '<rootDir>/test/' // ignore any test helper files

package-lock.json

@@ -63,6 +63,7 @@
     "@agilgur5/changelog-maker": "^3.0.0",
     "@babel/core": "^7.8.4",
     "@babel/preset-react": "^7.8.3",
+    "@types/enzyme": "^3.10.4",
     "@types/prop-types": "^15.7.3",
     "@types/react": "^17.0.44",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",

package.json

@@ -1,3 +1,5 @@
+import SignaturePad from 'signature_pad'
+
 // signature_pad options
 const sigPadOptions = {
   velocityFilterWeight: 0.8,
@@ -21,7 +23,7 @@ export const propsF = { sigPadOptions, all: props }
 
 const dotData = [
   [{ x: 466.59375, y: 189, time: 1564339579755, color: 'black' }]
-]
+] as SignaturePad.Point[][]
 const canvasProps = { width: 1011, height: 326 }
 const trimmedSize = { width: 4, height: 4 }
 export const dotF = { data: dotData, canvasProps, trimmedSize }

test/fixtures.js renamed to test/fixtures.ts

@@ -1,25 +1,29 @@
 import { jest, describe, it, test, expect } from 'jest-without-globals'
-import { mount } from 'enzyme'
+import { mount, CommonWrapper } from 'enzyme'
 import React from 'react'
 
-import SignatureCanvas from '../src/index.tsx'
-import { propsF, dotF } from './fixtures.js'
+import SignatureCanvas from '../src/index'
+import { propsF, dotF } from './fixtures'
+
+function rSCInstance (wrapper: CommonWrapper): SignatureCanvas {
+  return wrapper.instance() as SignatureCanvas
+}
 
 test('mounts canvas and instance properly', () => {
   const wrapper = mount(<SignatureCanvas />)
   expect(wrapper.exists('canvas')).toBe(true)
-  const instance = wrapper.instance()
+  const instance = rSCInstance(wrapper)
   expect(instance.isEmpty()).toBe(true)
 })
 
 describe('setting and updating props', () => {
   it('should set default props', () => {
-    const instance = mount(<SignatureCanvas />).instance()
+    const instance = rSCInstance(mount(<SignatureCanvas />))
     expect(instance.props).toStrictEqual(SignatureCanvas.defaultProps)
   })
 
   it('should set initial mount props and SigPad options', () => {
-    const instance = mount(<SignatureCanvas {...propsF.all} />).instance()
+    const instance = rSCInstance(mount(<SignatureCanvas {...propsF.all} />))
     const sigPad = instance.getSignaturePad()
 
     expect(instance.props).toMatchObject(propsF.all)
@@ -28,7 +32,7 @@ describe('setting and updating props', () => {
 
   it('should update props and SigPad options', () => {
     const wrapper = mount(<SignatureCanvas />)
-    const instance = wrapper.instance()
+    const instance = rSCInstance(wrapper)
     const sigPad = instance.getSignaturePad()
 
     // default props and options should not match new ones
@@ -43,7 +47,7 @@ describe('setting and updating props', () => {
 })
 
 describe('SigCanvas wrapper methods return equivalent to SigPad', () => {
-  const rSigPad = mount(<SignatureCanvas />).instance()
+  const rSigPad = rSCInstance(mount(<SignatureCanvas />))
   const sigPad = rSigPad.getSignaturePad()
 
   test('toData should be equivalent', () => {
@@ -118,9 +122,9 @@ describe('SigCanvas wrapper methods return equivalent to SigPad', () => {
 
 // comes after props and wrapper methods as it uses both
 describe('get methods', () => {
-  const instance = mount(
+  const instance = rSCInstance(mount(
     <SignatureCanvas canvasProps={dotF.canvasProps} />
-  ).instance()
+  ))
   instance.fromData(dotF.data)
 
   test('getCanvas should return the same underlying canvas', () => {
@@ -138,7 +142,7 @@ describe('get methods', () => {
 // comes after props, wrappers, and gets as it uses them all
 describe('canvas resizing', () => {
   const wrapper = mount(<SignatureCanvas />)
-  const instance = wrapper.instance()
+  const instance = rSCInstance(wrapper)
   const canvas = instance.getCanvas()
 
   it('should clear on resize', () => {
@@ -196,7 +200,7 @@ describe('canvas resizing', () => {
 // comes after wrappers and resizing as it uses both
 describe('on & off methods', () => {
   const wrapper = mount(<SignatureCanvas />)
-  const instance = wrapper.instance()
+  const instance = rSCInstance(wrapper)
 
   it('should not clear when off, should clear when back on', () => {
     instance.fromData(dotF.data)
@@ -214,8 +218,8 @@ describe('on & off methods', () => {
   it('should no longer fire after unmount', () => {
     // monkey-patch on with a mock to tell if it were called, as there's no way
     // to check what event listeners are attached to window
-    instance._on = instance.on
-    instance.on = jest.fn(instance._on)
+    const origOn = instance.on
+    instance.on = jest.fn(origOn)
 
     wrapper.unmount()
     window.resizeTo(500, 500)