Use TypeScript in tests (#5433)

.mocharc.js

@@ -1,15 +1,14 @@
 module.exports = {
 	file: [
-		'test/test.js'
+		'test/test.ts'
+	],
+	require: [
+		'sucrase/register'
 	]
 };
 
 // add coverage options when running 'npx c8 mocha'
 if (process.env.NODE_V8_COVERAGE) {
-	Object.assign(module.exports, {
+	module.exports.fullTrace = true;
-		fullTrace: true,
+	module.exports.require.push('source-map-support/register');
-		require: [
-			'source-map-support/register'
-		]
-	});
 }

test/.eslintrc.json

@@ -1,5 +1,6 @@
 {
   "rules": {
-    "no-console": "off"
+    "no-console": "off",
+    "@typescript-eslint/no-var-requires": "off"
   }
 }

test/css/index.ts

@@ -1,6 +1,5 @@
-import * as assert from 'assert';
 import * as fs from 'fs';
-import { env, svelte, setupHtmlEqual, shouldUpdateExpected } from '../helpers.js';
+import { assert, env, svelte, setupHtmlEqual, shouldUpdateExpected } from '../helpers';
 
 function try_require(file) {
 	try {

test/custom-elements/index.ts

@@ -2,9 +2,9 @@ import * as fs from 'fs';
 import * as path from 'path';
 import * as http from 'http';
 import { rollup } from 'rollup';
-import * as virtual from '@rollup/plugin-virtual';
+import virtual from '@rollup/plugin-virtual';
-import * as puppeteer from 'puppeteer';
+import puppeteer from 'puppeteer';
-import { addLineNumbers, loadConfig, loadSvelte } from "../helpers.js";
+import { addLineNumbers, loadConfig, loadSvelte } from "../helpers";
 import { deepEqual } from 'assert';
 
 const page = `

test/helpers.ts

@@ -1,9 +1,10 @@
+import * as assert$1 from 'assert';
 import * as jsdom from 'jsdom';
-import * as assert from 'assert';
+import glob from 'tiny-glob/sync';
-import * as glob from 'tiny-glob/sync.js';
 import * as path from 'path';
 import * as fs from 'fs';
 import * as colors from 'kleur';
+export const assert = (assert$1 as unknown) as typeof assert$1 & { htmlEqual: (actual, expected, message?) => void };
 
 // for coverage purposes, we need to test source files,
 // but for sanity purposes, we need to test dist files
@@ -63,7 +64,7 @@ global.window = window;
 
 // add missing ecmascript globals to window
 for (const key of Object.getOwnPropertyNames(global)) {
-	window[key] = window[key] || global[key];
+	if (!(key in window)) window[key] = global[key];
 }
 
 // implement mock scroll

test/hydration/index.ts

@@ -1,15 +1,15 @@
-import * as assert from 'assert';
 import * as path from 'path';
 import * as fs from 'fs';
 
 import {
+	assert,
 	showOutput,
 	loadConfig,
 	loadSvelte,
 	env,
 	setupHtmlEqual,
 	shouldUpdateExpected
-} from '../helpers.js';
+} from '../helpers';
 
 let compileOptions = null;
 
@@ -58,13 +58,7 @@ describe('hydration', () => {
 			try {
 				global.window = window;
 
-				let SvelteComponent;
+				const SvelteComponent = require(`${cwd}/main.svelte`).default;
-
-				try {
-					SvelteComponent = require(`${cwd}/main.svelte`).default;
-				} catch (err) {
-					throw err;
-				}
 
 				const target = window.document.body;
 				const head = window.document.head;
@@ -75,7 +69,9 @@ describe('hydration', () => {
 				try {
 					before_head = fs.readFileSync(`${cwd}/_before_head.html`, 'utf-8');
 					head.innerHTML = before_head;
-				} catch (err) {}
+				} catch (err) {
+					// continue regardless of error
+				}
 
 				const snapshot = config.snapshot ? config.snapshot(target) : {};
 

test/js/index.ts

@@ -2,7 +2,7 @@ import * as assert from "assert";
 import * as fs from "fs";
 import * as path from "path";
 import * as colors from "kleur";
-import { loadConfig, svelte, shouldUpdateExpected } from "../helpers.js";
+import { loadConfig, svelte, shouldUpdateExpected } from "../helpers";
 
 describe("js", () => {
 	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {

test/parser/index.ts

@@ -1,6 +1,6 @@
 import * as assert from 'assert';
 import * as fs from 'fs';
-import { svelte, tryToLoadJson, shouldUpdateExpected } from '../helpers.js';
+import { svelte, tryToLoadJson, shouldUpdateExpected } from '../helpers';
 
 describe('parse', () => {
 	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
@@ -38,7 +38,7 @@ describe('parse', () => {
 			} catch (err) {
 				if (err.name !== 'ParseError') throw err;
 				if (!expectedError) throw err;
-				const { code, message, pos, start } = err
+				const { code, message, pos, start } = err;
 				try {
 					assert.deepEqual({ code, message, pos, start }, expectedError);
 				} catch (err2) {

test/preprocess/index.ts

@@ -1,6 +1,6 @@
 import * as fs from 'fs';
 import * as assert from 'assert';
-import { loadConfig, svelte } from '../helpers.js';
+import { loadConfig, svelte } from '../helpers';
 
 describe('preprocess', () => {
 	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {

test/runtime/index.ts

@@ -1,12 +1,12 @@
-import * as assert from "assert";
 import * as path from "path";
 import * as fs from "fs";
 import { rollup } from 'rollup';
-import * as virtual from '@rollup/plugin-virtual';
+import virtual from '@rollup/plugin-virtual';
-import * as glob from 'tiny-glob/sync.js';
+import glob from 'tiny-glob/sync.js';
 import { clear_loops, flush, set_now, set_raf } from "../../internal";
 
 import {
+	assert,
 	showOutput,
 	loadConfig,
 	loadSvelte,
@@ -14,7 +14,7 @@ import {
 	env,
 	setupHtmlEqual,
 	mkdirp
-} from "../helpers.js";
+} from "../helpers";
 
 let svelte$;
 let svelte;

test/server-side-rendering/index.ts

@@ -1,9 +1,9 @@
-import * as assert from "assert";
 import * as fs from "fs";
 import * as path from "path";
-import * as glob from 'tiny-glob/sync.js';
+import glob from 'tiny-glob/sync.js';
 
 import {
+	assert,
 	showOutput,
 	loadConfig,
 	loadSvelte,
@@ -12,7 +12,7 @@ import {
 	cleanRequireCache,
 	shouldUpdateExpected,
 	mkdirp
-} from "../helpers.js";
+} from "../helpers";
 
 function tryToReadFile(file) {
 	try {

test/sourcemaps/index.ts

@@ -1,7 +1,7 @@
 import * as fs from "fs";
 import * as path from "path";
 import * as assert from "assert";
-import { svelte } from "../helpers.js";
+import { svelte } from "../helpers";
 import { SourceMapConsumer } from "source-map";
 import { getLocator } from "locate-character";
 

test/stats/index.ts

@@ -1,6 +1,6 @@
 import * as fs from 'fs';
 import * as assert from 'assert';
-import { svelte, loadConfig, tryToLoadJson } from '../helpers.js';
+import { svelte, loadConfig, tryToLoadJson } from '../helpers';
 
 describe('stats', () => {
 	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {

test/test.ts

@@ -3,12 +3,12 @@ const glob = require('tiny-glob/sync.js');
 require('./setup');
 
 // bind internal to jsdom
-require('./helpers');
+require('./helpers.ts');
 require('../internal');
 
 console.clear();
 
-const test_folders = glob('*/index.js', { cwd: 'test' });
+const test_folders = glob('*/index.ts', { cwd: 'test' });
 const solo_folders = test_folders.filter(folder => /\.solo/.test(folder));
 
 if (solo_folders.length) {

test/validator/index.ts

@@ -1,6 +1,6 @@
 import * as fs from "fs";
 import * as assert from "assert";
-import { svelte, loadConfig, tryToLoadJson } from "../helpers.js";
+import { svelte, loadConfig, tryToLoadJson } from "../helpers";
 
 describe("validate", () => {
 	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {
@@ -30,7 +30,7 @@ describe("validate", () => {
 					legacy: config.legacy,
 					generate: false,
 					customElement: config.customElement,
-					...options,
+					...options
 				});
 
 				assert.deepEqual(warnings.map(w => ({

test/vars/index.ts

@@ -1,6 +1,6 @@
 import * as fs from 'fs';
 import * as assert from 'assert';
-import { svelte, loadConfig, tryToLoadJson } from '../helpers.js';
+import { svelte, loadConfig, tryToLoadJson } from '../helpers';
 
 describe('vars', () => {
 	fs.readdirSync(`${__dirname}/samples`).forEach(dir => {