added tests

babel.config.js

@@ -0,0 +1,4 @@
+// babel.config.js
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+}

jest.config.js

@@ -0,0 +1,16 @@
+// jest.config.js
+const { defaults: tsjPreset } = require('ts-jest/presets')
+
+module.exports = {
+  preset: 'react-native',
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig.spec.json',
+    },
+  },
+  transform: {
+    '^.+\\.jsx$': 'babel-jest',
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+}

package.json

@@ -27,8 +27,8 @@
   },
   "license": "MIT",
   "scripts": {
-    "build": "tsc --watch",
-    "test": "jest --config jestconfig.json",
+    "build": "tsc",
+    "test": "jest",
     "format": "prettier --write \"src/**/*.ts\" \"src/**/*.js\"",
     "lint": "tslint -p tsconfig.json",
     "runExample": "cd example && yarn web",
@@ -39,10 +39,15 @@
     "postversion": "git push && git push --tags"
   },
   "devDependencies": {
+    "@testing-library/react-native": "^9.0.0",
     "@types/jest": "^27.0.3",
     "@types/react-native": "^0.65.5",
+    "@types/react-test-renderer": "^17.0.1",
     "jest": "^27.4.5",
     "prettier": "^2.5.1",
+    "react": "^17.0.2",
+    "react-native": "0.63.0",
+    "react-test-renderer": "^16.9.0",
     "ts-jest": "^27.1.2",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",

tests/Sample.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react'
+import { Text, View } from 'react-native'
+import { CreateResponsiveStyle, DEVICE_SIZES } from '../src'
+
+const DEVICE_COLOR: Record<DEVICE_SIZES, string> = {
+  extra_large: 'orange',
+  large: 'blue',
+  medium: 'green',
+  small: 'red',
+}
+
+export default function Sample() {
+  const { styles, deviceSize } = useResponsiveStyle()
+
+  return (
+    <View style={styles('container')}>
+      <Text style={styles('text')}>Device Size: {deviceSize}</Text>
+      <Text style={styles('text')}>Color: {DEVICE_COLOR[deviceSize]}</Text>
+    </View>
+  )
+}
+
+const useResponsiveStyle = CreateResponsiveStyle(
+  {
+    container: {
+      flex: 1,
+      backgroundColor: '#fff',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    text: {
+      fontSize: 30,
+      color: 'white',
+    },
+  },
+  {
+    [DEVICE_SIZES.EXTRA_LARGE_DEVICE]: {
+      container: {
+        backgroundColor: DEVICE_COLOR[DEVICE_SIZES.EXTRA_LARGE_DEVICE],
+      },
+      text: {
+        color: 'black',
+      },
+    },
+    [DEVICE_SIZES.LARGE_DEVICE]: {
+      container: {
+        backgroundColor: DEVICE_COLOR[DEVICE_SIZES.LARGE_DEVICE],
+      },
+    },
+    [DEVICE_SIZES.MEDIUM_DEVICE]: {
+      container: {
+        backgroundColor: DEVICE_COLOR[DEVICE_SIZES.MEDIUM_DEVICE],
+      },
+      text: {
+        fontSize: 20,
+      },
+    },
+    [DEVICE_SIZES.SMALL_DEVICE]: {
+      container: {
+        backgroundColor: DEVICE_COLOR[DEVICE_SIZES.SMALL_DEVICE],
+      },
+      text: {
+        fontSize: 20,
+      },
+    },
+  },
+)

tests/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,195 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tests that device sizes render appropriately tests that extra large devices render correctly: extra_large 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#fff",
+        "flex": 1,
+        "justifyContent": "center",
+      },
+      Object {
+        "backgroundColor": "orange",
+      },
+    ]
+  }
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "white",
+          "fontSize": 30,
+        },
+        Object {
+          "color": "black",
+        },
+      ]
+    }
+  >
+    Device Size: 
+    extra_large
+  </Text>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "white",
+          "fontSize": 30,
+        },
+        Object {
+          "color": "black",
+        },
+      ]
+    }
+  >
+    Color: 
+    orange
+  </Text>
+</View>
+`;
+
+exports[`tests that device sizes render appropriately tests that large devices render correctly: large 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#fff",
+        "flex": 1,
+        "justifyContent": "center",
+      },
+      Object {
+        "backgroundColor": "blue",
+      },
+    ]
+  }
+>
+  <Text
+    style={
+      Object {
+        "color": "white",
+        "fontSize": 30,
+      }
+    }
+  >
+    Device Size: 
+    large
+  </Text>
+  <Text
+    style={
+      Object {
+        "color": "white",
+        "fontSize": 30,
+      }
+    }
+  >
+    Color: 
+    blue
+  </Text>
+</View>
+`;
+
+exports[`tests that device sizes render appropriately tests that medium devices render correctly: medium 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#fff",
+        "flex": 1,
+        "justifyContent": "center",
+      },
+      Object {
+        "backgroundColor": "green",
+      },
+    ]
+  }
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "white",
+          "fontSize": 30,
+        },
+        Object {
+          "fontSize": 20,
+        },
+      ]
+    }
+  >
+    Device Size: 
+    medium
+  </Text>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "white",
+          "fontSize": 30,
+        },
+        Object {
+          "fontSize": 20,
+        },
+      ]
+    }
+  >
+    Color: 
+    green
+  </Text>
+</View>
+`;
+
+exports[`tests that device sizes render appropriately tests that small devices render correctly: small 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#fff",
+        "flex": 1,
+        "justifyContent": "center",
+      },
+      Object {
+        "backgroundColor": "red",
+      },
+    ]
+  }
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "white",
+          "fontSize": 30,
+        },
+        Object {
+          "fontSize": 20,
+        },
+      ]
+    }
+  >
+    Device Size: 
+    small
+  </Text>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "white",
+          "fontSize": 30,
+        },
+        Object {
+          "fontSize": 20,
+        },
+      ]
+    }
+  >
+    Color: 
+    red
+  </Text>
+</View>
+`;

tests/index.test.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { ScaledSize } from 'react-native'
+import * as renderer from 'react-test-renderer'
+import Sample from './Sample'
+
+import { cleanup } from '@testing-library/react-native'
+
+afterEach(cleanup)
+
+const mockDimensions = ({ width }: Pick<ScaledSize, 'width'>) => {
+  jest.resetModules()
+  jest.doMock('react-native/Libraries/Utilities/Dimensions', () => ({
+    get: jest.fn().mockReturnValue({ width }),
+    addEventListener: jest.fn(),
+  }))
+}
+describe('tests that device sizes render appropriately', () => {
+  test('tests that small devices render correctly', () => {
+    mockDimensions({ width: 414 })
+    const tree = renderer.create(<Sample />).toJSON()
+    expect(tree).toMatchSnapshot('small')
+  })
+  test('tests that medium devices render correctly', () => {
+    mockDimensions({ width: 770 })
+    const tree = renderer.create(<Sample />).toJSON()
+    expect(tree).toMatchSnapshot('medium')
+  })
+  test('tests that large devices render correctly', () => {
+    mockDimensions({ width: 1000 })
+    const tree = renderer.create(<Sample />).toJSON()
+    expect(tree).toMatchSnapshot('large')
+  })
+  test('tests that extra large devices render correctly', () => {
+    mockDimensions({ width: 1300 })
+    const tree = renderer.create(<Sample />).toJSON()
+    expect(tree).toMatchSnapshot('extra_large')
+  })
+})

tsconfig.spec.json

@@ -0,0 +1,7 @@
+// tsconfig.spec.json
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}