feat: add typescript support

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 package-lock.json
 yarn.lock
+dist

package.json

@@ -6,11 +6,17 @@
     "type": "git",
     "url": "https://github.com/storybookjs/testing-library.git"
   },
-  "browser": "index.js",
+  "browser": "dist/index.js",
+  "main": "dist/index.js",
   "license": "MIT",
+  "scripts": {
+    "build": "tsc",
+    "prepublish": "npm run build"
+  },
   "files": [
-    "./index.js"
+    "dist/**/*"
   ],
+  "types": "dist/index.d.ts",
   "publishConfig": {
     "access": "public"
   },
@@ -20,5 +26,9 @@
     "@testing-library/dom": "^8.3.0",
     "@testing-library/user-event": "^13.2.1",
     "ts-dedent": "^2.2.0"
+  },
+  "devDependencies": {
+    "tsc": "^2.0.3",
+    "typescript": "^4.4.3"
   }
 }

index.js → src/index.ts

@@ -1,27 +1,32 @@
-import { once } from '@storybook/client-logger';
-import { instrument } from '@storybook/instrumenter';
-import * as domTestingLibrary from '@testing-library/dom';
-import _userEvent from '@testing-library/user-event';
-import dedent from 'ts-dedent';
+import { once } from '@storybook/client-logger'
+import { instrument } from '@storybook/instrumenter'
+import * as domTestingLibrary from '@testing-library/dom'
+import _userEvent from '@testing-library/user-event'
+import dedent from 'ts-dedent'
 
 const testingLibrary = instrument(
   { ...domTestingLibrary },
   {
-    intercept: (method, path) => path[0] === 'fireEvent' || method.startsWith('findBy'),
+    intercept: (method, path) =>
+      path[0] === 'fireEvent' || method.startsWith('findBy'),
     getArgs: (call, state) => {
-      if (!state.isDebugging) return call.args;
+      if (!state.isDebugging) return call.args
       if (call.method.startsWith('findBy')) {
-        const [value, queryOptions, waitForOptions] = call.args;
-        return [value, queryOptions, { ...waitForOptions, timeout: 60000, interval: Infinity }];
+        const [value, queryOptions, waitForOptions] = call.args
+        return [
+          value,
+          queryOptions,
+          { ...waitForOptions, timeout: 60000, interval: Infinity },
+        ]
       }
       if (call.method.startsWith('waitFor')) {
-        const [callback, options] = call.args;
-        return [callback, { ...options, timeout: 60000, interval: Infinity }];
+        const [callback, options] = call.args
+        return [callback, { ...options, timeout: 60000, interval: Infinity }]
       }
-      return call.args;
-    }
+      return call.args
+    },
   }
-);
+)
 
 testingLibrary.screen = Object.entries(testingLibrary.screen).reduce(
   (acc, [key, val]) =>
@@ -31,14 +36,13 @@ testingLibrary.screen = Object.entries(testingLibrary.screen).reduce(
           You are using Testing Library's \`screen\` object. Use \`within(canvasElement)\` instead.
 
           More info: https://storybook.js.org/docs/react/essentials/interactions
-        `);
-        return val;
+        `)
+        return val
       },
     }),
   testingLibrary.screen
-);
+)
 
-// console.log(Object.keys(domTestingLibrary).join(',\n'));
 export const {
   buildQueries,
   configure,
@@ -112,6 +116,9 @@ export const {
   waitForElementToBeRemoved,
   within,
   prettyFormat,
-} = testingLibrary;
+} = testingLibrary
 
-export const { userEvent } = instrument({ userEvent: _userEvent }, { intercept: true });
+export const { userEvent } = instrument(
+  { userEvent: _userEvent },
+  { intercept: true }
+)

tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es5",
+    "allowJs": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "declaration": true
+  },
+  "include": ["src/*.ts"],
+  "exclude": ["node_modules"]
+}