Menu

Post image 1
Post image 2
1 / 2
0

TWD setup is now two Vite plugins and zero app code

DEV Community·Kevin Julián Martínez Escobar·24 days ago
#IkJs3dn5
#testing#twd#vite#dx#import#relay
Reading 0:00
15s threshold

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 twd-js@1.8 and twd-relay@1.2 , 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 " ; ReactDOM…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More