Add tests and fix found issues

.eslintrc

@@ -1,7 +1,8 @@
 {
   "env": {
     "browser": true,
-    "node": true
+    "node": true,
+    "jest": true
   },
   "extends": [
     "eslint:recommended",

.gitignore

@@ -2,3 +2,4 @@
 .stylelintcache
 node_modules/
 dist
+coverage

babel.config.js

@@ -0,0 +1,35 @@
+const presets = [
+  [
+    '@babel/preset-env',
+    {
+      targets: {
+        browsers: [
+          '>0.25%',
+          'not ie 11',
+          'not op_mini all',
+          'safari >= 11',
+          'not safari 5.1'
+        ],
+        node: 'current'
+      },
+      modules: false
+    }
+  ],
+  '@babel/preset-react'
+];
+
+const plugins = ['@babel/plugin-proposal-class-properties'];
+
+module.exports = function(api) {
+  api.cache.invalidate(() => process.env.NODE_ENV);
+  const isTest = api.env('test');
+
+  if (isTest) {
+    plugins.push('@babel/plugin-transform-modules-commonjs');
+  }
+
+  return {
+    presets,
+    plugins
+  };
+};

examples/src/app.css

@@ -11,10 +11,17 @@ h5 {
   margin: 0;
 }
 
+.testApp {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
 .example {
   display: flex;
   flex-direction: column;
   align-items: center;
+  height: 100%;
 }
 
 .listContainer {

examples/src/index.js

@@ -5,9 +5,11 @@ import styles from './app.css';
 import App from './App';
 
 ReactDOM.render(
-  <div className={styles.smartphone}>
-    <div className={styles.content}>
-      <App />
+  <div className={styles.testApp}>
+    <div className={styles.smartphone}>
+      <div className={styles.content}>
+        <App />
+      </div>
     </div>
   </div>,
   document.getElementById('root')

jest.config.js

@@ -0,0 +1,30 @@
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+
+module.exports = {
+  // Automatically clear mock calls and instances between every test
+  clearMocks: true,
+
+  // Indicates whether the coverage information should be collected while executing the test
+  collectCoverage: true,
+
+  // An array of glob patterns indicating a set of files for which coverage information should be collected
+  collectCoverageFrom: ['src/**/*.js', '!src/__tests__/*.*'],
+
+  // The directory where Jest should output its coverage files
+  coverageDirectory: 'coverage',
+
+  // A map from regular expressions to module names that allow to stub out resources with a single module
+  moduleNameMapper: {
+    '\\.css$': 'identity-obj-proxy'
+  },
+
+  // The glob patterns Jest uses to detect test files
+  testMatch: ['**/__tests__/**/*.test.js'],
+
+  // A map from regular expressions to paths to transformers
+  transform: {
+    '\\.js$': ['babel-jest'],
+    '.+\\.(css)$': 'jest-transform-css'
+  }
+};