feat: update dependencies to latest and fix configs (#19)

* feat: update dependencies to latest and fix configs

This also closes several dependabot PRs

closes #14, closes #15, closes #16, closes #17, closes #18

* chore: update circleci executor to node v18 and fix test

This updates runner to use cimg/node:18.16.0-browsers

* chore: update circleci config

Author: rathpc

.circleci/config.yml

@@ -49,13 +49,15 @@ commands:
       - run:
           name: Run Jest and Collect Coverage
           command: yarn test:ci
+          environment:
+            JEST_JUNIT_OUTPUT_DIR: ./reports/
 
       - store_test_results:
-          path: coverage
+          path: ./reports/
 
       - store_artifacts:
           name: Store Code Coverage Results
-          path: coverage
+          path: ./coverage/
 
   # Command that checks out the code, installs dependencies and caches source/deps
   setup:
@@ -110,7 +112,7 @@ commands:
 executors:
   default:
     docker:
-      - image: cimg/node:14.16.1-browsers
+      - image: cimg/node:18.16.0-browsers
     environment:
       NODE_ENV: production
       NODE_OPTIONS: --max_old_space_size=8192

jest.config.js

@@ -13,12 +13,11 @@ module.exports = {
   collectCoverageFrom: ['src/**/*.{ts,tsx}'],
   coverageDirectory: 'coverage',
   coveragePathIgnorePatterns: ['/node_modules/'],
-  globals: { 'ts-jest': { babelConfig, tsconfig: resolvePath('tsconfig.json') } },
   preset: 'ts-jest/presets/js-with-babel',
-  reporters: ['default', ['jest-junit', { outputDirectory: './coverage', outputName: 'junit.xml' }]],
+  reporters: ['default', 'jest-junit'],
   restoreMocks: true,
   roots: ['<rootDir>/src'],
   setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect', '@testing-library/jest-dom'],
   testEnvironment: 'jsdom',
-  transform: { '^.+\\.tsx?$': 'ts-jest' },
+  transform: { '^.+\\.tsx?$': ['ts-jest', { babelConfig, tsconfig: resolvePath('tsconfig.json') }] },
 };

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rathpc/zendesk-react",
   "description": "A minimal component based implementation to include Zendesk in your React application",
-  "version": "0.3.0",
+  "version": "0.4.2",
   "private": false,
   "license": "MIT",
   "main": "dist/lib/index.js",
@@ -25,39 +25,40 @@
     "access": "public"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@babel/preset-env": "^7.14.7",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.14.5",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@types/jest": "^26.0.24",
-    "@types/react": "^17.0.14",
-    "@types/react-dom": "^17.0.9",
-    "@types/webpack": "^5.28.0",
-    "@typescript-eslint/eslint-plugin": "^4.28.2",
-    "@typescript-eslint/parser": "^4.28.2",
-    "babel-loader": "^8.2.2",
-    "eslint": "^7.30.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "jest": "^27.0.6",
-    "jest-junit": "^13.0.0",
-    "prettier": "^2.3.2",
-    "rimraf": "^3.0.2",
-    "ts-jest": "^27.0.3",
-    "typescript": "^4.3.5",
-    "webpack": "^5.44.0",
-    "webpack-cli": "^4.7.2"
+    "@babel/core": "^7.21.5",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.5",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.1",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.1",
+    "@types/webpack": "^5.28.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.1",
+    "@typescript-eslint/parser": "^5.59.1",
+    "babel-loader": "^9.1.2",
+    "eslint": "^8.39.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-junit": "^16.0.0",
+    "prettier": "^2.8.8",
+    "rimraf": "^5.0.0",
+    "ts-jest": "^29.1.0",
+    "typescript": "^5.0.4",
+    "webpack": "^5.81.0",
+    "webpack-cli": "^5.0.2"
   },
   "dependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "engines": {
-    "node": ">=12"
+    "node": ">=18"
   },
   "scripts": {
     "prebuild": "rimraf dist",

src/index.test.tsx

@@ -16,10 +16,6 @@ const mockedConsoleLog = (output: Console['log']) => consoleLogOutput.push(outpu
 const mockedConsoleWarn = (output: Console['warn']) => consoleWarnOutput.push(output);
 
 describe('index.ts', () => {
-  beforeAll(() => {
-    global.window = Object.create(window);
-  });
-
   beforeEach(() => {
     console.warn = mockedConsoleWarn;
     console.log = mockedConsoleLog;

src/index.ts

@@ -1,4 +1,4 @@
-import { FC, useEffect } from 'react';
+import { useEffect } from 'react';
 
 declare global {
   interface Window {
@@ -26,7 +26,7 @@ interface ZendeskProps {
   zendeskSettings?: Record<string, unknown>;
 }
 
-export const Zendesk: FC<ZendeskProps> = ({ defer, disabled, initCallback, zendeskKey, zendeskSettings = {} }) => {
+export const Zendesk = ({ defer, disabled, initCallback, zendeskKey, zendeskSettings = {} }: ZendeskProps) => {
   useEffect(() => {
     if (disabled || !zendeskKey) return;
 

tsconfig.json

@@ -13,9 +13,9 @@
     "noImplicitThis": true,
     "outDir": "dist/lib",
     "removeComments": true,
+    "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
-    "suppressImplicitAnyIndexErrors": true,
     "target": "es5",
     "tsBuildInfoFile": ".tsbuildinfo"
   },