feat: setup jest setting system

.babel.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    ['@babel/preset-react', { useSpread: true }],
+    '@babel/preset-typescript'
+  ],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        root: ['./src'],
+        alias: {
+          test: './test'
+        }
+      }
+    ]
+  ]
+}

.eslintrc.js

@@ -0,0 +1,69 @@
+const path = require('path')
+
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'standard',
+    'standard-react',
+    'prettier/standard',
+    'prettier/react'
+  ],
+  plugins: ['prettier', 'react-hooks', '@typescript-eslint'],
+  env: {
+    node: true
+  },
+  parserOptions: {
+    ecmaVersion: 2020,
+    ecmaFeatures: {
+      legacyDecorators: true,
+      jsx: true
+    }
+  },
+  rules: {
+    'space-before-function-paren': 0,
+    'react/prop-types': 0,
+    'react/jsx-handler-names': 0,
+    'react/jsx-fragments': 0,
+    'react/no-unused-prop-types': 0,
+    'import/export': 0,
+    'import/order': [
+      2,
+      { groups: ['parent', 'sibling'], 'newlines-between': 'always' }
+    ],
+    'prefer-promise-reject-errors': 'off',
+    'react/jsx-filename-extension': 'off',
+    'react/forbid-prop-types': 'off',
+    'import/prefer-default-export': 'off',
+    'no-plusplus': 'off',
+    'no-return-assign': 'off',
+    'no-nested-ternary': 'off',
+    'no-param-reassign': 'off',
+    'no-continue': 'off',
+    'func-names': 'off',
+    'no-bitwise': 'off',
+    'consistent-return': 'off',
+    'import/no-webpack-loader-syntax': 'off',
+    'no-restricted-globals': 'off',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'react/jsx-curly-newline': 'off',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': 'error'
+  },
+  settings: {
+    react: {
+      version: '16'
+    },
+    'import/resolver': {
+      alias: {
+        map: [
+          ['fiber', './src'],
+          ['test', './test']
+        ]
+      },
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx']
+      }
+    }
+  }
+}

jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  preset: 'ts-jest',
+  roots: ['src'],
+  moduleFileExtensions: ['js', 'ts', 'tsx', 'json'],
+  testPathIgnorePatterns: ['./node_modules/'],
+  setupFilesAfterEnv: [require.resolve('./test/jest.setup.ts')],
+  moduleNameMapper: {
+    'test/(.*)': '<rootDir>/test/$1'
+    // '^@components(.*)$': '<rootDir>/src/components$1',
+    // '^@constants(.*)$': '<rootDir>/src/constants$1'
+  },
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': 'ts-jest'
+  }
+}

package.json

@@ -20,8 +20,8 @@
     "test": "run-s test:unit test:lint test:build",
     "test:build": "run-s build",
     "test:lint": "eslint .",
-    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
-    "test:watch": "react-scripts test --env=jsdom",
+    "test:unit": "cross-env CI=1 jest --env=jsdom",
+    "test:watch": "cross-env CI=1 jest",
     "predeploy": "cd example && yarn install && yarn run build",
     "deploy": "gh-pages -d example/build",
     "lint:scss": "stylelint 'src/**/*.scss' --syntax scss",
@@ -48,13 +48,20 @@
     "react": "^16.0.0"
   },
   "devDependencies": {
-    "@types/jest": "^25.1.4",
+    "@babel/preset-env": "^7.10.2",
+    "@babel/preset-react": "^7.10.1",
+    "@babel/preset-typescript": "^7.10.1",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/jest": "^25.2.3",
     "@types/react": "^16.9.27",
     "@typescript-eslint/eslint-plugin": "^2.26.0",
     "@typescript-eslint/parser": "^2.26.0",
     "babel-eslint": "^10.0.3",
+    "babel-plugin-module-resolver": "^4.0.0",
     "concurrently": "^5.2.0",
     "cross-env": "^7.0.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.7.0",
     "eslint-config-standard": "^14.1.0",
@@ -68,6 +75,7 @@
     "eslint-plugin-standard": "^4.0.1",
     "gh-pages": "^2.2.0",
     "husky": "^4.2.5",
+    "jest": "^26.0.1",
     "lint-staged": "^10.2.4",
     "microbundle-crl": "^0.13.10",
     "npm-run-all": "^4.1.5",
@@ -76,16 +84,22 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "^3.4.1",
+    "react-test-renderer": "^16.13.1",
     "stylelint": "^13.5.0",
     "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-config-yoctol": "^4.0.1"
+    "stylelint-config-yoctol": "^4.0.1",
+    "ts-jest": "^26.1.0",
+    "typescript": "^3.9.5"
   },
   "files": [
     "dist"
   ],
   "dependencies": {
+    "@types/enzyme": "^3.10.5",
+    "@types/react-test-renderer": "^16.9.2",
     "@types/styled-components": "^5.1.0",
     "@types/styled-system": "^5.1.9",
+    "eslint-import-resolver-alias": "^1.1.2",
     "polished": "^3.6.4",
     "styled-components": "^5.1.0",
     "styled-normalize": "^8.0.7",

src/ExampleComponent/__tests__/ExampleComponent.spec.tsx

@@ -1,7 +1,19 @@
 import { ExampleComponent } from '..'
 
+import React from 'react'
+import { render } from 'test/utils'
+
 describe('ExampleComponent', () => {
-  it('is truthy', () => {
-    expect(ExampleComponent).toBeTruthy()
+  it('renders correctly', () => {
+    const exampleComponent = render(
+      <ExampleComponent
+        locale={{ welcome: 'locale overwrite' }}
+        mt='516px'
+        background='pink'
+        text='text'
+      />
+    )
+
+    expect(exampleComponent).toMatchSnapshot()
   })
 })

src/ExampleComponent/__tests__/__snapshots__/ExampleComponent.spec.tsx.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExampleComponent renders correctly 1`] = `
+<div
+  className="sc-AxjAm kEIyNd"
+>
+  locale overwrite
+   
+  text
+   
+  subText
+   
+</div>
+`;

src/UIProvider/index.ts

@@ -1,2 +1,3 @@
 export * from './UIProvider'
 export * from './locales'
+export * from './themes'

test/jest.setup.ts

@@ -0,0 +1,4 @@
+import { configure } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+configure({ adapter: new Adapter() })

test/utils.tsx

@@ -0,0 +1,11 @@
+import { UIProvider } from '../src'
+import defaultTheme, { ThemeType } from '../src/UIProvider/themes'
+
+import renderer from 'react-test-renderer'
+import React, { ReactChild } from 'react'
+
+const { light } = defaultTheme
+
+// Provides UI Context to tested components
+export const render = (node: ReactChild, theme: ThemeType = light) =>
+  renderer.create(<UIProvider theme={theme}>{node}</UIProvider>).toJSON()

tsconfig.json

@@ -23,7 +23,8 @@
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true
+    "noEmit": true,
+    "baseUrl": "."
   },
   "include": ["src"],
   "exclude": ["node_modules", "dist", "example"]