ReactJS

To effectively test React components, we can combine Poku and your preferred web scraper tool.

For this example, let's create a simple Vite React app and then navigate on it using Puppeteer to interact with the page:

npm create vite@latest my-project -- --template react

It will create a default Vite React app in the my-project directory.

Test steps:

• ✅ Start the dev script from my-project/package.json in the background
• ✅ Verify the initial counter is zero
• ✅ Click on button to increment the counter
• ✅ Check the updated counter value
• ✅ Close the background process

import { assert, startScript } from 'poku';
import puppeteer from 'puppeteer';

const server = await startScript('dev', {
  cwd: 'my-project',
});

const API = 'http://localhost:5173';

const browser = await puppeteer.launch();
const page = await browser.newPage();

await page.goto(API);

const button = await page.waitForSelector('button');

assert.strictEqual(
  await button.evaluate((e) => e.textContent),
  'count is 0',
  'Initial Counter needs to be 0'
);

await button.click();

assert.strictEqual(
  await button.evaluate((e) => e.textContent),
  'count is 1',
  'After click, needs to be 1'
);

await browser.close();
server.end();