Add viewport example, using custom useMedia hook

Author: trurl-master

.babelrc

@@ -1,5 +1,6 @@
 {
   "presets": [
-    "@babel/preset-env"
+    "@babel/preset-env",
+    "@babel/preset-react"
   ]
 }

.eslintrc.js

@@ -0,0 +1,28 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es6": true,
+        "node": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:jest/recommended"
+    ],
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+    }
+};

examples/viewport/react-custom-use-media/Component.js

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import useMedia from './useMedia'
+
+const Component = () => {
+  const isDesktop = useMedia('(min-width: 1280px)')
+  
+  if (isDesktop === null) {
+    return (
+      <div>server</div>
+    )
+  }
+
+  return (
+    <div>{isDesktop ? 'desktop' : 'not desktop'}</div>
+  )
+}
+
+export default Component

examples/viewport/react-custom-use-media/Component.test.js

@@ -0,0 +1,56 @@
+import React from 'react'
+import { render, act } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+
+import { mockViewport } from '../../../src/mocks/viewport'
+
+import Component from './Component'
+
+const VIEWPORT_DESKTOP = { width: "1440px", height: "900px" }
+const VIEWPORT_MOBILE = { width: "320px", height: "568px" }
+
+describe('It renders correctly on server, desktop and mobile', () => {
+  it('works on the server', () => {
+    const { getByText } = render(<Component />)
+
+    expect(getByText('server')).toBeInTheDocument();
+  })
+
+  it('works on desktop', () => {
+    const viewport = mockViewport(VIEWPORT_DESKTOP)
+
+    const { getByText } = render(<Component />);
+
+    expect(getByText('desktop')).toBeInTheDocument();
+
+    viewport.cleanup()
+  })
+
+  it('works on mobile', () => {
+    const viewport = mockViewport(VIEWPORT_MOBILE)
+
+    const { getByText } = render(<Component />);
+
+    expect(getByText('not desktop')).toBeInTheDocument();
+
+    viewport.cleanup()
+  });
+
+  it('works on desktop and mobile, even if we change the viewport description', () => {
+    const viewport = mockViewport(VIEWPORT_DESKTOP)
+
+    const { getByText, queryByText } = render(<Component />)
+
+    expect(getByText('desktop')).toBeInTheDocument()
+    expect(queryByText('not desktop')).not.toBeInTheDocument()
+
+    act(() => {
+      viewport.set(VIEWPORT_MOBILE)
+    })
+
+    expect(getByText('not desktop')).toBeInTheDocument()
+    expect(queryByText('desktop')).not.toBeInTheDocument()
+
+    viewport.cleanup()
+  })
+})

examples/viewport/react-custom-use-media/babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        targets: {
+          node: "current"
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ]
+};

examples/viewport/react-custom-use-media/jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  transform: {
+    "^.+\\.[t|j]sx?$": "babel-jest"
+  },
+  testPathIgnorePatterns: ["<rootDir>/node_modules/"]
+};