Vitest switch

.github/workflows/build-test.yml

@@ -35,9 +35,7 @@ jobs:
           COVERAGE: true
           FLAKEY: false
         # Not using `npm test` since it rebuilds source which npm ci has already done
-        run: |
-          npm run lint
-          npm run test:unit
+        run: npm run lint && npm run test:unit
       - name: Coveralls GitHub Action
         uses: coverallsapp/github-action@v2.3.0
         timeout-minutes: 2

compat/test/browser/suspense-hydration.test.js

@@ -37,14 +37,14 @@ describe('suspense hydration', () => {
 	let resetRemoveChild;
 	let resetRemove;
 
-	before(() => {
+	beforeAll(() => {
 		resetAppendChild = logCall(Element.prototype, 'appendChild');
 		resetInsertBefore = logCall(Element.prototype, 'insertBefore');
 		resetRemoveChild = logCall(Element.prototype, 'removeChild');
 		resetRemove = logCall(Element.prototype, 'remove');
 	});
 
-	after(() => {
+	afterAll(() => {
 		resetAppendChild();
 		resetInsertBefore();
 		resetRemoveChild();

compat/test/browser/textarea.test.js

@@ -1,5 +1,5 @@
 import React, { render, hydrate, useState } from 'preact/compat';
-import ReactDOMServer from 'preact/compat/server.browser.js';
+import ReactDOMServer from 'preact/compat/server';
 import { setupScratch, teardown } from '../../../test/_util/helpers';
 import { act } from 'preact/test-utils';
 

debug/test/browser/component-stack.test.js

@@ -1,5 +1,6 @@
 import { createElement, render, Component } from 'preact';
 import 'preact/debug';
+import { vi } from 'vitest';
 import { setupScratch, teardown } from '../../../test/_util/helpers';
 
 /** @jsx createElement */
@@ -18,13 +19,12 @@ describe('component stack', () => {
 
 		errors = [];
 		warnings = [];
-		sinon.stub(console, 'error').callsFake(e => errors.push(e));
-		sinon.stub(console, 'warn').callsFake(w => warnings.push(w));
+		vi.spyOn(console, 'error').mockImplementation(e => errors.push(e));
+		vi.spyOn(console, 'warn').mockImplementation(w => warnings.push(w));
 	});
 
 	afterEach(() => {
-		console.error.restore();
-		console.warn.restore();
+		vi.resetAllMocks();
 		teardown(scratch);
 	});
 
@@ -46,6 +46,8 @@ describe('component stack', () => {
 
 		render(<Foo />, scratch);
 
+		// This has a JSX transform warning, so we need to remove it
+		warnings.shift();
 		let lines = getStack(warnings).split('\n');
 		expect(lines[0].indexOf('Thrower') > -1).to.equal(true);
 		expect(lines[1].indexOf('Foo') > -1).to.equal(true);

debug/test/browser/debug.test.js

@@ -7,18 +7,10 @@ import {
 	hydrate
 } from 'preact';
 import { useState } from 'preact/hooks';
-import {
-	setupScratch,
-	teardown,
-	serializeHtml
-} from '../../../test/_util/helpers';
+import { setupScratch, teardown } from '../../../test/_util/helpers';
 import './fakeDevTools';
 import 'preact/debug';
 import { setupRerender } from 'preact/test-utils';
-import * as PropTypes from 'prop-types';
-
-// eslint-disable-next-line no-duplicate-imports
-import { resetPropWarnings } from 'preact/debug';
 
 const h = createElement;
 /** @jsx createElement */
@@ -794,90 +786,6 @@ describe('debug', () => {
 		});
 	});
 
-	describe('PropTypes', () => {
-		beforeEach(() => {
-			resetPropWarnings();
-		});
-
-		it("should fail if props don't match prop-types", () => {
-			function Foo(props) {
-				return <h1>{props.text}</h1>;
-			}
-
-			Foo.propTypes = {
-				text: PropTypes.string.isRequired
-			};
-
-			render(<Foo text={123} />, scratch);
-
-			expect(console.error).to.be.calledOnce;
-
-			// The message here may change when the "prop-types" library is updated,
-			// but we check it exactly to make sure all parameters were supplied
-			// correctly.
-			expect(console.error).to.have.been.calledOnceWith(
-				sinon.match(
-					/^Failed prop type: Invalid prop `text` of type `number` supplied to `Foo`, expected `string`\.\n {2}in Foo \(at (.*)[/\\]debug[/\\]test[/\\]browser[/\\]debug\.test\.js:[0-9]+\)$/m
-				)
-			);
-		});
-
-		it('should only log a given prop type error once', () => {
-			function Foo(props) {
-				return <h1>{props.text}</h1>;
-			}
-
-			Foo.propTypes = {
-				text: PropTypes.string.isRequired,
-				count: PropTypes.number
-			};
-
-			// Trigger the same error twice. The error should only be logged
-			// once.
-			render(<Foo text={123} />, scratch);
-			render(<Foo text={123} />, scratch);
-
-			expect(console.error).to.be.calledOnce;
-
-			// Trigger a different error. This should result in a new log
-			// message.
-			console.error.resetHistory();
-			render(<Foo text="ok" count="123" />, scratch);
-			expect(console.error).to.be.calledOnce;
-		});
-
-		it('should render with error logged when validator gets signal and throws exception', () => {
-			function Baz(props) {
-				return <h1>{props.unhappy}</h1>;
-			}
-
-			Baz.propTypes = {
-				unhappy: function alwaysThrows(obj, key) {
-					if (obj[key] === 'signal') throw Error('got prop');
-				}
-			};
-
-			render(<Baz unhappy={'signal'} />, scratch);
-
-			expect(console.error).to.be.calledOnce;
-			expect(errors[0].includes('got prop')).to.equal(true);
-			expect(serializeHtml(scratch)).to.equal('<h1>signal</h1>');
-		});
-
-		it('should not print to console when types are correct', () => {
-			function Bar(props) {
-				return <h1>{props.text}</h1>;
-			}
-
-			Bar.propTypes = {
-				text: PropTypes.string.isRequired
-			};
-
-			render(<Bar text="foo" />, scratch);
-			expect(console.error).to.not.be.called;
-		});
-	});
-
 	describe('Hydration mismatches', () => {
 		it('Should warn us for a node mismatch', () => {
 			scratch.innerHTML = '<div><span>foo</span>/div>';

debug/test/browser/prop-types.test.js

@@ -0,0 +1,127 @@
+import { createElement, render } from 'preact';
+import {
+	setupScratch,
+	teardown,
+	serializeHtml
+} from '../../../test/_util/helpers';
+import './fakeDevTools';
+import { resetPropWarnings } from 'preact/debug';
+import * as PropTypes from 'prop-types';
+import { jsxDEV as jsxDev } from 'preact/jsx-runtime';
+
+describe('PropTypes', () => {
+	/** @type {HTMLDivElement} */
+	let scratch;
+	let errors = [];
+	let warnings = [];
+
+	beforeEach(() => {
+		errors = [];
+		warnings = [];
+		scratch = setupScratch();
+		sinon.stub(console, 'error').callsFake(e => errors.push(e));
+		sinon.stub(console, 'warn').callsFake(w => warnings.push(w));
+	});
+
+	afterEach(() => {
+		/** @type {*} */
+		console.error.restore();
+		console.warn.restore();
+		teardown(scratch);
+	});
+
+	beforeEach(() => {
+		resetPropWarnings();
+	});
+
+	it("should fail if props don't match prop-types", () => {
+		function Foo(props) {
+			return jsxDev('h1', { children: props.text });
+		}
+
+		Foo.propTypes = {
+			text: PropTypes.string.isRequired
+		};
+
+		render(
+			jsxDev(
+				Foo,
+				{ text: 123 },
+				null,
+				// @ts-ignore
+				false,
+				// @ts-ignore
+				{ fileName: './debug/test/browser/debug.test.js', lineNumber: 41 },
+				// @ts-ignore
+				'self'
+			),
+			scratch
+		);
+
+		expect(console.error).to.be.calledOnce;
+
+		// The message here may change when the "prop-types" library is updated,
+		// but we check it exactly to make sure all parameters were supplied
+		// correctly.
+		expect(console.error).to.have.been.calledOnceWith(
+			sinon.match(
+				/^Failed prop type: Invalid prop `text` of type `number` supplied to `Foo`, expected `string`\.\n {2}in Foo \(at (.*)[/\\]debug[/\\]test[/\\]browser[/\\]debug\.test\.js:[0-9]+\)$/m
+			)
+		);
+	});
+
+	it('should only log a given prop type error once', () => {
+		function Foo(props) {
+			return jsxDev('h1', { children: props.text });
+		}
+
+		Foo.propTypes = {
+			text: PropTypes.string.isRequired,
+			count: PropTypes.number
+		};
+
+		// Trigger the same error twice. The error should only be logged
+		// once.
+		render(jsxDev(Foo, { text: 123 }), scratch);
+		render(jsxDev(Foo, { text: 123 }), scratch);
+
+		expect(console.error).to.be.calledOnce;
+
+		// Trigger a different error. This should result in a new log
+		// message.
+		console.error.resetHistory();
+		render(jsxDev(Foo, { text: 'ok', count: '123' }), scratch);
+		expect(console.error).to.be.calledOnce;
+	});
+
+	it('should render with error logged when validator gets signal and throws exception', () => {
+		function Baz(props) {
+			return jsxDev('h1', { children: props.unhappy });
+		}
+
+		Baz.propTypes = {
+			unhappy: function alwaysThrows(obj, key) {
+				if (obj[key] === 'signal') throw Error('got prop');
+			}
+		};
+
+		render(jsxDev(Baz, { unhappy: 'signal' }), scratch);
+
+		expect(console.error).to.be.calledOnce;
+		expect(errors[0].includes('got prop')).to.equal(true);
+		expect(serializeHtml(scratch)).to.equal('<h1>signal</h1>');
+	});
+
+	it('should not print to console when types are correct', () => {
+		function Bar(props) {
+			return jsxDev('h1', { children: props.text });
+		}
+
+		Bar.propTypes = {
+			text: PropTypes.string.isRequired
+		};
+
+		render(jsxDev(Bar, { text: 'foo' }), scratch);
+		expect(console.error).to.not.be.called;
+	});
+});