1- import { test , expect } from "@playwright/test" ;
1+ import { expect } from "@playwright/test" ;
2+ import tsx from "dedent" ;
23import getPort from "get-port" ;
34
4- import {
5- type TemplateName ,
6- createProject ,
7- customDev ,
8- EXPRESS_SERVER ,
9- viteConfig ,
10- } from "./helpers/vite.js" ;
11-
12- const templateNames = [
13- "vite-5-template" ,
14- "rsc-vite-framework" ,
15- ] as const satisfies TemplateName [ ] ;
16-
17- let getFiles = async ( {
18- templateName,
19- envDir,
20- port,
21- } : {
22- templateName : TemplateName ;
23- envDir ?: string ;
24- port : number ;
25- } ) => {
26- let envPath = `${ envDir ? `${ envDir } : "" } ;
27-
28- return {
29- "vite.config.js" : await viteConfig . basic ( { templateName, port, envDir } ) ,
30- "server.mjs" : EXPRESS_SERVER ( { port, templateName } ) ,
31- [ envPath ] : `
32- ENV_VAR_FROM_DOTENV_FILE=Content from ${ envPath }
33- ` ,
34- "app/routes/dotenv.tsx" : String . raw `
5+ import * as Express from "./helpers/express" ;
6+ import { test } from "./helpers/fixtures" ;
7+ import * as Stream from "./helpers/stream" ;
8+ import { viteMajorTemplates , getTemplates } from "./helpers/templates" ;
9+
10+ const templates = [
11+ ...viteMajorTemplates ,
12+ ...getTemplates ( [ "rsc-vite-framework" ] ) ,
13+ ] ;
14+
15+ test . use ( {
16+ files : {
17+ "app/routes/dotenv.tsx" : tsx `
3518 import { useState, useEffect } from "react";
3619 import { useLoaderData } from "react-router";
3720
@@ -59,82 +42,62 @@ let getFiles = async ({
5942 </>
6043 }
6144 ` ,
62- } ;
63- } ;
64-
65- test . describe ( "Vite .env" , ( ) => {
66- for ( const templateName of templateNames ) {
67- test . describe ( `template: ${ templateName } , ( ) => {
68- test . describe ( "defaults" , async ( ) => {
69- let port : number ;
70- let cwd : string ;
71- let stop : ( ) => void ;
72-
73- test . beforeAll ( async ( ) => {
74- port = await getPort ( ) ;
75- cwd = await createProject (
76- await getFiles ( { port, templateName } ) ,
77- templateName ,
78- ) ;
79- stop = await customDev ( { cwd, port } ) ;
80- } ) ;
81- test . afterAll ( ( ) => stop ( ) ) ;
45+ } ,
46+ } ) ;
8247
83- test ( "express" , async ( { page } ) => {
84- let pageErrors : unknown [ ] = [ ] ;
85- page . on ( "pageerror" , ( error ) => pageErrors . push ( error ) ) ;
48+ const envs = [
49+ { name : "default" , path : ".env" } ,
50+ { name : "custom env dir" , path : "custom-env-dir/.env" } ,
51+ ] ;
8652
87- await page . goto ( `http://localhost:${ port } , {
88- waitUntil : "networkidle" ,
53+ test . describe ( "Vite .env" , ( ) => {
54+ templates . forEach ( ( template ) => {
55+ test . describe ( `template: ${ template . displayName } , ( ) => {
56+ const isRsc = template . name . startsWith ( "rsc-" ) ;
57+ test . use ( { template : template . name } ) ;
58+ envs . forEach ( ( env ) => {
59+ test ( env . name , async ( { edit, $, page } ) => {
60+ await edit ( {
61+ "server.mjs" : isRsc ? Express . rsc ( ) : Express . server ( ) ,
62+ ".env" : `
63+ VITE_ENV_ROUTE=dotenv
64+ ENV_VAR_FROM_DOTENV_FILE=Content from ${ env . path }
65+ ` ,
66+ "app/routes.ts" : ( contents ) => {
67+ if ( template . name === "vite-5-template" ) return contents ;
68+ return tsx `
69+ import { type RouteConfig, route } from "@react-router/dev/routes";
70+
71+ const routes: RouteConfig = [];
72+ if (import.meta.env.VITE_ENV_ROUTE === "dotenv") {
73+ routes.push(route("dotenv", "routes/dotenv.tsx"));
74+ }
75+
76+ export default routes
77+ ` ;
78+ } ,
8979 } ) ;
90- expect ( pageErrors ) . toEqual ( [ ] ) ;
80+ await $ ( "pnpm build" ) ;
9181
92- let loaderContent = page . locator (
93- "[data-dotenv-route-loader-content]" ,
94- ) ;
95- await expect ( loaderContent ) . toHaveText ( "Content from .env file" ) ;
82+ const port = await getPort ( ) ;
83+ const url = `http://localhost:${ port } ;
9684
97- let clientContent = page . locator (
98- "[data-dotenv-route-client-content]" ,
99- ) ;
100- await expect ( clientContent ) . toHaveText (
101- "process.env.ENV_VAR_FROM_DOTENV_FILE not available on the client, which is a good thing" ,
102- ) ;
103-
104- expect ( pageErrors ) . toEqual ( [ ] ) ;
105- } ) ;
106- } ) ;
107-
108- test . describe ( "custom env dir" , async ( ) => {
109- let port : number ;
110- let cwd : string ;
111- let stop : ( ) => void ;
112-
113- test . beforeAll ( async ( ) => {
114- const envDir = "custom-env-dir" ;
115- port = await getPort ( ) ;
116- cwd = await createProject (
117- await getFiles ( { envDir, port, templateName } ) ,
118- templateName ,
119- ) ;
120- stop = await customDev ( { cwd, port } ) ;
121- } ) ;
122- test . afterAll ( ( ) => stop ( ) ) ;
123-
124- test ( "express" , async ( { page } ) => {
125- let pageErrors : unknown [ ] = [ ] ;
126- page . on ( "pageerror" , ( error ) => pageErrors . push ( error ) ) ;
127-
128- await page . goto ( `http://localhost:${ port } , {
129- waitUntil : "networkidle" ,
85+ const server = $ ( "node server.mjs" , {
86+ env : {
87+ PORT : String ( port ) ,
88+ HMR_PORT : String ( await getPort ( ) ) ,
89+ } ,
13090 } ) ;
131- expect ( pageErrors ) . toEqual ( [ ] ) ;
91+ await Stream . match ( server . stdout , url ) ;
92+
93+ await page . goto ( `${ url } , { waitUntil : "networkidle" } ) ;
94+ expect ( page . errors ) . toEqual ( [ ] ) ;
13295
13396 let loaderContent = page . locator (
13497 "[data-dotenv-route-loader-content]" ,
13598 ) ;
13699 await expect ( loaderContent ) . toHaveText (
137- " Content from custom- env-dir/.env file" ,
100+ ` Content from ${ env . path } ` ,
138101 ) ;
139102
140103 let clientContent = page . locator (
@@ -144,9 +107,9 @@ test.describe("Vite .env", () => {
144107 "process.env.ENV_VAR_FROM_DOTENV_FILE not available on the client, which is a good thing" ,
145108 ) ;
146109
147- expect ( pageErrors ) . toEqual ( [ ] ) ;
110+ expect ( page . errors ) . toEqual ( [ ] ) ;
148111 } ) ;
149112 } ) ;
150113 } ) ;
151- }
114+ } ) ;
152115} ) ;
0 commit comments