fix: proper definition for isBrowser and isNavigator states.

should fix: #1777

Also introduce jest config for ssr tests (it fails hard now).

Author: xobotyi

jest.config.base.ts

@@ -0,0 +1,13 @@
+import type { Config } from '@jest/types';
+
+export const baseJestConfig: Config.InitialOptions = {
+  'preset': 'ts-jest',
+  'clearMocks': true,
+  'coverageDirectory': 'coverage',
+  'testMatch': [
+    '<rootDir>/tests/**/*.test.(ts|tsx)'
+  ],
+  'setupFiles': [
+    '<rootDir>/tests/setupTests.ts'
+  ]
+}

jest.config.node.ts

@@ -0,0 +1,9 @@
+import type { Config } from '@jest/types';
+import { baseJestConfig } from './jest.config.base';
+
+const config: Config.InitialOptions = {
+  ...baseJestConfig,
+  testEnvironment: 'node', // browser-like
+}
+
+export default config;

jest.config.ts

@@ -0,0 +1,9 @@
+import type { Config } from '@jest/types';
+import { baseJestConfig } from './jest.config.base';
+
+const config: Config.InitialOptions = {
+  ...baseJestConfig,
+  testEnvironment: 'jsdom', // browser-like
+}
+
+export default config;

package.json

@@ -14,11 +14,12 @@
   "scripts": {
     "start": "yarn storybook",
     "test": "jest --maxWorkers 2",
+    "test:ssr": "jest --maxWorkers 2 --config ./jest.config.node.ts",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
     "lint": "eslint {src,tests}/**/*.{ts,tsx}",
     "lint:fix": "yarn lint --fix",
-    "lint:types": "tsc --noEmit",
+    "lint:types": "tsc --noEmit ",
     "lint:prettier": "prettier --write src/**/**/*.{ts,tsx}",
     "build:cjs": "tsc",
     "build:es": "tsc -m esNext --outDir esm",
@@ -162,16 +163,5 @@
   "collective": {
     "type": "opencollective",
     "url": "https://opencollective.com/react-use"
-  },
-  "jest": {
-    "preset": "ts-jest",
-    "clearMocks": true,
-    "coverageDirectory": "coverage",
-    "testMatch": [
-      "<rootDir>/tests/**/*.test.(ts|tsx)"
-    ],
-    "setupFiles": [
-      "<rootDir>/tests/setupTests.ts"
-    ]
   }
 }

src/misc/util.ts

@@ -18,4 +18,5 @@ export function off<T extends Window | Document | HTMLElement | EventTarget>(
   }
 }
 
-export const isBrowser = typeof window === 'object';
+export const isBrowser = typeof window !== 'undefined';
+export const isNavigator = typeof navigator !== 'undefined';

src/useBattery.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { off, on } from './misc/util';
+import { isNavigator, off, on } from './misc/util';
 import isDeepEqual from './misc/isDeepEqual';
 
 export interface BatteryState {
@@ -25,7 +25,7 @@ type UseBatteryState =
   | { isSupported: true; fetched: false } // battery API supported but not fetched yet
   | (BatteryState & { isSupported: true; fetched: true }); // battery API supported and fetched
 
-const nav: NavigatorWithPossibleBattery | undefined = typeof navigator === 'object' ? navigator : undefined;
+const nav: NavigatorWithPossibleBattery | undefined = isNavigator ? navigator : undefined;
 const isBatteryApiSupported = nav && typeof nav.getBattery === 'function';
 
 function useBatteryMock(): UseBatteryState {

src/useIsomorphicLayoutEffect.ts

@@ -1,5 +1,6 @@
 import { useEffect, useLayoutEffect } from 'react';
+import { isBrowser } from './misc/util';
 
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
 
 export default useIsomorphicLayoutEffect;

src/useMediaDevices.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { noop, off, on } from './misc/util';
+import { isNavigator, noop, off, on } from './misc/util';
 
 const useMediaDevices = () => {
   const [state, setState] = useState({});
@@ -34,4 +34,4 @@ const useMediaDevices = () => {
 
 const useMediaDevicesMock = () => ({});
 
-export default typeof navigator === 'object' && !!navigator.mediaDevices ? useMediaDevices : useMediaDevicesMock;
+export default isNavigator && !!navigator.mediaDevices ? useMediaDevices : useMediaDevicesMock;

src/useNetworkState.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { off, on } from './misc/util';
+import { isNavigator, off, on } from './misc/util';
 import { IHookStateInitAction } from './misc/hookState';
 
 export interface INetworkInformation extends EventTarget {
@@ -69,7 +69,7 @@ export interface IUseNetworkState {
 
 const nav:
   | (Navigator & Partial<Record<'connection' | 'mozConnection' | 'webkitConnection', INetworkInformation>>)
-  | undefined = navigator;
+  | undefined = isNavigator ? navigator : undefined;
 const conn: INetworkInformation | undefined = nav && (nav.connection || nav.mozConnection || nav.webkitConnection);
 
 function getConnectionState(previousState?: IUseNetworkState): IUseNetworkState {

src/useVibrate.ts

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
-import { noop } from './misc/util';
+import { isNavigator, noop } from './misc/util';
 
 export type VibrationPattern = number | number[];
 
-const isVibrationApiSupported = typeof navigator === 'object' && 'vibrate' in navigator;
+const isVibrationApiSupported = isNavigator && 'vibrate' in navigator;
 
 function useVibrate(enabled: boolean = true, pattern: VibrationPattern = [1000, 1000], loop: boolean = true): void {
   useEffect(() => {

tests/setupTests.ts

@@ -1,6 +1,12 @@
 import 'jest-localstorage-mock';
+import { isBrowser } from '../src/misc/util';
 
-(window as any).ResizeObserver = class ResizeObserver {
-  observe() {}
-  disconnect() {}
-};
+if (isBrowser) {
+  (window as any).ResizeObserver = class ResizeObserver {
+    observe() {
+    }
+
+    disconnect() {
+    }
+  };
+}

tsconfig.json

@@ -27,6 +27,8 @@
     "lib",
     "esm",
     "tests",
-    "stories"
+    "stories",
+    "jest.config.ts",
+    "jest.config.*.ts"
   ]
 }