test(config): Configuration jest

.eslintrc

@@ -41,6 +41,7 @@
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
     "@typescript-eslint/no-non-null-assertion": "off",
-    "no-dupe-class-members": "off"
+    "no-dupe-class-members": "off",
+    "@typescript-eslint/no-var-requires": "off"
   }
 }

jest.config.base..js

@@ -0,0 +1,24 @@
+module.exports = {
+  transform: {
+    '^.+\\.(js|jsx|mjs)$': 'babel-jest',
+    '.(ts|tsx)': 'ts-jest'
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  modulePathIgnorePatterns: ['node_modules', 'build'],
+  testEnvironment: 'node',
+  testPathIgnorePatterns: ['node_modules', 'build'],
+  testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$',
+  coveragePathIgnorePatterns: ['node_modules', 'build'],
+  coverageThreshold: {
+    global: {
+      branches: 90,
+      functions: 95,
+      lines: 95,
+      statements: 95
+    }
+  },
+  collectCoverageFrom: ['**/*.{ts,tsx}', '!**/node_modules/**'],
+  coverageDirectory: '<rootDir>/coverage/',
+  collectCoverage: true,
+  verbose: true
+}

jest.config.js

@@ -0,0 +1,9 @@
+const path = require('path')
+const base = require('./jest.config.base.js')
+
+module.exports = {
+  ...base,
+  rootDir: path.resolve(__dirname, './'),
+  projects: ['<rootDir>/packages/*/jest.config.js'],
+  coverageDirectory: '<rootDir>/coverage/'
+}

package.json

@@ -9,21 +9,32 @@
     "start": "lerna run start --parallel",
     "build": "lerna run build",
     "test": "lerna run test",
+    "test:watch": "lerna run test:watch",
     "release": "lerna publish --force-publish @fluent-ui/core"
   },
   "devDependencies": {
+    "@types/jest": "^24.0.15",
+    "@types/react-test-renderer": "^16.8.2",
     "@typescript-eslint/eslint-plugin": "^1.9.0",
     "@typescript-eslint/parser": "^1.9.0",
+    "babel-jest": "^24.8.0",
+    "codecov": "^3.5.0",
     "commitizen": "^3.1.1",
     "eslint": "^5.16.0",
     "eslint-config-prettier": "^4.3.0",
+    "eslint-plugin-jest": "^22.7.1",
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "^7.13.0",
     "eslint-plugin-react-hooks": "^1.6.0",
     "husky": "^2.4.0",
+    "jest": "^24.8.0",
+    "jest-config": "^24.8.0",
+    "jest-styled-components": "^6.3.3",
     "lerna": "^3.14.1",
     "lint-staged": "^8.1.7",
     "prettier": "^1.17.1",
+    "react-test-renderer": "^16.8.6",
+    "ts-jest": "^24.0.2",
     "typescript": "^3.4.5"
   },
   "config": {

packages/fluent-ui-icons/jest.config.js

@@ -0,0 +1,11 @@
+const path = require('path')
+
+const base = require('../../jest.config.base.')
+const pack = require('./package.json')
+
+module.exports = {
+  ...base,
+  rootDir: path.resolve(__dirname, './'),
+  name: pack.name,
+  displayName: pack.name
+}

packages/fluent-ui-icons/package.json

@@ -30,7 +30,10 @@
     "build:cjs": "cross-env NODE_ENV=production tsc --module CommonJS --outDir ./build/cjs",
     "build:es": "cross-env NODE_ENV=production tsc --module ES6 --outDir ./build/es",
     "build:umd": "cross-env NODE_ENV=production tsc --module UMD --outDir ./build/umd",
-    "start": "cross-env NODE_ENV=production tsc -w --module ES6 --outDir ./build/es"
+    "start": "cross-env NODE_ENV=production tsc -w --module ES6 --outDir ./build/es",
+    "test": "jest --coverage",
+    "test:watch": "jest --coverage --watch",
+    "test:prod": "yarn test -- --no-cache"
   },
   "peerDependencies": {
     "react": ">= 16.8.0",

packages/fluent-ui-icons/src/Icon.tsx

@@ -1,4 +1,5 @@
-import React, { forwardRef, ReactElement, Ref } from 'react'
+import * as React from 'react'
+import { forwardRef, ReactElement, Ref } from 'react'
 import styled from 'styled-components'
 import * as Icons from './element'
 import { omit } from './utils'

packages/fluent-ui.com/src/components/header.tsx

@@ -1,5 +1,6 @@
-import React, { ReactElement } from 'react'
-import PropTypes from 'prop-types'
+import * as React from 'react'
+import { ReactElement } from 'react'
+import * as PropTypes from 'prop-types'
 import { Command, CommandButton } from '@fluent-ui/core'
 
 const Header = ({ siteTitle }): ReactElement => (

packages/fluent-ui.com/src/components/layout.tsx

@@ -1,4 +1,5 @@
-import React, { ReactElement, SFC, ReactNode } from 'react'
+import * as React from 'react'
+import { ReactElement, SFC, ReactNode } from 'react'
 
 import { ThemeProvider, Theme, Box } from '@fluent-ui/core'
 

packages/fluent-ui.com/src/components/playground.tsx

@@ -1,4 +1,5 @@
-import React, { ReactElement, SFC } from 'react'
+import * as React from 'react'
+import { ReactElement, SFC } from 'react'
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
 import * as Fluent from '@fluent-ui/core'
 import * as Icon from '@fluent-ui/icons'

packages/fluent-ui.com/src/components/seo.tsx

@@ -4,8 +4,8 @@
  *
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
-
-import React, { ReactElement, SFC } from 'react'
+import * as React from 'react'
+import { ReactElement, SFC } from 'react'
 import Helmet from 'react-helmet'
 import { useStaticQuery, graphql } from 'gatsby'
 

packages/fluent-ui.com/src/components/template.tsx

@@ -1,4 +1,5 @@
-import React, { ReactElement, SFC, useState } from 'react'
+import * as React from 'react'
+import { ReactElement, SFC, useState } from 'react'
 import { graphql, navigate } from 'gatsby'
 import Markdown from 'markdown-to-jsx'
 import { Box, Navigation } from '@fluent-ui/core'

packages/fluent-ui.com/src/docs/components/Command/README.md

@@ -33,9 +33,9 @@ components: Command
 ```jsx
 <Box padding="6em 8em" background="url(https://i.loli.net/2019/06/08/5cfb6d5a7456419123.jpg) center/cover">
   <Command reveal>
-    <CommandButton icon="Back" className='btn2' />
-    <CommandButton icon="Play" className='btn2' />
-    <CommandButton icon="Forward" className='btn2' />
+    <CommandButton icon="Back" />
+    <CommandButton icon="Play" />
+    <CommandButton icon="Forward" />
 
     <Command.Content>
       Now Playing...

packages/fluent-ui.com/src/docs/components/Icon/template.tsx

@@ -1,4 +1,5 @@
-import React, { ReactElement } from 'react'
+import * as React from 'react'
+import { ReactElement } from 'react'
 import styled from 'styled-components'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 

packages/fluent-ui.com/src/pages/404.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import Layout from '../components/layout'
 import SEO from '../components/seo'

packages/fluent-ui.com/src/pages/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import Layout from '../components/layout'
 import SEO from '../components/seo'

packages/fluent-ui/jest.config.js

@@ -0,0 +1,11 @@
+const path = require('path')
+
+const base = require('../../jest.config.base.')
+const pack = require('./package.json')
+
+module.exports = {
+  ...base,
+  rootDir: path.resolve(__dirname, './'),
+  name: pack.name,
+  displayName: pack.name
+}

packages/fluent-ui/package.json

@@ -46,49 +46,14 @@
     "normalize.css": "^8.0.1"
   },
   "devDependencies": {
-    "@types/jest": "^23.3.2",
     "@types/node": "^10.11.0",
     "@types/react": "^16.8.19",
     "@types/react-dom": "^16.8.4",
     "@types/styled-components": "4.1.8",
-    "codecov": "^3.5.0",
     "cross-env": "^5.2.0",
     "csstype": "^2.6.5",
-    "eslint-plugin-jest": "^22.6.4",
-    "jest": "^23.6.0",
-    "jest-config": "^23.6.0",
     "rimraf": "^2.6.2",
-    "styled-components": "^4.3.0",
-    "ts-jest": "^23.10.2"
-  },
-  "jest": {
-    "transform": {
-      ".(ts|tsx)": "ts-jest"
-    },
-    "testEnvironment": "node",
-    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js"
-    ],
-    "coveragePathIgnorePatterns": [
-      "/node_modules/",
-      "/test/"
-    ],
-    "coverageThreshold": {
-      "global": {
-        "branches": 90,
-        "functions": 95,
-        "lines": 95,
-        "statements": 95
-      }
-    },
-    "collectCoverageFrom": [
-      "src/*.{js,ts}"
-    ],
-    "coverageDirectory": "./coverage/",
-    "collectCoverage": true
+    "styled-components": "^4.3.0"
   },
   "commitlint": {
     "extends": [

packages/fluent-ui/src/components/Box/Box.tsx

@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
   ReactElement,
   forwardRef,
   ReactNode,

packages/fluent-ui/src/components/Box/__tests__/Box.test.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import * as renderer from 'react-test-renderer'
+import 'jest-styled-components'
+
+import { ThemeProvider, Box } from '../../..'
+
+describe('Box', (): void => {
+  const theme = {}
+  test('basic', (): void => {
+    const component = renderer.create(
+      <ThemeProvider theme={theme}>
+        <Box>basic</Box>
+      </ThemeProvider>
+    )
+    const tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  test('as', (): void => {
+    const component = renderer.create(
+      <ThemeProvider theme={theme}>
+        <Box as="span">as span</Box>
+      </ThemeProvider>
+    )
+    const tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

packages/fluent-ui/src/components/Box/__tests__/__snapshots__/Box.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Box as 1`] = `
+<span
+  className="sc-bdVaJa "
+>
+  as span
+</span>
+`;
+
+exports[`Box basic 1`] = `
+<div
+  className="sc-bdVaJa "
+>
+  basic
+</div>
+`;

packages/fluent-ui/src/components/Button/Button.tsx

@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
   ReactElement,
   forwardRef,
   ReactNode,

packages/fluent-ui/src/components/Button/__tests__/Button.test.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react'
+import * as renderer from 'react-test-renderer'
+import 'jest-styled-components'
+
+import { ThemeProvider, Button } from '../../..'
+import { findAllByType } from '../../../utils'
+
+describe('Button', (): void => {
+  const theme = {}
+  test('basic', (): void => {
+    const component = renderer.create(
+      <ThemeProvider theme={theme}>
+        <Button>basic</Button>
+      </ThemeProvider>
+    )
+    const tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  test('variant', (): void => {
+    const component = renderer.create(
+      <ThemeProvider theme={theme}>
+        <Button variant="primary">primary</Button>
+        <Button variant="accent">accent</Button>
+      </ThemeProvider>
+    )
+    const tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  test('disabled', (): void => {
+    const component = renderer.create(
+      <ThemeProvider theme={theme}>
+        <Button disabled>disabled</Button>
+      </ThemeProvider>
+    )
+    const tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  test('size', (): void => {
+    const component = renderer.create(
+      <ThemeProvider theme={theme}>
+        <Button size="small">small</Button>
+        <Button size="medium">medium</Button>
+        <Button size="large">large</Button>
+      </ThemeProvider>
+    )
+    const tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  test('onClick', (): void => {
+    const onClick = jest.fn()
+    const component = renderer.create(
+      <ThemeProvider theme={theme}>
+        <Button onClick={onClick}>onClick</Button>
+      </ThemeProvider>
+    )
+    const tree = component.toJSON()
+
+    const button = findAllByType(tree, 'button')
+    button[0].props.onClick()
+    expect(onClick).toHaveBeenCalled()
+  })
+
+  test('as', (): void => {
+    const component = renderer.create(
+      <ThemeProvider theme={theme}>
+        <Button as="a" href="#">
+          as a
+        </Button>
+      </ThemeProvider>
+    )
+    const tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})