testing

packages/core/package.json

@@ -14,12 +14,14 @@
     "rollup": "rollup -c=../../rollup.config.js",
     "clean": "rimraf dist tsconfig.tsbuildinfo",
     "watch": "webpack serve --mode development",
-    "test": "BABEL_JEST_STAGE=0 jest",
+    "testtt": "BABEL_JEST_STAGE=0 jest",
+    "test": "jest --env=jsdom",
     "prepublish": "npm run build",
     "lint": "eslint 'src/**/*.{ts,tsx,js}' '__tests__/**/*.{ts,tsx,js}'",
     "fix": "eslint 'src/**/*.{ts,tsx,js}' '__tests__/**/*.{ts,tsx,js}' --fix",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "test:generate-output": "jest --json --outputFile=.jest-test-results.json"
   },
   "keywords": [
     "rich-text",
@@ -38,13 +40,16 @@
     "url": "https://github.com"
   },
   "jest": {
+    "roots": [
+      "<rootDir>/src"
+    ],
     "unmockedModulePathPatterns": [
       "<rootDir>/node_modules/react",
       "<rootDir>/node_modules/react-dom",
       "<rootDir>/node_modules/react-addons-test-utils"
     ],
     "transform": {
-      "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
+      "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
     },
     "moduleFileExtensions": [
       "js",
@@ -59,6 +64,7 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
+    "ts-jest": "^27.0.5",
     "@hot-loader/react-dom": "16.12.0",
     "@types/emoji-mart": "^3.0.4",
     "@types/flux": "^3.1.9",
@@ -80,7 +86,12 @@
     "@storybook/addon-actions": "^6.3.6",
     "@storybook/addon-essentials": "^6.3.6",
     "@storybook/addon-links": "^6.3.6",
-    "@storybook/react": "^6.3.6"
+    "@storybook/react": "^6.3.6",
+    "@storybook/testing-react": "0.0.22",
+    "@testing-library/react": "12.0.0",
+    "@testing-library/jest-dom": "5.14.1",
+    "@storybook/addon-jest": "^6.3.7",
+    "jest": "^27.0.6"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",

packages/core/src/stories/BasicExample.stories.tsx

@@ -16,22 +16,11 @@ const Template = args => <BasicExample {...args} />
 export const Primary = Template.bind({})
 Primary.args = {
   primary: true,
-  label: 'Button'
+  label: 'Editor',
+  count: BasicExample.charCount
 }
 
 export const Secondary = Template.bind({})
 Secondary.args = {
   label: 'Button'
 }
-
-export const Large = Template.bind({})
-Large.args = {
-  size: 'large',
-  label: 'Button'
-}
-
-export const Small = Template.bind({})
-Small.args = {
-  size: 'small',
-  label: 'Button'
-}

packages/core/src/stories/BasicExample.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {render} from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+
+import {Primary} from './BasicExample.stories'
+
+test('renders the button in the primary state', () => {
+  render(<Primary {...Primary.args} />)
+  // expect(screen.getByRole('button')).toHaveTextContent('Button');
+  expect(Primary.args.label).toBe('Editor')
+})
+
+test('shows the correct character count', () => {
+    render(<Primary {...Primary.args} />);
+    expect(Primary.args.count).toBe(4);
+});

packages/core/src/stories/BasicExample.tsx

@@ -26,6 +26,8 @@ export const BasicExample = () => {
   )
 }
 
+BasicExample.charCount = value.length
+
 BasicExample.propTypes = {
   /**
    * BasicExample contents