Merge pull request #652 from multivoltage/fix/working-next-example

fix: next example now works

Author: devrnt

apps/examples/nextjs/package.json

@@ -7,9 +7,9 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "12.1.0",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "next": "13.4.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-use-intercom": "workspace:*"
   }
 }

packages/react-use-intercom/package.json

@@ -69,18 +69,17 @@
   },
   "devDependencies": {
     "@size-limit/preset-small-lib": "^7.0.3",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react": "^14.0.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^18.11.19",
-    "@types/react": "^18.0.20",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "jest": "^29.4.1",
     "jest-environment-jsdom": "^29.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.0.0",
+    "react-test-renderer": "^18.2.0",
     "size-limit": "^7.0.3",
     "source-map": "0.6.1",
     "ts-jest": "^29.0.5",

packages/react-use-intercom/test/intercomProvider.test.tsx

@@ -1,5 +1,4 @@
-import { act, render } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { act, render, renderHook } from '@testing-library/react';
 import * as React from 'react';
 
 import { IntercomProvider, useIntercom } from '../src';
@@ -31,27 +30,21 @@ describe('IntercomProvider', () => {
   test('should not call `onShow` callback when not calling `show`', () => {
     const mockOnShow = jest.fn();
 
-    renderHook<{ children: React.ReactNode }, ReturnType<typeof useIntercom>>(
-      () => useIntercom(),
-      {
-        wrapper: ({ children }) => (
-          <IntercomProvider appId={intercomAppId} onShow={mockOnShow} autoBoot>
-            {children}
-          </IntercomProvider>
-        ),
-      },
-    );
+    renderHook(() => useIntercom(), {
+      wrapper: ({ children }) => (
+        <IntercomProvider appId={intercomAppId} onShow={mockOnShow} autoBoot>
+          {children}
+        </IntercomProvider>
+      ),
+    });
 
     expect(mockOnShow).not.toBeCalled();
   });
 
   test('should set `window.intercomSettings.apiBase` on autoBoot', () => {
     const apiBase = `https://${intercomAppId}.intercom-messenger.com`;
 
-    const { result } = renderHook<
-      { children: React.ReactNode },
-      ReturnType<typeof useIntercom>
-    >(() => useIntercom(), {
+    const { result } = renderHook(() => useIntercom(), {
       wrapper: ({ children }) => (
         <IntercomProvider appId={intercomAppId} apiBase={apiBase}>
           {children}
@@ -74,22 +67,19 @@ describe('IntercomProvider', () => {
   test('should pass props when `autoBootProps` is passed', () => {
     const phone = '123456';
 
-    renderHook<{ children: React.ReactNode }, ReturnType<typeof useIntercom>>(
-      () => useIntercom(),
-      {
-        wrapper: ({ children }) => (
-          <IntercomProvider
-            appId={intercomAppId}
-            autoBootProps={{
-              phone,
-            }}
-            autoBoot
-          >
-            {children}
-          </IntercomProvider>
-        ),
-      },
-    );
+    renderHook(() => useIntercom(), {
+      wrapper: ({ children }) => (
+        <IntercomProvider
+          appId={intercomAppId}
+          autoBootProps={{
+            phone,
+          }}
+          autoBoot
+        >
+          {children}
+        </IntercomProvider>
+      ),
+    });
 
     expect(window.intercomSettings).toEqual({
       app_id: intercomAppId,
@@ -100,10 +90,7 @@ describe('IntercomProvider', () => {
   test('should not pass props when `autoBootProps` is passed and `autoBoot` is `false`', () => {
     const phone = '123456';
 
-    const { result } = renderHook<
-      { children: React.ReactNode },
-      ReturnType<typeof useIntercom>
-    >(() => useIntercom(), {
+    const { result } = renderHook(() => useIntercom(), {
       wrapper: ({ children }) => (
         <IntercomProvider
           appId={intercomAppId}

packages/react-use-intercom/test/useIntercom.test.tsx

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 import * as React from 'react';
 
 import { IntercomProvider, useIntercom } from '../src';
@@ -8,10 +8,7 @@ const intercomAppId = config.intercomAppId;
 
 describe('useIntercom', () => {
   test('should be available when wrapped in context', () => {
-    const { result } = renderHook<
-      { children: React.ReactNode },
-      ReturnType<typeof useIntercom>
-    >(() => useIntercom(), {
+    const { result } = renderHook(() => useIntercom(), {
       wrapper: ({ children }) => (
         <IntercomProvider appId={intercomAppId}>{children}</IntercomProvider>
       ),
@@ -25,10 +22,7 @@ describe('useIntercom', () => {
   });
 
   test('should set `window.intercomSettings.appId` on boot', () => {
-    const { result } = renderHook<
-      { children: React.ReactNode },
-      ReturnType<typeof useIntercom>
-    >(() => useIntercom(), {
+    const { result } = renderHook(() => useIntercom(), {
       wrapper: ({ children }) => (
         <IntercomProvider appId={intercomAppId}>{children}</IntercomProvider>
       ),
@@ -46,10 +40,7 @@ describe('useIntercom', () => {
   test.skip('should await a certain amount on delayed initialization', async () => {
     const onShow = jest.fn();
 
-    const { result } = renderHook<
-      { children: React.ReactNode },
-      ReturnType<typeof useIntercom>
-    >(() => useIntercom(), {
+    const { result } = renderHook(() => useIntercom(), {
       wrapper: ({ children }) => (
         <IntercomProvider
           appId={intercomAppId}
@@ -71,10 +62,7 @@ describe('useIntercom', () => {
   });
 
   it('should remove `window.intercomSettings` on shutdown', () => {
-    const { result } = renderHook<
-      { children: React.ReactNode },
-      ReturnType<typeof useIntercom>
-    >(() => useIntercom(), {
+    const { result } = renderHook(() => useIntercom(), {
       wrapper: ({ children }) => (
         <IntercomProvider appId={intercomAppId}>{children}</IntercomProvider>
       ),