Installation: a framework or from scratch

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function LikeButton() {
  const [liked, setLiked] = useState(false);

  return (
    <button onClick={() => setLiked(true)}>
      {liked ? 'Liked' : 'Like'}
    </button>
  );
}

export default function Page() {
  return <h1>Product page</h1>;
}

// The existing page calls this with its <div id="like"></div>.
export function mountLikeButton(domNode) {
  // TODO: create a root for domNode, render <LikeButton /> into it,
  // and return the root.
}

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {act, within} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import {mountLikeButton} from './main.jsx';

// The HTML of the existing page: some text, and an empty element for the widget.
function existingPage() {
  document.body.innerHTML = '<p>Made by the shop team</p><div id="like"></div>';
  return document.getElementById('like');
}

async function mount(domNode) {
  let root;
  await act(async () => {
    root = mountLikeButton(domNode);
  });
  return root;
}

async function unmount(root) {
  if (root && typeof root.unmount === 'function') await act(async () => root.unmount());
}

test('The Like button appears inside #like', async () => {
  const domNode = existingPage();
  const root = await mount(domNode);
  const button = within(domNode).queryByRole('button', {name: 'Like'});
  assert.ok(button !== null, '#like holds ' + JSON.stringify(domNode.innerHTML) + ', not a Like button');
  await unmount(root);
});

test('A click changes the button to Liked', async () => {
  const user = userEvent.setup();
  const domNode = existingPage();
  const root = await mount(domNode);
  const button = within(domNode).queryByRole('button', {name: 'Like'});
  assert.ok(button !== null, 'there is no Like button inside #like to click');
  await user.click(button);
  assert.equal(button.textContent, 'Liked', 'after a click the button reads ' + JSON.stringify(button.textContent));
  await unmount(root);
});

test('mountLikeButton returns the root and keeps the rest of the page', async () => {
  const domNode = existingPage();
  const root = await mount(domNode);
  assert.equal(typeof root?.unmount, 'function', 'mountLikeButton returned ' + String(root) + ', not the root from createRoot');
  assert.equal(document.querySelector('p')?.textContent, 'Made by the shop team', 'the page text outside #like changed');
  await unmount(root);
});

import { createRoot } from 'react-dom/client';

function CartBadge({ count }) {
  return <strong>Cart: {count}</strong>;
}

function Newsletter() {
  return (
    <section>
      <h2>Newsletter</h2>
      <button>Subscribe</button>
    </section>
  );
}

export default function Page() {
  return <h1>Shop</h1>;
}

// The existing page has <span id="cart-badge"></span> in its header
// and <div id="newsletter"></div> in its footer.
export function mountWidgets() {
  const root = createRoot(document.getElementById('cart-badge'));
  root.render(<CartBadge count={2} />);
  root.render(<Newsletter />);
  return [root];
}

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {act, within} from '@testing-library/react';
import {mountWidgets} from './main.jsx';

function existingPage() {
  document.body.innerHTML =
    '<header>Shop <span id="cart-badge"></span></header><main>Books</main><footer><div id="newsletter"></div></footer>';
}

async function mount() {
  let roots;
  await act(async () => {
    roots = mountWidgets();
  });
  return Array.isArray(roots) ? roots : [];
}

async function unmountAll(roots) {
  for (const root of roots) if (root && typeof root.unmount === 'function') await act(async () => root.unmount());
}

test('The cart badge shows Cart: 2', async () => {
  existingPage();
  const roots = await mount();
  const badge = document.getElementById('cart-badge');
  assert.equal(badge.textContent, 'Cart: 2', '#cart-badge reads ' + JSON.stringify(badge.textContent));
  await unmountAll(roots);
});

test('The newsletter appears inside #newsletter', async () => {
  existingPage();
  const roots = await mount();
  const footer = document.getElementById('newsletter');
  const button = within(footer).queryByRole('button', {name: 'Subscribe'});
  assert.ok(button !== null, '#newsletter holds ' + JSON.stringify(footer.innerHTML) + ', not the Subscribe button');
  await unmountAll(roots);
});

test('mountWidgets returns one root per widget', async () => {
  existingPage();
  const roots = await mount();
  assert.equal(roots.length, 2, 'mountWidgets returned ' + roots.length + ' root(s)');
  assert.ok(roots[0] !== roots[1], 'both entries are the same root');
  await unmountAll(roots);
});