(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

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.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",

test/fixtures.js → test/fixtures.ts

@@ -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/index.spec.js → test/index.spec.tsx

@@ -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)