chore(@astrojs/vue): use Node.js for testing (#9901)

* chore: migrate vue tests to node

* chore: prune chai/mocha from package-lock

packages/integrations/vue/package.json

@@ -37,7 +37,7 @@
     "build": "astro-scripts build \"src/index.ts\" && astro-scripts build \"src/editor.cts\" --force-cjs --no-clean-dist && tsc",
     "build:ci": "astro-scripts build \"src/**/*.ts\" && astro-scripts build \"src/editor.cts\" --force-cjs --no-clean-dist",
     "dev": "astro-scripts dev \"src/**/*.ts\"",
-    "test": "mocha --timeout 20000"
+    "test": "astro-scripts test \"test/**/*.test.js\""
   },
   "dependencies": {
     "@vitejs/plugin-vue": "^4.5.0",
@@ -49,10 +49,8 @@
     "@types/chai": "^4.3.10",
     "astro": "workspace:*",
     "astro-scripts": "workspace:*",
-    "chai": "^4.3.7",
     "cheerio": "1.0.0-rc.12",
     "linkedom": "^0.16.4",
-    "mocha": "^10.2.0",
     "vite": "^5.0.12",
     "vue": "^3.3.8"
   },

packages/integrations/vue/test/app-entrypoint-css.test.js

@@ -1,5 +1,6 @@
 import { loadFixture } from './test-utils.js';
-import { expect } from 'chai';
+import * as assert from 'node:assert/strict';
+import { describe, it, before, after } from 'node:test';
 import { load as cheerioLoad } from 'cheerio';
 
 describe('App Entrypoint CSS', () => {
@@ -22,18 +23,17 @@ describe('App Entrypoint CSS', () => {
 			const $ = cheerioLoad(html);
 
 			// test 1: basic component renders
-			expect($('#foo > #bar').text()).to.eq('works');
-
+			assert.equal($('#foo > #bar').text(), 'works');
 			// test 2: injects the global style on the page
-			expect($('style').first().text().trim()).to.eq(':root{background-color:red}');
+			assert.equal($('style').first().text().trim(), ':root{background-color:red}');
 		});
 
 		it('does not inject styles to pages without a Vue component', async () => {
 			const html = await fixture.readFile('/unrelated/index.html');
 			const $ = cheerioLoad(html);
 
-			expect($('style').length).to.eq(0);
-			expect($('link[rel="stylesheet"]').length).to.eq(0);
+			assert.equal($('style').length, 0);
+			assert.equal($('link[rel="stylesheet"]').length, 0);
 		});
 	});
 
@@ -51,17 +51,17 @@ describe('App Entrypoint CSS', () => {
 			const $ = cheerioLoad(html);
 
 			// test 1: basic component renders
-			expect($('#foo > #bar').text()).to.eq('works');
+			assert.equal($('#foo > #bar').text(), 'works');
 			// test 2: injects the global style on the page
-			expect($('style').first().text().replace(/\s+/g, '')).to.eq(':root{background-color:red;}');
+			assert.equal($('style').first().text().replace(/\s+/g, ''), ':root{background-color:red;}');
 		});
 
 		it('does not inject styles to pages without a Vue component', async () => {
 			const html = await fixture.fetch('/unrelated').then((res) => res.text());
 			const $ = cheerioLoad(html);
 
-			expect($('style').length).to.eq(0);
-			expect($('link[rel="stylesheet"]').length).to.eq(0);
+			assert.equal($('style').length, 0);
+			assert.equal($('link[rel="stylesheet"]').length, 0);
 		});
 	});
 });

packages/integrations/vue/test/app-entrypoint.test.js

@@ -1,5 +1,6 @@
 import { loadFixture } from './test-utils.js';
-import { expect } from 'chai';
+import * as assert from 'node:assert/strict';
+import { describe, it, before, after } from 'node:test';
 import { load as cheerioLoad } from 'cheerio';
 import { parseHTML } from 'linkedom';
 
@@ -19,36 +20,36 @@ describe('App Entrypoint', () => {
 		const $ = cheerioLoad(html);
 
 		// test 1: basic component renders
-		expect($('#foo > #bar').text()).to.eq('works');
+		assert.equal($('#foo > #bar').text(), 'works');
 
 		// test 2: component with multiple script blocks renders and exports
 		// values from non setup block correctly
-		expect($('#multiple-script-blocks').text()).to.equal('2 4');
+		assert.equal($('#multiple-script-blocks').text(), '2 4');
 
 		// test 3: component using generics renders
-		expect($('#generics').text()).to.equal('generic');
+		assert.equal($('#generics').text(), 'generic');
 
 		// test 4: component using generics and multiple script blocks renders
-		expect($('#generics-and-blocks').text()).to.equal('1 3!!!');
+		assert.equal($('#generics-and-blocks').text(), '1 3!!!');
 	});
 
 	it('setup included in renderer bundle', async () => {
 		const data = await fixture.readFile('/index.html');
 		const { document } = parseHTML(data);
 		const island = document.querySelector('astro-island');
 		const client = island.getAttribute('renderer-url');
-		expect(client).not.to.be.undefined;
+		assert.notEqual(client, undefined);
 
 		const js = await fixture.readFile(client);
-		expect(js).to.match(/\w+\.component\(\"Bar\"/gm);
+		assert.match(js, /\w+\.component\(\"Bar\"/gm);
 	});
 
 	it('loads svg components without transforming them to assets', async () => {
 		const data = await fixture.readFile('/index.html');
 		const { document } = parseHTML(data);
 		const client = document.querySelector('astro-island svg');
 
-		expect(client).not.to.be.undefined;
+		assert.notEqual(client, undefined);
 	});
 });
 
@@ -72,16 +73,16 @@ describe('App Entrypoint no export default (dev)', () => {
 		const html = await fixture.fetch('/').then((res) => res.text());
 		const { document } = parseHTML(html);
 		const bar = document.querySelector('#foo > #bar');
-		expect(bar).not.to.be.undefined;
-		expect(bar.textContent).to.eq('works');
+		assert.notEqual(bar, undefined);
+		assert.equal(bar.textContent, 'works');
 	});
 
 	it('loads svg components without transforming them to assets', async () => {
 		const html = await fixture.fetch('/').then((res) => res.text());
 		const { document } = parseHTML(html);
 		const client = document.querySelector('astro-island svg');
 
-		expect(client).not.to.be.undefined;
+		assert.notEqual(client, undefined);
 	});
 });
 
