Add Preact component tests

Add a first step for a Preact component in h.

For now this isn't a very useful test (and the component being tested
doesn't have any dynamic behaviour to test), but it suffices to ensure
that the necessary test dependencies are setup (e.g. Enzyme).

h/static/scripts/group-forms/components/CreateGroupForm.tsx

@@ -6,11 +6,21 @@ function Star() {
   return <span className="text-brand">*</span>;
 }
 
-function CharacterCounter({ value, limit }: { value: number; limit: number }) {
+function CharacterCounter({
+  value,
+  limit,
+  testid,
+}: {
+  value: number;
+  limit: number;
+  testid: string;
+}) {
   return (
     <div className="flex">
       <div className="grow" />
-      {value}/{limit}
+      <span data-testid={testid}>
+        {value}/{limit}
+      </span>
     </div>
   );
 }
@@ -46,13 +56,21 @@ export default function CreateGroupForm() {
         <div className="mb-4">
           <Label htmlFor={nameId} text="Name" required />
           <Input id={nameId} autofocus autocomplete="off" required />
-          <CharacterCounter value={0} limit={25} />
+          <CharacterCounter
+            value={0}
+            limit={25}
+            testid="character-counter-name"
+          />
         </div>
 
         <div className="mb-4">
           <Label htmlFor={descriptionId} text="Description" />
           <Textarea id={descriptionId} classes="h-24" />
-          <CharacterCounter value={0} limit={250} />
+          <CharacterCounter
+            value={0}
+            limit={250}
+            testid="character-counter-description"
+          />
         </div>
 
         <div className="flex">

h/static/scripts/group-forms/components/test/CreateGroupForm-test.js

@@ -0,0 +1,20 @@
+import { mount } from 'enzyme';
+
+import CreateGroupForm from '../CreateGroupForm';
+
+describe('CreateGroupForm', () => {
+  const createWrapper = () => mount(<CreateGroupForm />);
+
+  it('renders', async () => {
+    const wrapper = createWrapper();
+    const characterCounterName = wrapper.find(
+      '[data-testid="character-counter-name"]',
+    );
+    const characterCounterDescription = wrapper.find(
+      '[data-testid="character-counter-description"]',
+    );
+
+    assert(characterCounterName.text() === '0/25');
+    assert(characterCounterDescription.text() === '0/250');
+  });
+});

h/static/scripts/tests/bootstrap.js

@@ -1,4 +1,6 @@
 import { assert } from 'chai';
+import { configure } from 'enzyme';
+import { Adapter } from 'enzyme-adapter-preact-pure';
 import sinon from 'sinon';
 
 // Expose the sinon assertions.
@@ -8,3 +10,6 @@ sinon.assert.expose(assert, { prefix: null });
 // karma-sinon plugins
 globalThis.assert = assert;
 globalThis.sinon = sinon;
+
+// Configure Enzyme for UI tests.
+configure({ adapter: new Adapter() });

package.json

@@ -47,6 +47,8 @@
     "babel-plugin-mockable-imports": "^2.0.1",
     "chai": "^5.1.1",
     "diff": "^5.2.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-preact-pure": "^4.1.0",
     "eslint": "^8.57.0",
     "eslint-config-hypothesis": "2.6",
     "eslint-plugin-mocha": "^10.4.3",

rollup-tests.config.js

@@ -10,6 +10,11 @@ export default {
     sourcemap: true,
   },
   treeshake: false,
+  // Suppress a warning (https://rollupjs.org/guide/en/#error-this-is-undefined)
+  // due to https://github.com/babel/babel/issues/9149.
+  //
+  // Any code string other than "undefined" which evaluates to `undefined` will work here.
+  context: 'void(0)',
   plugins: [
     nodeResolve({
       browser: true,
@@ -22,11 +27,25 @@ export default {
       // configuration for the `virtual` plugin above.
       preferBuiltins: false,
     }),
-    commonjs(),
+    commonjs({
+      include: 'node_modules/**',
+    }),
     babel({
       babelHelpers: 'bundled',
       exclude: 'node_modules/**',
       extensions: ['.js', '.ts', '.tsx'],
+      presets: [
+        [
+          '@babel/preset-react',
+          {
+            // Turn off the `development` setting in tests to prevent warnings
+            // about `this`. See https://github.com/babel/babel/issues/9149.
+            development: false,
+            runtime: 'automatic',
+            importSource: 'preact',
+          },
+        ],
+      ],
       plugins: ['mockable-imports'],
     }),
   ],