Loading...
Loading...
TWD project setup guide — helps AI agents install and configure TWD (Test While Developing) in a new or existing project. Use when setting up TWD, configuring Vite, or troubleshooting TWD initialization.
npx skill4agent add brikev/twd twd-setupnpm install twd-jsnpx twd-js init publicmock-sw.jspublic/static/// src/main.ts (or main.tsx)
if (import.meta.env.DEV) {
const { initTWD } = await import('twd-js/bundled');
const tests = import.meta.glob("./**/*.twd.test.ts");
initTWD(tests, {
open: true,
position: 'left',
serviceWorker: true,
serviceWorkerUrl: '/mock-sw.js',
});
}opentrueposition"left""right""left"serviceWorkertrueserviceWorkerUrl'/mock-sw.js'theme// src/main.tsx
import { createRoot } from 'react-dom/client';
if (import.meta.env.DEV) {
const testModules = import.meta.glob("./**/*.twd.test.ts");
const { initTests, twd, TWDSidebar } = await import('twd-js');
initTests(testModules, <TWDSidebar open={true} position="left" />, createRoot);
twd.initRequestMocking().catch(console.error);
}// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
if (import.meta.env.DEV) {
const { initTWD } = await import('twd-js/bundled');
const tests = import.meta.glob("./**/*.twd.test.ts");
initTWD(tests, { open: true, position: 'left' });
}
createApp(App).mount('#app');// src/main.ts
import { isDevMode } from '@angular/core';
if (isDevMode()) {
const { initTWD } = await import('twd-js/bundled');
// Angular may not support import.meta.glob — define tests manually:
const tests = {
'./twd-tests/feature.twd.test.ts': () => import('./twd-tests/feature.twd.test'),
};
initTWD(tests, { open: true, position: 'left' });
}// src/main.tsx
if (import.meta.env.DEV) {
const { initTWD } = await import('twd-js/bundled');
const tests = import.meta.glob("./**/*.twd.test.ts");
initTWD(tests, { open: true, position: 'left' });
}// vite.config.ts
import { twdHmr } from 'twd-js/vite-plugin';
export default defineConfig({
plugins: [
// ... other plugins
twdHmr(),
],
});// src/App.twd.test.ts
import { twd, screenDom } from "twd-js";
import { describe, it } from "twd-js/runner";
describe("App", () => {
it("should render the main heading", async () => {
await twd.visit("/");
const heading = screenDom.getByRole("heading", { level: 1 });
twd.should(heading, "be.visible");
});
});npm run devnpm install --save-dev twd-relay// vite.config.ts
import { twdRemote } from 'twd-relay/vite';
export default defineConfig({
plugins: [
// ... other plugins
twdRemote(),
],
});// Add inside your import.meta.env.DEV block, after initTWD:
import { createBrowserClient } from 'twd-relay/browser';
const client = createBrowserClient();
client.connect();npx twd-relay runimport.meta.env.DEV*.twd.test.ts*.twd.test.tsxinitTWDinitTestsnpx twd-js init publictwd.initRequestMocking()twdHmr()