Slide 1

Slide 1 text

JavaScript Testing Framework: Under the Hood 11/26/2022 JSConfJP LT 17:40 ~ 17:50 @togami2864

Slide 2

Slide 2 text

$whoami Yoshiaki Togami - B4 student major in electronic engineering - JSer at noon, Rustacean at night Github: @togami2864

Slide 3

Slide 3 text

In this Lightning Talk… ❌: How to set up a testing framework 🤔 ❌: How to use ESM with tests 🤔 ❌: How to run test with TypeScript 🤔

Slide 4

Slide 4 text

Agenda ✅ What’s happening under the hood 🤔 Learn through building tiny clone.

Slide 5

Slide 5 text

Build our tiny test framework Goal: Our framework can test codes including basic test functions - expect - it - describe

Slide 6

Slide 6 text

1. Simple case: only expect PASS FAIL

Slide 7

Slide 7 text

Our test framework v1 1. Get all files including .test.js 2. Read files as string 3. Eval a. If error occurs => FAIL b. success => PASS

Slide 8

Slide 8 text

Demonstration FAIL PASS

Slide 9

Slide 9 text

2. With describe(), it() 📚describe() and it() is the function just for categorizing. 📚Not for judging the test code

Slide 10

Slide 10 text

Execute “describe()” Iterate collected suites Iterate cases

Slide 11

Slide 11 text

Implementation(abstract) - lib - it, describe - Imported to the test file - Runtime 1. Get file path of tests 2. Evaluate the test file => execute describe() 3. Run collect() => execute it() inside describe() 4. Iterate over suites and evaluate test cases(same as v1) 5. Output results

Slide 12

Slide 12 text

Our test framework v2(lib) = describe = it example

Slide 13

Slide 13 text

= it Update to set the suite currently dealing with example

Slide 14

Slide 14 text

Our test framework v2(runtime) Initialize a empty suite per `describe` 1. exec describe() by evaluating the file

Slide 15

Slide 15 text

Our test framework v2(runtime) Exec Collect cases in `describe`

Slide 16

Slide 16 text

Iterate suites and eval cases

Slide 17

Slide 17 text

Demo v2 PASS FAIL

Slide 18

Slide 18 text

Conclusion ✅ What’s happening under the hood 🤔 1. Get .test.js file path 2. Exec describe() via evaluating files 3. Run collect() to run it() 4. Iterate collected suites and eval tests 5. Output results

Slide 19

Slide 19 text

More features… - Hook,Mocking,Chain - Parallelization - Dependency Resolving - Dependency caching - Where’s bottleneck in the execution speed? - How is the implementation of the test runner built in node, deno, bun? - Will alternatives written in other languages appear?(like babel, eslint, prettier..) Advanced Topic

Slide 20

Slide 20 text

References - Building a JavaScript Testing Framework(by cpojer) - This is highly recommended to read before code reading - https://cpojer.net/posts/building-a-javascript-testing-framework - ava - https://github.com/avajs/ava - Jest - https://github.com/facebook/jest - Vitest - https://github.com/vitest-dev/vitest - deno-std/testing/bdd.ts - https://github.com/denoland/deno_std/testing/bdd.ts

Slide 21

Slide 21 text

Github Repo - https://github.com/togami2864/jsconfjp2022-demo