A Vite project from scratch

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

// For the runner, which renders this into #root.
export default App;

// What src/main.jsx does, as a function that works for any element.
export function start(rootElement) {
  const root = createRoot(rootElement);
  // TODO: render <App /> inside <StrictMode>, then 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 {start} from './main.jsx';

// The page of index.html: an empty element for the app.
function indexHtml() {
  document.body.innerHTML = '<div id="app-root"></div>';
  return document.getElementById('app-root');
}

async function mount(element) {
  let root;
  await act(async () => {
    root = start(element);
  });
  return root;
}

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

test('start shows App inside the element', async () => {
  const element = indexHtml();
  const root = await mount(element);
  const heading = within(element).queryByRole('heading', {level: 1});
  assert.equal(heading?.textContent, 'my-app', 'the element holds ' + JSON.stringify(element.innerHTML));
  await unmount(root);
});

test('The counter works after start', async () => {
  const user = userEvent.setup();
  const element = indexHtml();
  const root = await mount(element);
  const button = within(element).queryByRole('button', {name: 'count is 0'});
  assert.ok(button !== null, 'there is no button "count is 0" inside the element');
  await user.click(button);
  await user.click(button);
  assert.equal(button.textContent, 'count is 2', 'after two clicks the button reads ' + JSON.stringify(button.textContent));
  await unmount(root);
});

test('start returns the root', async () => {
  const element = indexHtml();
  const root = await mount(element);
  assert.equal(typeof root?.render, 'function', 'start returned ' + String(root) + ', not the root from createRoot');
  await unmount(root);
});

import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <h1>my-app</h1>
      <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
    </>
  );
}

import Header from './Header.jsx';

// TODO: Counter now lives in Counter.jsx. Import it from there,
// delete this old copy, and render one Counter per tea.
function Counter() {
  return <button>Tea: 0</button>;
}

export default function App() {
  return (
    <>
      <Header title="Tea shop" />
      <Counter />
    </>
  );
}

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

test('The page shows the Tea shop heading and two counters', () => {
  render(<App />);
  assert.equal(screen.getByRole('heading', {level: 1}).textContent, 'Tea shop', 'the heading');
  const labels = screen.queryAllByRole('button').map((button) => button.textContent);
  assert.deepEqual(labels, ['Green: 0', 'Black: 0'], 'the buttons read ' + JSON.stringify(labels));
});

test('Green counts its own clicks', async () => {
  const user = userEvent.setup();
  render(<App />);
  const green = screen.queryByRole('button', {name: 'Green: 0'});
  assert.ok(green !== null, 'there is no button "Green: 0"');
  await user.click(green);
  await user.click(green);
  assert.equal(green.textContent, 'Green: 2', 'after two clicks Green reads ' + JSON.stringify(green.textContent));
  const black = screen.queryByRole('button', {name: /^Black/});
  assert.equal(black?.textContent, 'Black: 0', 'clicking Green changed Black to ' + JSON.stringify(black?.textContent));
});

export default function Header({ title }) {
  return <h1>{title}</h1>;
}

import { useState } from 'react';

export default function Counter({ label }) {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount((count) => count + 1)}>
      {label}: {count}
    </button>
  );
}