Skip to content

Commit

Permalink
cleanup(bundling): cleanup and enhance vite e2e tests (#13584)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mandarini
mandarini authored Dec 2, 2022
1 parent 119fe91 commit fb9467a
Showing 1 changed file with 64 additions and 167 deletions.
231 changes: 64 additions & 167 deletions e2e/vite/src/vite.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import {
checkFilesExist,
cleanupProject,
createFile,
exists,
Expand All @@ -25,142 +24,24 @@ describe('Vite Plugin', () => {
let proj: string;

describe('Vite on React apps', () => {
describe('set up new React app manually', () => {
describe('convert React webpack app to vite using the vite:configuration generator', () => {
beforeEach(() => {
proj = newProject();
runCLI(`generate @nrwl/react:app ${myApp}`);
runCLI(`generate @nrwl/vite:init`);
updateFile(
`apps/${myApp}/index.html`,
`
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>My App</title>
<base href='/' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<link rel='icon' type='image/x-icon' href='favicon.ico' />
</head>
<body>
<div id='root'></div>
<script type='module' src='src/main.tsx'></script>
</body>
</html>
`
);

updateFile(
`apps/${myApp}/src/app/app.tsx`,
`
import { environment } from './../environments/environment';
export function App() {
return (
<>
<h1>{environment.myTestVar}</h1>
<p>Welcome ${myApp}!</p>
</>
);
}
export default App;
`
);

createFile(
`apps/${myApp}/vite.config.ts`,
`
/// <reference types="vitest" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import plugin from 'vite-tsconfig-paths';
export default defineConfig({
plugins: [
react(),
plugin({
root: '../../',
projects: ['tsconfig.base.json'],
}),
],
test: {
globals: true,
environment: 'jsdom',
}
});`
);

updateFile(
`apps/${myApp}/tsconfig.json`,
`
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"jsx": "react-jsx",
"allowJs": false,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"isolatedModules": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"module": "ESNext",
"moduleResolution": "Node",
"noEmit": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"strict": true,
"target": "ESNext",
"types": ["vite/client"],
"useDefineForClassFields": true
},
"files": [],
"include": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
}
]
}
`
);

updateProjectConfig(myApp, (config) => {
config.targets.serve.executor = '@nrwl/vite:dev-server';
config.targets.test.executor = '@nrwl/vite:test';

config.targets.build = {
executor: '@nrwl/vite:build',
outputs: ['{options.outputPath}'],
defaultConfiguration: 'production',
options: {
outputPath: `dist/apps/${myApp}`,
fileReplacements: [
{
replace: `apps/${myApp}/src/environments/environment.ts`,
with: `apps/${myApp}/src/environments/environment.prod.ts`,
},
],
},
configurations: {},
};

config.targets.serve.options = {
buildTarget: `${myApp}:build`,
};

return config;
});
runCLI(`generate @nrwl/react:app ${myApp} --bundler=webpack`);
runCLI(`generate @nrwl/vite:configuration ${myApp}`);
});
afterEach(() => cleanupProject());

it('should serve application in dev mode', async () => {
it('should serve application in dev mode with custom options', async () => {
const port = 4212;
const p = await runCommandUntil(
`run ${myApp}:serve --port=${port}`,
`run ${myApp}:serve --port=${port} --https=true`,
(output) => {
return output.includes('Local:');
return (
output.includes('Local:') &&
output.includes(`:${port}`) &&
output.includes('https')
);
}
);
try {
Expand All @@ -179,52 +60,68 @@ describe('Vite Plugin', () => {
});
});

describe('convert React webpack app to vite using the vite:configuration generator', () => {
describe('set up new React app with --bundler=vite option', () => {
beforeEach(() => {
proj = newProject();
runCLI(`generate @nrwl/react:app ${myApp} --bundler=webpack`);
runCLI(`generate @nrwl/vite:configuration ${myApp}`);
runCLI(`generate @nrwl/react:app ${myApp} --bundler=vite`);
createFile(`apps/${myApp}/public/hello.md`, `# Hello World`);
updateFile(
`apps/${myApp}/src/environments/environment.prod.ts`,
`export const environment = {
production: true,
myTestVar: 'MyProductionValue',
};`
);
updateFile(
`apps/${myApp}/src/environments/environment.ts`,
`export const environment = {
production: false,
myTestVar: 'MyDevelopmentValue',
};`
);

updateFile(
`apps/${myApp}/src/app/app.tsx`,
`
import { environment } from './../environments/environment';
export function App() {
return (
<>
<h1>{environment.myTestVar}</h1>
<p>Welcome ${myApp}!</p>
</>
);
}
export default App;
`
import { environment } from './../environments/environment';
export function App() {
return (
<>
<h1>{environment.myTestVar}</h1>
<p>Welcome ${myApp}!</p>
</>
);
}
export default App;
`
);

updateProjectConfig(myApp, (config) => {
config.targets.build.options.fileReplacements = [
{
replace: `apps/${myApp}/src/environments/environment.ts`,
with: `apps/${myApp}/src/environments/environment.prod.ts`,
},
];
return config;
});
});
afterEach(() => cleanupProject());

it('should serve application in dev mode', async () => {
const port = 4212;
const p = await runCommandUntil(
`run ${myApp}:serve --port=${port}`,
(output) => {
return output.includes('Local:');
}
it('should build application', async () => {
runCLI(`build ${myApp}`);
expect(readFile(`dist/apps/${myApp}/favicon.ico`)).toBeDefined();
expect(readFile(`dist/apps/${myApp}/hello.md`)).toBeDefined();
expect(readFile(`dist/apps/${myApp}/index.html`)).toBeDefined();
const fileArray = listFiles(`dist/apps/${myApp}/assets`);
const mainBundle = fileArray.find((file) => file.endsWith('.js'));
expect(readFile(`dist/apps/${myApp}/assets/${mainBundle}`)).toContain(
'MyProductionValue'
);
try {
await promisifiedTreeKill(p.pid, 'SIGKILL');
await killPorts(port);
} catch {
// ignore
}
expect(
readFile(`dist/apps/${myApp}/assets/${mainBundle}`)
).not.toContain('MyDevelopmentValue');
rmDist();
}, 200000);

it('should test application', async () => {
const result = await runCLIAsync(`test ${myApp}`);
expect(result.combinedOutput).toContain(
`Successfully ran target test for project ${myApp}`
);
});
});
});

Expand Down Expand Up @@ -266,12 +163,12 @@ describe('Vite Plugin', () => {
rmDist();
}, 200000);

it('should serve application in dev mode', async () => {
it('should serve application in dev mode with custom port', async () => {
const port = 4212;
const p = await runCommandUntil(
`run ${myApp}:serve --port=${port}`,
(output) => {
return output.includes('Local:');
return output.includes('Local:') && output.includes(`:${port}`);
}
);
try {
Expand Down

0 comments on commit fb9467a

Please sign in to comment.