Setup Testing

.eslintrc.json

@@ -2,7 +2,8 @@
   "env": {
     "browser": true,
     "es2022": true,
-    "node": true
+    "node": true,
+    "jest/globals": true
   },
   "extends": [
     "eslint:recommended",
@@ -14,7 +15,7 @@
     "prettier"
   ],
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "react-hooks", "prettier"],
+  "plugins": ["@typescript-eslint", "react-hooks", "prettier", "jest"],
   "settings": {
     "react": {
       "version": "detect"

.gitignore

@@ -3,6 +3,9 @@ node_modules
 packages/**/*/generated
 packages/nextjs/**
 
+# testing
+coverage
+
 # parcel
 .parcel-cache
 dist

package.json

@@ -15,7 +15,7 @@
     "lint": "turbo run lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "release": "propel-release",
-    "test": "echo 'No tests yet'",
+    "test": "yarn workspaces foreach run test",
     "postinstall": "husky install",
     "commit": "cz",
     "storybook": "yarn workspace ui-kit-storybook storybook",
@@ -44,6 +44,7 @@
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-jest": "^27.2.2",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.24.0",

packages/core/components/package.json

@@ -16,6 +16,8 @@
   },
   "devDependencies": {
     "parcel": "^2.8.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^4.9.3"
   },
   "peerDependencies": {

packages/core/graphql/package.json

@@ -22,14 +22,18 @@
     "graphql-request": "^6.1.0"
   },
   "peerDependencies": {
-    "graphql": "^16.6"
+    "graphql": "^16.6",
+    "react": "^16.8 || ^17 || ^18",
+    "react-dom": "^16.8 || ^17 || ^18"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^4.0.1",
     "@graphql-codegen/typescript": "^4.0.1",
     "@graphql-codegen/typescript-operations": "^4.0.1",
     "@graphql-codegen/typescript-react-query": "^4.1.0",
     "parcel": "^2.8.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^4.9.4"
   }
 }

packages/react/counter/jest-environment-jsdom.cjs

@@ -0,0 +1,18 @@
+'use strict'
+
+const { TextEncoder, TextDecoder } = require('util')
+const OriginalJSDOMEnvironment = require('jest-environment-jsdom')
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+})
+
+class JSDOMEnvironment extends OriginalJSDOMEnvironment {
+  constructor (...args) {
+    const { global } = super(...args)
+    if (!global.TextEncoder) global.TextEncoder = TextEncoder
+    if (!global.TextDecoder) global.TextDecoder = TextDecoder
+  }
+}
+
+exports.default = JSDOMEnvironment

packages/react/counter/jest.config.js

@@ -0,0 +1,36 @@
+/**
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+/** @type {import('jest').Config} */
+const config = {
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'jsx'],
+  rootDir: '.',
+  roots: ['<rootDir>'],
+  moduleNameMapper: {
+    '@/testing/(.*)': '<rootDir>/testing/$1',
+    '@/testing': '<rootDir>/testing',
+    '@/counter/(.*)': '<rootDir>/src/(.*)',
+    '@/counter': '<rootDir>/src'
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  testEnvironment: './jest-environment-jsdom.cjs',
+  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(ts|tsx)$'],
+  transform: {
+    '^.+\\.(js|ts|tsx)$': [
+      '@swc/jest',
+      {
+        jsc: {
+          transform: {
+            react: {
+              runtime: 'automatic'
+            }
+          }
+        }
+      }
+    ]
+  }
+}
+
+module.exports = config

packages/react/counter/jest.setup.js

@@ -0,0 +1,21 @@
+// Optional: configure or set up a testing framework before each test.
+// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
+
+// Used for __tests__/testing-library.js
+// Learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect'
+
+import { server } from './testing/mocks/server'
+
+process.env.NEXT_PUBLIC_ACCOUNT_MANAGEMENT_GRAPHQL_ENDPOINT ??= 'http://localhost:3000/in/graphql'
+process.env.NEXT_PUBLIC_CONFIG_MANAGEMENT_GRAPHQL_ENDPOINT ??= 'http://localhost:3000/graphql'
+
+// Establish API mocking before all tests.
+beforeAll(() => server.listen())
+
+// Reset any request handlers that we may add during the tests,
+// so they don't affect other tests.
+afterEach(() => server.resetHandlers())
+
+// Clean up after the tests are finished.
+afterAll(() => server.close())

packages/react/counter/package.json

@@ -8,7 +8,9 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "dev": "parcel watch",
-    "build": "parcel build"
+    "build": "parcel build",
+    "test": "jest",
+    "test:coverage": "jest --ci --coverage --json --outputFile=coverage/coverage.json"
   },
   "publishConfig": {
     "access": "public",
@@ -23,7 +25,21 @@
     "graphql-request": "^6.1.0"
   },
   "devDependencies": {
+    "@swc/core": "^1.3.68",
+    "@swc/jest": "^0.2.26",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^27.5.1",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "@types/testing-library__jest-dom": "^5.14.7",
+    "jest": "^27.5.1",
+    "jest-environment-jsdom": "^27.5.1",
+    "msw": "^1.2.2",
     "parcel": "^2.8.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^4.9.3"
   },
   "peerDependencies": {

packages/react/counter/src/__test__/Counter.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { Counter, RelativeTimeRange } from '@/counter'
+import { Dom } from '@/testing'
+
+import { setupHandlers } from './mswHandlers'
+import { counter } from './mockData'
+
+describe('Counter', () => {
+  let dom: Dom
+
+  beforeEach(() => {
+    setupHandlers()
+  })
+
+  it('should render a static counter', async () => {
+    dom = render(<Counter value={counter.value} />)
+
+    await dom.findByText(counter.value)
+  })
+
+  it('should show value from server', async () => {
+    dom = render(
+      <Counter
+        query={{
+          metric: 'test-metric',
+          accessToken: 'test-token',
+          timeRange: { relative: RelativeTimeRange.LastNDays, n: 30 }
+        }}
+      />
+    )
+
+    await dom.findByText(counter.value)
+  })
+})

packages/react/counter/src/__test__/mockData.ts

@@ -0,0 +1,3 @@
+export const counter = {
+  value: '123'
+}

packages/react/counter/src/__test__/mswHandlers.ts

@@ -0,0 +1,19 @@
+import { graphql } from 'msw'
+
+import { server } from '@/testing/mocks/server'
+
+import { counter } from './mockData'
+
+const handlers = [
+  graphql.query('Counter', (req, res, ctx) => {
+    return res(
+      ctx.data({
+        counter
+      })
+    )
+  })
+]
+
+export const setupHandlers = () => {
+  server.use(...handlers)
+}

packages/react/counter/testing/index.ts

@@ -0,0 +1,6 @@
+import { render } from '@testing-library/react'
+
+/**
+ * This is a convenience type for referring to the result of calling `render`.
+ */
+export type Dom = ReturnType<typeof render>

packages/react/counter/testing/mocks/server.ts

@@ -0,0 +1,3 @@
+import { setupServer } from 'msw/node'
+
+export const server = setupServer()

packages/react/counter/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "jsx": "preserve",
+    "target": "es2016",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/testing/*": ["testing/*"],
+      "@/testing": ["testing"],
+      "@/counter": ["src"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", "./jest.config.js", "./jest.setup.js"],
+  "exclude": ["node_modules"]
+}

packages/react/leaderboard/jest-environment-jsdom.cjs

@@ -0,0 +1,18 @@
+'use strict'
+
+const { TextEncoder, TextDecoder } = require('util')
+const OriginalJSDOMEnvironment = require('jest-environment-jsdom')
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+})
+
+class JSDOMEnvironment extends OriginalJSDOMEnvironment {
+  constructor (...args) {
+    const { global } = super(...args)
+    if (!global.TextEncoder) global.TextEncoder = TextEncoder
+    if (!global.TextDecoder) global.TextDecoder = TextDecoder
+  }
+}
+
+exports.default = JSDOMEnvironment

packages/react/leaderboard/jest.config.js

@@ -0,0 +1,36 @@
+/**
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+/** @type {import('jest').Config} */
+const config = {
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'jsx'],
+  rootDir: '.',
+  roots: ['<rootDir>'],
+  moduleNameMapper: {
+    '@/testing/(.*)': '<rootDir>/testing/$1',
+    '@/testing': '<rootDir>/testing',
+    '@/leaderboard/(.*)': '<rootDir>/src/(.*)',
+    '@/leaderboard': '<rootDir>/src'
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js', 'jest-canvas-mock'],
+  testEnvironment: './jest-environment-jsdom.cjs',
+  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(ts|tsx)$'],
+  transform: {
+    '^.+\\.(js|ts|tsx)$': [
+      '@swc/jest',
+      {
+        jsc: {
+          transform: {
+            react: {
+              runtime: 'automatic'
+            }
+          }
+        }
+      }
+    ]
+  }
+}
+
+module.exports = config

packages/react/leaderboard/jest.setup.js

@@ -0,0 +1,26 @@
+// Optional: configure or set up a testing framework before each test.
+// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
+
+// Used for __tests__/testing-library.js
+// Learn more: https://github.com/testing-library/jest-dom
+import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer'
+
+import '@testing-library/jest-dom/extend-expect'
+
+import { server } from './testing/mocks/server'
+
+process.env.NEXT_PUBLIC_ACCOUNT_MANAGEMENT_GRAPHQL_ENDPOINT ??= 'http://localhost:3000/in/graphql'
+process.env.NEXT_PUBLIC_CONFIG_MANAGEMENT_GRAPHQL_ENDPOINT ??= 'http://localhost:3000/graphql'
+
+// Establish API mocking before all tests.
+beforeAll(() => {
+  window.ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill
+  server.listen()
+})
+
+// Reset any request handlers that we may add during the tests,
+// so they don't affect other tests.
+afterEach(() => server.resetHandlers())
+
+// Clean up after the tests are finished.
+afterAll(() => server.close())

packages/react/leaderboard/package.json

@@ -8,7 +8,9 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "dev": "parcel watch",
-    "build": "parcel build"
+    "build": "parcel build",
+    "test": "jest",
+    "test:coverage": "jest --ci --coverage --json --outputFile=coverage/coverage.json"
   },
   "publishConfig": {
     "access": "public",
@@ -24,7 +26,23 @@
     "graphql-request": "^6.1.0"
   },
   "devDependencies": {
+    "@juggle/resize-observer": "^3.4.0",
+    "@swc/core": "^1.3.68",
+    "@swc/jest": "^0.2.26",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^27.5.1",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "@types/testing-library__jest-dom": "^5.14.7",
+    "jest": "^27.5.1",
+    "jest-canvas-mock": "^2.5.2",
+    "jest-environment-jsdom": "^27.5.1",
+    "msw": "^1.2.2",
     "parcel": "^2.8.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^4.9.3"
   },
   "peerDependencies": {