test: fix jest configuration (#27)

* test: add jest and react-renderer configuration

closes #26

* refactor: correct linter issues

* build: add coverage report

* style: attempt to predict and future-proof eslint and testing rules

.eslintrc.js

@@ -1,15 +1,44 @@
 process.env.NODE_ENV = 'development';
 
 module.exports = {
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
   extends: [
+    'plugin:jest/recommended',
+    'plugin:jest/style',
+    'plugin:jest-dom/recommended',
+    'plugin:testing-library/react',
+    'plugin:react/recommended',
     '@astronomer/eslint-config-astro',
   ],
+  plugins: [
+    'jest',
+    'jest-dom',
+    'testing-library',
+    'react',
+    'jsx-a11y',
+  ],
   ignorePatterns: [
     'build',
     'public',
     'stories',
   ],
   rules: {
     'no-restricted-globals': [1],
+    'jest/no-disabled-tests': 'warn',
+    'jest/no-focused-tests': 'error',
+    'jest/no-identical-title': 'error',
+    'jest/prefer-to-have-length': 'warn',
+    'jest/valid-expect': 'error',
+    'jest-dom/prefer-checked': 'error',
+    'jest-dom/prefer-enabled-disabled': 'error',
+    'jest-dom/prefer-required': 'error',
+    'jest-dom/prefer-to-have-attribute': 'error',
+    'testing-library/await-async-query': 'error',
+    'testing-library/no-await-sync-query': 'error',
+    'testing-library/no-dom-import': 'off',
   },
 };

__mocks__/babelTransform.js

@@ -0,0 +1,27 @@
+const babelJest = require('babel-jest').default;
+
+const hasJsxRuntime = (() => {
+  if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
+    return false;
+  }
+
+  try {
+    require.resolve('react/jsx-runtime');
+    return true;
+  } catch (e) {
+    return false;
+  }
+})();
+
+module.exports = babelJest.createTransformer({
+  presets: [
+    [
+      require.resolve('babel-preset-react-app'),
+      {
+        runtime: hasJsxRuntime ? 'automatic' : 'classic',
+      },
+    ],
+  ],
+  babelrc: false,
+  configFile: false,
+});

jest.config.cjs

@@ -0,0 +1,36 @@
+module.exports = {
+  "roots": [
+    "<rootDir>/src/"
+  ],
+  "testEnvironment": "jsdom",
+  "setupFilesAfterEnv": [
+    "<rootDir>/jest.setup.cjs"
+  ],
+  "transform": {
+    "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/__mocks__/babelTransform.js",
+  },
+  "transformIgnorePatterns": [
+    "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
+    "^.+\\.module\\.(css|sass|scss)$"
+  ],
+  "collectCoverageFrom": [
+    "src/**/*.{js,jsx,ts,tsx}",
+    "!<rootDir>/node_modules/",
+    "!src/**/*.d.ts"
+  ],
+  "coverageThreshold": {
+    "global": {
+      "branches": 30,
+      "functions": 30,
+      "lines": 30,
+      "statements": 30
+    }
+  },
+  "coverageReporters": [
+    "text",
+    "text-summary"
+  ],
+  "moduleNameMapper": {
+    "^.+\\.module\\.(css|sass|scss|less)$": "identity-obj-proxy",
+  },
+};

jest.setup.cjs

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom";