add kcd-scripts, adjust for lint rules

Author: phryneas

.eslintignore

@@ -0,0 +1,2 @@
+tsup.config.ts
+dist/

.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  extends: 'kentcdodds',
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/unified-signatures': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        args: 'after-used',
+        argsIgnorePattern: '^_',
+        ignoreRestSiblings: true,
+        varsIgnorePattern: '^_',
+      },
+    ],
+  },
+}

.git-blame-ignore-revs

@@ -0,0 +1,2 @@
+# format with kcd-scripts
+325d59e3cd0bf4c7ab738381e1bb49aef3bc7363

.prettierrc.cjs

@@ -0,0 +1 @@
+module.exports = require("kcd-scripts/prettier.js");

package.json

@@ -61,6 +61,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "expect": "^29.7.0",
+    "kcd-scripts": "^16.0.0",
     "pkg-pr-new": "^0.0.29",
     "prettier": "^3.3.3",
     "publint": "^0.2.11",
@@ -79,7 +80,12 @@
     "build": "tsup",
     "pkg-pr-new-publish": "yarn build && pkg-pr-new publish --no-template",
     "prepack": "yarn build",
+    "format": "kcd-scripts format",
+    "lint": "kcd-scripts lint --config .eslintrc.cjs",
     "verify": "attw --pack . && publint"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "resolutions": {
+    "eslint-config-kentcdodds": "^21.0.0"
+  }
 }

src/assertable.ts

@@ -1,4 +1,4 @@
-import {RenderStream} from './renderStream/createRenderStream.js'
+import {type RenderStream} from './renderStream/createRenderStream.js'
 
 export const assertableSymbol = Symbol.for(
   '@testing-library/react-render-stream:assertable',

src/jest/index.ts

@@ -1,14 +1,19 @@
 import {expect} from '@jest/globals'
-import {toRerender, toRenderExactlyTimes} from './renderStreamMatchers.js'
-import type {RenderStreamMatchers} from './renderStreamMatchers.js'
+import {
+  toRerender,
+  toRenderExactlyTimes,
+  type RenderStreamMatchers,
+} from './renderStreamMatchers.js'
 
 expect.extend({
   toRerender,
   toRenderExactlyTimes,
 })
 
 declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace jest {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
     interface Matchers<R = void, T = {}> extends RenderStreamMatchers<R, T> {}
   }
 }

src/jest/renderStreamMatchers.ts

