fix: compare length of resetKeys when checking if resetKeys has changed (#56)

* Compare length of resetKeys when checking if resetKeys has changed

* Split test into more logical chunks

Author: mmiller42

src/__tests__/index.js

@@ -251,13 +251,15 @@ test('requires either a fallback, fallbackRender, or FallbackComponent', () => {
   console.error.mockClear()
 })
 
+// eslint-disable-next-line max-statements
 test('supports automatic reset of error boundary when resetKeys change', () => {
   const handleReset = jest.fn()
   const TRY_AGAIN_ARG1 = 'TRY_AGAIN_ARG1'
   const TRY_AGAIN_ARG2 = 'TRY_AGAIN_ARG2'
   const handleResetKeysChange = jest.fn()
   function App() {
     const [explode, setExplode] = React.useState(false)
+    const [extra, setExtra] = React.useState(false)
     return (
       <div>
         <button onClick={() => setExplode(e => !e)}>toggle explode</button>
@@ -271,16 +273,19 @@ test('supports automatic reset of error boundary when resetKeys change', () => {
               >
                 Try again
               </button>
+              <button onClick={() => setExtra(e => !e)}>
+                toggle extra resetKey
+              </button>
             </div>
           )}
           onReset={(...args) => {
             setExplode(false)
             handleReset(...args)
           }}
           onResetKeysChange={handleResetKeysChange}
-          resetKeys={[explode]}
+          resetKeys={extra ? [explode, extra] : [explode]}
         >
-          {explode ? <Bomb /> : null}
+          {explode || extra ? <Bomb /> : null}
         </ErrorBoundary>
       </div>
     )
@@ -316,6 +321,46 @@ test('supports automatic reset of error boundary when resetKeys change', () => {
   expect(handleReset).not.toHaveBeenCalled()
   expect(screen.queryByRole('alert')).not.toBeInTheDocument()
   expect(console.error).not.toHaveBeenCalled()
+
+  // blow it up again
+  userEvent.click(screen.getByText('toggle explode'))
+  screen.getByRole('alert')
+  expect(console.error).toHaveBeenCalledTimes(2)
+  console.error.mockClear()
+
+  // toggles adding an extra resetKey to the array
+  // expect error to re-render
+  userEvent.click(screen.getByText('toggle extra resetKey'))
+  expect(handleResetKeysChange).toHaveBeenCalledTimes(1)
+  expect(handleResetKeysChange).toHaveBeenCalledWith([true], [true, true])
+  handleResetKeysChange.mockClear()
+  screen.getByRole('alert')
+  expect(console.error).toHaveBeenCalledTimes(2)
+  console.error.mockClear()
+
+  // toggle explode back to false
+  // expect error to re-render again
+  userEvent.click(screen.getByText('toggle explode'))
+  expect(handleReset).not.toHaveBeenCalled()
+  expect(handleResetKeysChange).toHaveBeenCalledTimes(1)
+  expect(handleResetKeysChange).toHaveBeenCalledWith(
+    [true, true],
+    [false, true],
+  )
+  screen.getByRole('alert')
+  handleResetKeysChange.mockClear()
+  expect(console.error).toHaveBeenCalledTimes(2)
+  console.error.mockClear()
+
+  // toggle extra resetKey
+  // expect error to be reset
+  userEvent.click(screen.getByText('toggle extra resetKey'))
+  expect(handleReset).not.toHaveBeenCalled()
+  expect(handleResetKeysChange).toHaveBeenCalledTimes(1)
+  expect(handleResetKeysChange).toHaveBeenCalledWith([false, true], [false])
+  handleResetKeysChange.mockClear()
+  expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+  expect(console.error).not.toHaveBeenCalled()
 })
 
 /*

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
 const changedArray = (a = [], b = []) =>
-  a.some((item, index) => !Object.is(item, b[index]))
+  a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]))
 
 const initialState = {error: null, info: null}
 class ErrorBoundary extends React.Component {