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