Setting up TWD used to mean adding a block of dev-only code to your app's entry file — a dynamic import for the runner, a test glob, a service-worker config, and a twd-relay browser client. It worked, but it never really belonged there.

With [email protected] and [email protected] , both packages ship Vite plugins. Setup is two entries in vite.config.ts and nothing in main.tsx .

The new setup

vite.config.ts :

import { defineConfig } from " vite " ; import react from " @vitejs/plugin-react " ; import { twd } from " twd-js/vite-plugin " ; import { twdRemote } from " twd-relay/vite " ;

export default defineConfig ({ plugins : [ react (), twd ({ testFilePattern : " /**/*.twd.test.ts " , open : false , position : " right " , search : true , }), twdRemote (), ], });

Enter fullscreen mode

Exit fullscreen mode

main.tsx :

import React from " react " ; import ReactDOM from " react-dom/client " ; import { RouterProvider } from " react-router " ; import { router } from " ./routes/router " ; import " ./styles/index.css "…