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);
+			assert.equal($('style').length, 0);
-			expect($('link[rel="stylesheet"]').length).to.eq(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);
+			assert.equal($('style').length, 0);
-			expect($('link[rel="stylesheet"]').length).to.eq(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,17 +20,17 @@ 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 () => {
@@ -37,10 +38,10 @@ describe('App Entrypoint', () => {
 		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 () => {
@@ -48,7 +49,7 @@ describe('App Entrypoint', () => {
 		const { document } = parseHTML(data);
 		const client = document.querySelector('astro-island svg');
 
-		expect(client).not.to.be.undefined;
+		assert.notEqual(client, undefined);
 	});
 });
 
@@ -72,8 +73,8 @@ 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;
+		assert.notEqual(bar, undefined);
-		expect(bar.textContent).to.eq('works');
+		assert.equal(bar.textContent, 'works');
 	});
 
 	it('loads svg components without transforming them to assets', async () => {
@@ -81,7 +82,7 @@ describe('App Entrypoint no export default (dev)', () => {
 		const { document } = parseHTML(html);
 		const client = document.querySelector('astro-island svg');
 
-		expect(client).not.to.be.undefined;
+		assert.notEqual(client, undefined);
 	});
 });
 
@@ -100,8 +101,8 @@ 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;
+		assert.notEqual(bar, undefined);
-		expect(bar.textContent).to.eq('works');
+		assert.equal(bar.textContent, 'works');
 	});
 
 	it('component not included in renderer bundle', async () => {
@@ -109,10 +110,9 @@ describe('App Entrypoint no export default', () => {
 		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 () => {
@@ -120,7 +120,7 @@ describe('App Entrypoint no export default', () => {
 		const { document } = parseHTML(data);
 		const client = document.querySelector('astro-island svg');
 
-		expect(client).not.to.be.undefined;
+		assert.notEqual(client, undefined);
 	});
 });
 
@@ -139,8 +139,8 @@ 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;
+		assert.notEqual(bar, undefined);
-		expect(bar.textContent).to.eq('works');
+		assert.equal(bar.textContent, 'works');
 	});
 
 	it('component not included in renderer bundle', async () => {
@@ -148,10 +148,10 @@ describe('App Entrypoint relative', () => {
 		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,8 +170,8 @@ 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;
+		assert.notEqual(bar, undefined);
-		expect(bar.textContent).to.eq('works');
+		assert.equal(bar.textContent, 'works');
 	});
 
 	it('component not included in renderer bundle', async () => {
@@ -179,10 +179,10 @@ describe('App Entrypoint /src/absolute', () => {
 		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;
+		assert.notEqual(bar, undefined);
-		expect(bar.getAttribute('slot')).to.be.null;
+		assert.equal(bar.getAttribute('slot'), null);
 	});
 });

pnpm-lock.yaml

@@ -4941,18 +4941,12 @@ importers:
       astro-scripts:
         specifier: workspace:*
         version: link:../../../scripts
-      chai:
-        specifier: ^4.3.7
-        version: 4.3.10
       cheerio:
         specifier: 1.0.0-rc.12
         version: 1.0.0-rc.12
       linkedom:
         specifier: ^0.16.4
         version: 0.16.6
-      mocha:
-        specifier: ^10.2.0
-        version: 10.2.0
       vite:
         specifier: ^5.0.12
         version: 5.0.12(@types/node@18.19.4)(sass@1.69.6)