@@ -100,27 +101,26 @@ describe('App Entrypoint no export default', () => {
 		const data = await fixture.readFile('/index.html');
 		const { document } = parseHTML(data);
 		const bar = document.querySelector('#foo > #bar');
-		expect(bar).not.to.be.undefined;
-		expect(bar.textContent).to.eq('works');
+		assert.notEqual(bar, undefined);
+		assert.equal(bar.textContent, 'works');
 	});
 
 	it('component not included in renderer bundle', async () => {
 		const data = await fixture.readFile('/index.html');
 		const { document } = parseHTML(data);
 		const island = document.querySelector('astro-island');
 		const client = island.getAttribute('renderer-url');
-		expect(client).not.to.be.undefined;
-
+		assert.notEqual(client, undefined);
 		const js = await fixture.readFile(client);
-		expect(js).not.to.match(/\w+\.component\(\"Bar\"/gm);
+		assert.doesNotMatch(js, /\w+\.component\(\"Bar\"/gm);
 	});
 
 	it('loads svg components without transforming them to assets', async () => {
 		const data = await fixture.readFile('/index.html');
 		const { document } = parseHTML(data);
 		const client = document.querySelector('astro-island svg');
 
-		expect(client).not.to.be.undefined;
+		assert.notEqual(client, undefined);
 	});
 });
 
@@ -139,19 +139,19 @@ describe('App Entrypoint relative', () => {
 		const data = await fixture.readFile('/index.html');
 		const { document } = parseHTML(data);
 		const bar = document.querySelector('#foo > #bar');
-		expect(bar).not.to.be.undefined;
-		expect(bar.textContent).to.eq('works');
+		assert.notEqual(bar, undefined);
+		assert.equal(bar.textContent, 'works');
 	});
 
 	it('component not included in renderer bundle', async () => {
 		const data = await fixture.readFile('/index.html');
 		const { document } = parseHTML(data);
 		const island = document.querySelector('astro-island');
 		const client = island.getAttribute('renderer-url');
-		expect(client).not.to.be.undefined;
+		assert.notEqual(client, undefined);
 
 		const js = await fixture.readFile(client);
-		expect(js).not.to.match(/\w+\.component\(\"Bar\"/gm);
+		assert.doesNotMatch(js, /\w+\.component\(\"Bar\"/gm);
 	});
 });
 
@@ -170,19 +170,19 @@ describe('App Entrypoint /src/absolute', () => {
 		const data = await fixture.readFile('/index.html');
 		const { document } = parseHTML(data);
 		const bar = document.querySelector('#foo > #bar');
-		expect(bar).not.to.be.undefined;
-		expect(bar.textContent).to.eq('works');
+		assert.notEqual(bar, undefined);
+		assert.equal(bar.textContent, 'works');
 	});
 
 	it('component not included in renderer bundle', async () => {
 		const data = await fixture.readFile('/index.html');
 		const { document } = parseHTML(data);
 		const island = document.querySelector('astro-island');
 		const client = island.getAttribute('renderer-url');
-		expect(client).not.to.be.undefined;
+		assert.notEqual(client, undefined);
 
 		const js = await fixture.readFile(client);
-		expect(js).not.to.match(/\w+\.component\(\"Bar\"/gm);
+		assert.doesNotMatch(js, /\w+\.component\(\"Bar\"/gm);
 	});
 });
 
@@ -202,9 +202,9 @@ describe('App Entrypoint async', () => {
 		const $ = cheerioLoad(html);
 
 		// test 1: component before await renders
-		expect($('#foo > #bar').text()).to.eq('works');
+		assert.equal($('#foo > #bar').text(), 'works');
 
 		// test 2: component after await renders
-		expect($('#foo > #baz').text()).to.eq('works');
+		assert.equal($('#foo > #baz').text(), 'works');
 	});
 });

packages/integrations/vue/test/basics.test.js

@@ -1,5 +1,6 @@
 import { loadFixture } from './test-utils.js';
-import { expect } from 'chai';
+import * as assert from 'node:assert/strict';
+import { describe, it, before } from 'node:test';
 import { parseHTML } from 'linkedom';
 describe('Basics', () => {
 	/** @type {import('./test-utils').Fixture} */
@@ -17,7 +18,7 @@ describe('Basics', () => {
 		const { document } = parseHTML(data);
 		const bar = document.querySelector('#foo');
 
-		expect(bar).not.to.be.undefined;
-		expect(bar.getAttribute('slot')).to.be.null;
+		assert.notEqual(bar, undefined);
+		assert.equal(bar.getAttribute('slot'), null);
 	});
 });