test: useWindowSize

Tests for useWindowSize

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    presets: ['@babel/preset-env', '@babel/preset-react', "@babel/preset-typescript"],
+};

jest.config.js

@@ -0,0 +1,6 @@
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+
+module.exports = {
+  clearMocks: true,
+};

package.json

@@ -12,7 +12,8 @@
   "typings": "lib/index.d.ts",
   "scripts": {
     "start": "yarn storybook",
-    "test": "echo hmm...",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "build:cjs": "tsc",
     "build:es": "tsc -m esNext --outDir esm",
     "build": "yarn build:cjs && yarn build:es",
@@ -49,6 +50,9 @@
     "rebound": "*"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.4.3",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.3.3",
     "@semantic-release/changelog": "3.0.2",
     "@semantic-release/git": "7.0.8",
     "@semantic-release/npm": "5.1.4",
@@ -57,14 +61,17 @@
     "@storybook/addon-notes": "5.0.6",
     "@storybook/addon-options": "5.0.6",
     "@storybook/react": "5.0.6",
+    "@types/jest": "^24.0.11",
     "@types/react": "16.8.13",
     "babel-core": "6.26.3",
     "fork-ts-checker-webpack-plugin": "1.0.1",
     "gh-pages": "2.0.1",
+    "jest": "^24.7.1",
     "keyboardjs": "2.5.1",
     "markdown-loader": "5.0.0",
     "react": "16.8.4",
     "react-dom": "16.8.4",
+    "react-hooks-testing-library": "^0.4.0",
     "react-spring": "6.1.10",
     "rebound": "0.1.0",
     "rimraf": "2.6.3",

src/__tests__/useWindowSize.test.tsx

@@ -0,0 +1,58 @@
+import useWindowSize from "../useWindowSize"
+import { renderHook, cleanup, act } from 'react-hooks-testing-library'
+
+// simulate window resize 
+function fireResize(type, value) {
+
+  switch (type) {
+    case 'width':
+      (window.innerWidth as number) = value // assert type of window.innerWidth as it is typed as readonly.
+      break;
+    case 'height':
+      (window.innerHeight as number) = value // assert type of window.innerHeight as it is typed as readonly.
+    break;
+    default:
+      break;
+  }
+
+  window.dispatchEvent(new Event('resize'))
+
+}
+
+afterEach(cleanup)
+
+describe("useWindowSize", () => {
+
+  it("should be defined", () => {
+    expect(useWindowSize).toBeDefined();
+  });
+
+  const hook = renderHook(() => useWindowSize())
+
+  it("should update width", () => {
+    act(()=>{
+      fireResize('width', 320)
+      hook.rerender()
+    })
+    expect(hook.result.current.width).toBe(320)
+    act(()=>{
+      fireResize('width', 640)
+      hook.rerender()
+    })
+    expect(hook.result.current.width).toBe(640)
+  });
+
+  it("should update height", () => {
+    act(()=>{
+      fireResize('height', 500)
+      hook.rerender()
+    })
+    expect(hook.result.current.height).toBe(500)
+    act(()=>{
+      fireResize('height', 1000)
+      hook.rerender()
+    })
+    expect(hook.result.current.height).toBe(1000)
+  });
+
+});