Building an AI-Powered Code Editor: Browser Test Runner component

#react #showdev #testing #tooling

Browser Test Runner: Run Unit Tests Directly in the Browser

I've just released Browser Test Runner, an open-source React component suite that lets you write, compile, and run unit tests directly in the browser—no complex server-side build steps required.

🔗 Try it Live: https://browser-test-runner.netlify.app/

💡 The Idea

This project was born from a real need: I developed it as part of LLM CodeForge, an agentic code editor that generates tests directly in the browser.
The goal was to create a "Zero Config" testing environment. I wanted something that could be seamlessly integrated directly into a web component, while maintaining the familiar syntax of Vitest, because in my case the Vitest syntax is simple to use for an LLM.

🛠 Under the Hood (Tech Stack)

This project isn't just a graphical wrapper—it's a real client-side execution engine:

Virtual File System: Manages .jsx and .test.jsx files in memory.

On-the-fly Transpilation: Uses Babel Standalone and Acorn to parse and transform JSX code and ES6 imports in real-time.

Sandboxing: Executes tests in an isolated iframe to ensure security and clean global scope.

Dynamic Imports: Loads React and Testing Library dynamically via CDN (esm.sh), keeping the runner lightweight.

🎯 Use Cases

Interactive Documentation: Show your users not just how to render a component, but how to test it.

Education: Perfect for teaching TDD (Test Driven Development) without the overhead of npm installation.

Rapid Prototyping: Write, test, and iterate in seconds.

💻 Integration Example

It's easily integrable into any existing React app:

import TestComponent from "./testing/TestComponent";

const files = {
  "/Button.jsx": { content: "...", isFolder: false },
  "/Button.test.jsx": { content: "...", isFolder: false }
};

<TestComponent 
  files={files} 
  testFilePaths={["/Button.test.jsx"]} 
/>

The project is open source! I'd be happy to receive feedback, stars ⭐, or pull requests.

👉 GitHub Repo: https://github.com/fra00/browser-test-runner

Optional closing paragraphs you might want to add:

🚀 What's Next?

I'm planning to add support for more testing frameworks, improve error reporting, and enhance the code editor experience. If you have suggestions or feature requests, feel free to open an issue on GitHub!

🤝 Contributing

Contributions are welcome! Whether it's bug fixes, new features, or documentation improvements, check out the repository and join the project.