@@ -1,9 +1,9 @@
-import type {MatcherFunction} from 'expect'
-import {WaitForRenderTimeoutError} from '@testing-library/react-render-stream'
-import type {
-  Assertable,
-  NextRenderOptions,
-  RenderStream,
+import {MatcherContext, type MatcherFunction} from 'expect'
+import {
+  WaitForRenderTimeoutError,
+  type Assertable,
+  type NextRenderOptions,
+  type RenderStream,
 } from '@testing-library/react-render-stream'
 // explicitly imported the symbol from the internal file
 // this will bundle the `Symbol.for` call twice, but we keep it private
@@ -24,7 +24,7 @@ export interface RenderStreamMatchers<R = void, T = {}> {
 }
 
 export const toRerender: MatcherFunction<[options?: NextRenderOptions]> =
-  async function (actual, options) {
+  async function toRerender(this: MatcherContext, actual, options) {
     const _stream = actual as RenderStream<any> | Assertable
     const stream =
       assertableSymbol in _stream ? _stream[assertableSymbol] : _stream
@@ -44,20 +44,24 @@ export const toRerender: MatcherFunction<[options?: NextRenderOptions]> =
       pass,
       message() {
         return (
-          hint +
-          `\n\nExpected component to${pass ? ' not' : ''} rerender, ` +
+          `${hint}\n\nExpected component to${pass ? ' not' : ''} rerender, ` +
           `but it did${pass ? '' : ' not'}.`
         )
       },
     }
   }
 
 /** to be thrown to "break" test execution and fail it */
-const failed = {}
+const failed = new Error()
 
 export const toRenderExactlyTimes: MatcherFunction<
   [times: number, options?: NextRenderOptions]
-> = async function (actual, times, optionsPerRender) {
+> = async function toRenderExactlyTimes(
+  this: MatcherContext,
+  actual,
+  times,
+  optionsPerRender,
+) {
   const _stream = actual as RenderStream<any> | Assertable
   const stream =
     assertableSymbol in _stream ? _stream[assertableSymbol] : _stream
@@ -70,6 +74,7 @@ export const toRenderExactlyTimes: MatcherFunction<
     }
     try {
       while (stream.totalRenderCount() < times) {
+        // eslint-disable-next-line no-await-in-loop
         await stream.waitForNextRender(options)
       }
     } catch (e) {
@@ -95,8 +100,9 @@ export const toRenderExactlyTimes: MatcherFunction<
     pass,
     message() {
       return (
-        hint +
-        ` Expected component to${pass ? ' not' : ''} render exactly ${times}.` +
+        `${
+          hint
+        } Expected component to${pass ? ' not' : ''} render exactly ${times}.` +
         ` It rendered ${stream.totalRenderCount()} times.`
       )
     },

src/renderHookToSnapshotStream.tsx

@@ -1,9 +1,9 @@
 import {RenderHookOptions} from '@testing-library/react'
+import {createElement} from 'rehackt'
 import {createRenderStream} from './renderStream/createRenderStream.js'
-import type {NextRenderOptions} from './renderStream/createRenderStream.js'
+import {type NextRenderOptions} from './renderStream/createRenderStream.js'
 
 import {Render} from './renderStream/Render.js'
-import {createElement} from 'rehackt'
 import {Assertable, assertableSymbol, markAssertable} from './assertable.js'
 
 export interface SnapshotStream<Snapshot, Props> extends Assertable {
@@ -48,7 +48,7 @@ export interface SnapshotStream<Snapshot, Props> extends Assertable {
 
 export function renderHookToSnapshotStream<ReturnValue, Props extends {}>(
   renderCallback: (props: Props) => ReturnValue,
-  {initialProps, ...options}: RenderHookOptions<Props> = {},
+  {initialProps, ...renderOptions}: RenderHookOptions<Props> = {},
 ): SnapshotStream<ReturnValue, Props> {
   const {render, ...stream} = createRenderStream<{value: ReturnValue}>()
 
@@ -59,7 +59,7 @@ export function renderHookToSnapshotStream<ReturnValue, Props extends {}>(
 
   const {rerender: baseRerender, unmount} = render(
     createElement(HookComponent, initialProps),
-    options,
+    renderOptions,
   )
 
   function rerender(rerenderCallbackProps: Props) {

src/renderStream/Render.tsx

@@ -70,13 +70,19 @@ export class RenderInstance<Snapshot> implements Render<Snapshot> {
   startTime: number
   commitTime: number
   count: number
+  public snapshot: Snapshot
+  private stringifiedDOM: string | undefined
+  public renderedComponents: Array<string | React.ComponentType>
 
   constructor(
     baseRender: BaseRender,
-    public snapshot: Snapshot,
-    private stringifiedDOM: string | undefined,
-    public renderedComponents: Array<string | React.ComponentType>,
+    snapshot: Snapshot,
+    stringifiedDOM: string | undefined,
+    renderedComponents: Array<string | React.ComponentType>,
   ) {
+    this.snapshot = snapshot
+    this.stringifiedDOM = stringifiedDOM
+    this.renderedComponents = renderedComponents
     this.id = baseRender.id
     this.phase = baseRender.phase
     this.actualDuration = baseRender.actualDuration
@@ -188,7 +194,7 @@ export function errorOnDomInteraction() {
     throw new Error(`
     DOM interaction with a snapshot detected in test.
     Please don't interact with the DOM you get from \`withinDOM\`,
-    but still use \`screen\' to get elements for simulating user interaction.
+    but still use \`screen\` to get elements for simulating user interaction.
     `)
   }
   events.forEach(event => {