fix(tests): move to jest as mocha was getting difficult with ts

Author: jafin

.mocharc.jsonc

@@ -0,0 +1,9 @@
+{
+  // Specify "require" for CommonJS
+  "require": "ts-node/register",
+  // Specify "loader" for native ESM
+  "loader": "ts-node/esm",
+  "extensions": ["ts", "tsx"],
+  "spec": ["test/**/*.spec.*"],
+  "watch-files": ["src"]
+}

jest.config.js

@@ -0,0 +1,28 @@
+module.exports = {
+  // The root of your source code, typically /src
+  // `<rootDir>` is a token Jest substitutes
+  roots: ['<rootDir>/test'],
+
+  // Jest transformations -- this adds support for TypeScript
+  // using ts-jest
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+    '^.+\\.scss$': 'jest-scss-transform'
+  },
+
+  // Runs special logic, such as cleaning up components
+  // when using React Testing Library and adds special
+  // extended assertions to Jest
+  setupFilesAfterEnv: [
+    // '@testing-library/react/cleanup-after-each',
+    '@testing-library/jest-dom/extend-expect'
+  ],
+
+  // Test spec file resolution pattern
+  // Matches parent folder `__tests__` and filename
+  // should contain `test` or `spec`.
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
+
+  // Module file extensions for importing
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
+};

package.json

@@ -14,7 +14,7 @@
     "eslint:fix": "npx eslint ./src/** --ignore-path ./.eslintignore --fix",
     "pretty:quick": "./node_modules/.bin/pretty-quick --staged",
     "lint:staged": "./node_modules/.bin/lint-staged",
-    "test:unit": "mocha --require @babel/register --require ignore-styles test/*.spec.js",
+    "test:unit": "jest",
     "clean": "rimraf dist",
     "copyfiles": "copyfiles ./src/**/*.scss out-tsc/",
     "build:rollup": "tsc && yarn copyfiles && yarn rollup -c",
@@ -59,17 +59,23 @@
   "dependencies": {
     "@open-wc/building-rollup": "^2.0.1",
     "@rollup/plugin-typescript": "^8.3.1",
+    "@testing-library/jest-dom": "^5.16.3",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^17.0.23",
     "@types/prop-types": "^15.7.4",
     "@types/react": "^17.0.43",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",
     "copyfiles": "^2.4.1",
     "deepmerge": "^4.2.2",
     "eslint-plugin-react-hooks": "^4.4.0",
+    "jest": "^27.5.1",
     "postcss": "^8.4.12",
     "prop-types": "^15.7.2",
     "rollup-plugin-css": "^1.0.10",
     "rollup-plugin-terser": "^7.0.2",
+    "ts-jest": "^27.1.4",
+    "ts-node": "^10.7.0",
     "typescript": "^4.6.3",
     "uuid": "^8.3.2"
   },
@@ -98,7 +104,9 @@
     "@semantic-release/npm": "^7.0.5",
     "@semantic-release/release-notes-generator": "^9.0.1",
     "@svgr/rollup": "6.2.1",
-    "@testing-library/react": "12.1.4",
+    "@testing-library/react": "12",
+    "@types/expect": "^24.3.0",
+    "@types/mocha": "^9.1.0",
     "babel-loader": "8.2.4",
     "babelify": "10.0.0",
     "browserify": "17.0.0",
@@ -124,7 +132,9 @@
     "github-changes": "^1.1.2",
     "http-server": "14.1.0",
     "husky": "^3.1.0",
+    "identity-obj-proxy": "^3.0.0",
     "ignore-styles": "5.0.1",
+    "jest-scss-transform": "^1.0.1",
     "jsdom": "19.0.0",
     "lint-staged": "12.3.7",
     "mocha": "9.2.2",
@@ -138,6 +148,7 @@
     "react": "17",
     "react-addons-test-utils": "^15.1.0",
     "react-dom": "17",
+    "react-test-renderer": "17",
     "rimraf": "^3.0.0",
     "rollup": "2.70.1",
     "rollup-plugin-babel": "^4.3.3",
@@ -153,6 +164,7 @@
     "stylelint": "^14.6.1",
     "stylelint-config-standard": "25.0.0",
     "stylelint-config-standard-scss": "^3.0.0",
+    "ts-mocha": "^9.0.2",
     "uglifyjs": "^2.4.10",
     "watchify": "4.0.0"
   },

src/ReactTooltip.tsx

@@ -746,8 +746,6 @@ class ReactTooltip extends React.Component<ReactTooltipProps, TooltipState> {
         this.props.delayUpdate
       : 0;
 
-    //const self = this;
-
     const updateState = () => {
       this.setState(
         {

test/index.spec.tsx

@@ -1,17 +1,16 @@
+/**
+ * @jest-environment jsdom
+ */
 import React from 'react';
 import ReactTooltip from '../src/index';
 import { render, cleanup } from '@testing-library/react';
-import { expect } from 'chai';
 import forEach from 'mocha-each';
-import jsdom from 'mocha-jsdom';
 
 afterEach(() => {
   cleanup();
 });
 
 describe('Tooltip', () => {
-  jsdom({ url: 'http://localhost/' });
-
   forEach([
     [
       { textColor: 'green', backgroundColor: 'red', arrowColor: 'blue' },
@@ -184,7 +183,7 @@ describe('Tooltip', () => {
 
     const tooltip = document.getElementById('colorSpec');
 
-    expect(tooltip.className).to.match(
+    expect(tooltip.className).toMatch(
       new RegExp(
         '__react_component_tooltip [a-zA-Z0-9-]+ show' +
           (props.border ? ' border ' : ' ') +
@@ -193,27 +192,30 @@ describe('Tooltip', () => {
         'i'
       )
     );
-
     const uuid = tooltip.className.split(' ')[1];
-    const cssRules = tooltip.firstElementChild.sheet.cssRules;
+    // TODO: incorrect type...
+    const cssRules = (tooltip.firstElementChild as any).sheet.cssRules;
     const mainCssRule = cssRules.find(
       (rule) => rule.selectorText === `.${uuid}`
     ).style;
 
-    expect(mainCssRule.color, 'Text color').to.equal(res.textColor);
-    expect(mainCssRule.background, 'Background color').to.equal(res.background);
-    expect(mainCssRule.border, 'Border color').to.equal(
+    // 'Text color'
+    expect(mainCssRule.color).toBe(res.textColor);
+    // 'Background color'
+    expect(mainCssRule.background).toBe(res.background);
+    // 'Border color'
+    expect(mainCssRule.border).toBe(
       '1px solid ' + (res.borderColor ? res.borderColor : 'transparent')
     );
 
     const arrowPositions = ['top', 'bottom', 'left', 'right'];
     arrowPositions.forEach((pos) => {
+      // pos + ' arrow color'
       expect(
         cssRules.find(
           (rule) => rule.selectorText === `.${uuid}.place-${pos}::after`
-        ).style[`border-${pos}-color`],
-        pos + ' arrow color'
-      ).to.equal(res.arrowColor ? res.arrowColor : res.background);
+        ).style[`border-${pos}-color`]
+      ).toBe(res.arrowColor ? res.arrowColor : res.background);
     });
   });
 });

tsconfig.json

@@ -5,7 +5,7 @@
     "outDir": "./out-tsc",
     "allowJs": true,
     "target": "es2018",
-    "module": "ESNext",
+    "module": "ESNext", //ESNext breaks mocha
     "moduleResolution": "node",
     "noImplicitAny": false,
     "noEmitOnError": true,