VanillaTS
VanillaTS runs using JSDOM.
Version
Running on Node.js v20.0.0
Supported languages
Typescript
Testing framework
Special reminders and implementation details
Remember to always keep your scripts modular and make use of TypeScript's type annotations, interfaces, and other features for type safety. Utilize the Document Object Model (DOM) for manipulating and interacting with web page elements, ensuring that you use type guards when necessary.
ts
import { createHeader } from './helloWorld';
describe('helloWorld.ts', () => {
beforeEach(() => {
document.documentElement.innerHTML = global.htmlContent;
});
test("Should create a h1 with text Hello World!", () => {
createHeader();
const header = document.querySelector('h1');
expect(header.textContent.trim()).toEqual("Hello World!");
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Included libraries
How to debug
Debugging TypeScript code is similar to debugging JavaScript, and you can use console.log()
statements in TypeScript just as you would in JavaScript.
Steps to Debug Using Console Logs
Identify the Problem Area: Locate the section of your TypeScript code where you suspect the problem might be.
Insert
console.log()
Statements: Addconsole.log()
statements before and after the suspected problematic code to print out variable values and flow control.Check the Results Output of your tests.
Use Debug Icon in Preview Area: Click on the debug icon in the Preview area to check the console output or check your browser console.
Analyze the Output: Look at the values printed in the console to understand what's going wrong in your code. Adjust your code based on the findings and repeat as necessary.
Here’s an example of how to use console.log()
for debugging in TypeScript:
typescript
function calculateSum(a: number, b: number): number {
console.log("calculateSum called with arguments:", a, b); // Log function call
let sum: number = a + b;
console.log("Sum after addition:", sum); // Log sum calculation
return sum;
}
let result: number = calculateSum(5, 10);
console.log("Result of calculateSum:", result); // Log the result
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9