chore: prepare WIP draft to upgrade React to 17.0.2

.nvmrc

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

package.json

@@ -4,9 +4,12 @@
   "license": "BSD-3-Clause",
   "devDependencies": {
     "@babel/preset-flow": "^7.0.0",
+    "@babel/preset-react": "7.10.0",
+    "@testing-library/jest-dom": "4.2.4",
     "babel-cli": "^6.24.1",
+    "babel-core": "6",
     "babel-eslint": "^8.2.6",
-    "babel-jest": "^22.4.4",
+    "babel-jest": "22.4.4",
     "babel-plugin-import-inspector": "^2.0.0",
     "babel-plugin-inline-import-graphql-ast": "^2.0.4",
     "babel-plugin-react-remove-properties": "^0.3.0",

regression-tests/button.regression.test.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button } from '../src/components/button';
+
+describe('Button regression', () => {
+  it('renders children and respects disabled/isLoading', async () => {
+    const user = userEvent.setup();
+
+    const handleClick = jest.fn();
+    const { rerender } = render(
+      <Button onClick={handleClick}>Click me</Button>
+    );
+
+    const btn = screen.getByRole('button', { name: /click me/i });
+    expect(btn).toBeInTheDocument();
+    expect(btn).toBeEnabled();
+
+    await user.click(btn);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+
+    rerender(
+      <Button onClick={handleClick} isLoading>
+        Click me
+      </Button>
+    );
+    expect(screen.getByRole('button', { name: /click me/i })).toBeDisabled();
+
+    rerender(
+      <Button onClick={handleClick} disabled>
+        Click me
+      </Button>
+    );
+    expect(screen.getByRole('button', { name: /click me/i })).toBeDisabled();
+  });
+
+  it('wraps with anchor when href provided', () => {
+    render(<Button href="https://example.com">Go</Button>);
+    const link = screen.getByRole('link', { name: /go/i });
+    expect(link).toHaveAttribute('href', 'https://example.com');
+  });
+});

regression-tests/jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  rootDir: '..',
+  testEnvironment: 'jsdom',
+  testURL: 'http://localhost/',
+  testMatch: ['**/regression-tests/**/*.test.[jt]s?(x)'],
+  moduleFileExtensions: ['js', 'jsx', 'json'],
+  setupTestFrameworkScriptFile: '<rootDir>/regression-tests/setupTests.js',
+  transform: {
+    '^.+\\.[jt]sx?$': '<rootDir>/regression-tests/jest.transform.js',
+  },
+  moduleNameMapper: {
+    '\\.(css|less|scss)$': '<rootDir>/regression-tests/styleMock.js',
+  },
+};

regression-tests/jest.transform.js

@@ -0,0 +1,13 @@
+const babelJest = require('babel-jest');
+
+module.exports = babelJest.createTransformer({
+  presets: [
+    [
+      'env',
+      {
+        targets: { node: '12' },
+      },
+    ],
+    'react',
+  ],
+});

regression-tests/setupTests.js

@@ -0,0 +1,20 @@
+import '@testing-library/jest-dom/extend-expect';
+// Set a valid URL for jsdom to avoid opaque origin
+if (typeof window !== 'undefined') {
+  try {
+    // jsdom 11 uses document.location
+    delete window.location;
+  } catch (e) {}
+  window.location = { href: 'http://localhost/' };
+}
+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
+// so they don't affect other tests.
+afterEach(() => server.resetHandlers());
+
+// Clean up after the tests are finished.
+afterAll(() => server.close());

regression-tests/styleMock.js

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

regression-tests/testServer.js

@@ -0,0 +1,12 @@
+import { setupServer } from 'msw/node';
+import { rest } from 'msw';
+
+// Example handler; tests can override per-case
+export const handlers = [
+  rest.get('/api/example', (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json({ ok: true }));
+  }),
+];
+
+export const server = setupServer(...handlers);
+export { rest } from 'msw';