chore: prepare React upgrade to 17.0.2 (WIP)

.nvmrc

@@ -0,0 +1 @@
+12

package.json

@@ -4,6 +4,8 @@
   "license": "BSD-3-Clause",
   "devDependencies": {
     "@babel/preset-flow": "^7.0.0",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.5.0",
     "babel-cli": "^6.24.1",
     "babel-eslint": "^8.2.6",
     "babel-jest": "^22.4.4",
@@ -36,8 +38,10 @@
     "flow-bin": "0.66",
     "forever": "^0.15.3",
     "is-html": "^1.1.0",
+    "jest": "^22.4.3",
     "lint-staged": "^3.3.0",
     "micromatch": "^3.0.4",
+    "msw": "^0.35.0",
     "prettier": "^1.14.3",
     "raw-loader": "^0.5.1",
     "react-app-rewire-hot-loader": "^1.0.3",
@@ -48,6 +52,7 @@
     "uuid": "^3.0.1",
     "wait-on": "^2.1.0",
     "webpack-bundle-analyzer": "^3.3.2",
+    "whatwg-fetch": "^3.6.2",
     "write-file-webpack-plugin": "^4.5.1"
   },
   "dependencies": {
@@ -129,7 +134,6 @@
     "imgix-core-js": "^1.0.6",
     "ioredis": "3.2.2",
     "isomorphic-fetch": "^2.2.1",
-    "jest": "22.4.3",
     "json-stringify-pretty-compact": "^1.2.0",
     "jsonwebtoken": "^8.3.0",
     "keygrip": "^1.0.3",

regression-tests/__tests__/button.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Button } from '../../src/components/button';
+
+describe('Button component regression', () => {
+  it('renders children and respects disabled/isLoading', () => {
+    render(<Button isLoading>Click me</Button>);
+    const btn = screen.getByText('Click me');
+    expect(btn).toBeInTheDocument();
+    expect(btn.closest('button')).toBeDisabled();
+  });
+
+  it('wraps with anchor when href provided', () => {
+    render(
+      <Button href="https://example.com" target="_self">
+        Visit
+      </Button>
+    );
+    const link = screen.getByText('Visit').closest('a');
+    expect(link).toHaveAttribute('href', 'https://example.com');
+    expect(link).toHaveAttribute('target', '_self');
+  });
+});

regression-tests/button.test.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Button } from '../src/components/button';
+
+describe('Button component regression', () => {
+  it('renders children and respects disabled/isLoading', () => {
+    render(<Button isLoading>Click me</Button>);
+    const btn = screen.getByText('Click me');
+    // Button text should be present
+    expect(btn).toBeInTheDocument();
+    // isLoading should disable the button
+    expect(btn.closest('button')).toBeDisabled();
+  });
+
+  it('wraps with anchor when href provided', () => {
+    render(
+      <Button href="https://example.com" target="_self">
+        Visit
+      </Button>
+    );
+    const link = screen.getByText('Visit').closest('a');
+    expect(link).toHaveAttribute('href', 'https://example.com');
+    expect(link).toHaveAttribute('target', '_self');
+  });
+});

regression-tests/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

regression-tests/jest.config.js

@@ -0,0 +1,16 @@
+const path = require('path');
+module.exports = {
+  testEnvironment: 'jsdom',
+  setupTestFrameworkScriptFile: path.resolve(__dirname, 'setupTests.js'),
+  testRegex: '.*\\.test\\.js$',
+  moduleFileExtensions: ['js', 'jsx', 'json'],
+  transform: {
+    '^.+\\.(js|jsx)$': 'babel-jest',
+  },
+  moduleNameMapper: {
+    '^react-dom$': '@hot-loader/react-dom',
+    '\\.(css|less|scss)$': '<rootDir>/regression-tests/styleMock.js',
+    '\\.(svg|png|jpg|jpeg|gif)$': '<rootDir>/regression-tests/fileMock.js',
+  },
+  roots: ['<rootDir>/regression-tests'],
+};

regression-tests/setupTests.js

@@ -0,0 +1,14 @@
+// Setup for React Testing Library and MSW
+import '@testing-library/jest-dom/extend-expect';
+import 'whatwg-fetch';
+import { server } from './testServer';
+
+// Establish API mocking before all tests.
+beforeAll(() => server.listen());
+
+// Reset any request handlers that are declared as a part of our tests
+// (i.e. for testing one-time error scenarios)
+afterEach(() => server.resetHandlers());
+
+// Clean up after the tests are finished.
+afterAll(() => server.close());

regression-tests/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

regression-tests/testHandlers.js

@@ -0,0 +1,8 @@
+import { rest } from 'msw';
+
+// Example handlers; adjust to actual endpoints if needed
+export const handlers = [
+  rest.get('/api/ping', (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json({ ok: true }));
+  }),
+];

regression-tests/testServer.js

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import { handlers } from './testHandlers';
+
+export const server = setupServer(...handlers);