fix: Wrap hydration debug message vars in quotes (#4609)

Author: rschristian

debug/src/debug.js

@@ -589,6 +589,6 @@ options._hydrationMismatch = (newVNode, excessDomChildren) => {
 		.map(child => child && child.localName)
 		.filter(Boolean);
 	console.error(
-		`Expected a DOM node of type ${type} but found ${availableTypes.join(', ')} as available DOM-node(s), this is caused by the SSR'd HTML containing different DOM-nodes compared to the hydrated one.\n\n${getOwnerStack(newVNode)}`
+		`Expected a DOM node of type "${type}" but found "${availableTypes.join(', ')}" as available DOM-node(s), this is caused by the SSR'd HTML containing different DOM-nodes compared to the hydrated one.\n\n${getOwnerStack(newVNode)}`
 	);
 };

debug/test/browser/debug.test.js

@@ -889,7 +889,7 @@ describe('debug', () => {
 			hydrate(<App />, scratch);
 			expect(console.error).to.be.calledOnce;
 			expect(console.error).to.be.calledOnceWith(
-				sinon.match(/Expected a DOM node of type p but found span/)
+				sinon.match(/Expected a DOM node of type "p" but found "span"/)
 			);
 		});