ci: add jest unit tests

.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -4,3 +4,4 @@ dist/
 .idea/
 .DS_Store
 .eslintcache
+coverage

babel.config.json

@@ -0,0 +1,6 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [
+    ["babel-plugin-module-resolver", { "root": ["./src"] }]
+  ]
+}

package.json

@@ -16,7 +16,10 @@
   "jsnext:main": "dist/module.js",
   "scripts": {
     "build": "rollup -c",
-    "build:profile": "cross-env PROFILE=true rollup -c",
+    "build:profile": "cross-env PROFILE=true yarn run build",
+    "test": "jest",
+    "test:watch": "yarn run test --watch",
+    "test:coverage": "yarn run test --coverage",
     "dev": "docz dev",
     "docz:build": "docz build",
     "format": "prettier --write '**/*.{js,json,md,mdx}'",
@@ -44,6 +47,9 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   },
+  "jest": {
+    "collectCoverageFrom": ["src/**/*.{js,jsx}"]
+  },
   "peerDependencies": {
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
@@ -89,10 +95,13 @@
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.1.0",
     "husky": "^4.3.0",
+    "jest": "^26.4.2",
+    "jest-emotion": "^10.0.32",
     "lint-staged": "^10.4.0",
     "prettier": "^2.1.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-test-renderer": "^16.13.1",
     "read-pkg": "^5.2.0",
     "rollup": "^2.26.5",
     "rollup-plugin-analyzer": "^3.3.0",

src/components/__tests__/Dot.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import shouldMatchEmotionSnapshot from 'helpers/shouldMatchEmotionSnapshot'
+
+import { Dot } from '../Dot'
+
+test('Button renders correctly', () => {
+  shouldMatchEmotionSnapshot(<Dot>This is hotpink.</Dot>)
+})

src/components/__tests__/__snapshots__/Dot.js.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button renders correctly 1`] = `
+<div
+  className="sui-box css-8qkufk"
+  css={[Function]}
+>
+  This is hotpink.
+</div>
+`;

src/helpers/shouldMatchEmotionSnapshot.js

@@ -0,0 +1,9 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import serializer from 'jest-emotion'
+import renderer from 'react-test-renderer'
+
+expect.addSnapshotSerializer(serializer)
+
+export default component => {
+  expect(renderer.create(component).toJSON()).toMatchSnapshot()
+}