Fix watchFn with createInstance and defaultProps.

Author: ghengeveld

src/index.js

@@ -56,9 +56,10 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
     }
 
     componentDidUpdate(prevProps) {
-      const { watch, watchFn, promiseFn } = this.props
+      const { watch, watchFn = defaultProps.watchFn, promiseFn } = this.props
       if (watch !== prevProps.watch) this.load()
-      if (watchFn && watchFn(this.props, prevProps)) this.load()
+      if (watchFn && watchFn({ ...defaultProps, ...this.props }, { ...defaultProps, ...prevProps }))
+        this.load()
       if (promiseFn !== prevProps.promiseFn) {
         if (promiseFn) this.load()
         else this.cancel()

src/spec.js

@@ -475,6 +475,18 @@ describe("createInstance", () => {
     expect(onResolve).toHaveBeenCalledWith("done")
   })
 
+  test("accepts watchFn from defaultProps and passes the defaultProps along", async () => {
+    const promiseFn = () => resolveTo("done")
+    const watchFn = jest.fn()
+    const CustomAsync = createInstance({ promiseFn, watchFn })
+    const { getByText } = render(<CustomAsync>{({ data }) => data || null}</CustomAsync>)
+    await waitForElement(() => getByText("done"))
+    expect(watchFn).toHaveBeenCalledWith(
+      expect.objectContaining({ promiseFn, watchFn }),
+      expect.objectContaining({ promiseFn, watchFn })
+    )
+  })
+
   test("custom instances also have helper components", async () => {
     const promiseFn = () => resolveTo("done")
     const CustomAsync = createInstance({ promiseFn })