JavaScript Testing Framework: Under the Hood(JSConfJP2022)

jsconfjp 2022 LT: https://jsconf.jp/2022/talk/javascript-testing-framework-under-the-hood

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

References:
Building a JavaScript Testing Framework: https://cpojer.net/posts/building-a-javascript-testing-framework

vitest: https://github.com/vitest-dev/vitest
ava: https://github.com/avajs/ava
jest: https://github.com/facebook/jest
deno_std: https://github.com/denoland/deno_std/tree/main/testing

Transcript

1. JavaScript Testing Framework: Under the Hood 11/26/2022 JSConfJP LT 17:40 ~ 17:50 @togami2864
2. $whoami Yoshiaki Togami - B4 student major in electronic engineering - JSer at noon, Rustacean at night Github: @togami2864
3. In this Lightning Talk… ❌: How to set up a testing framework 🤔 ❌: How to use ESM with tests 🤔 ❌: How to run test with TypeScript 🤔
4. Agenda ✅ What’s happening under the hood 🤔 Learn through building tiny clone.
5. Build our tiny test framework Goal: Our framework can test codes including basic test functions - expect - it - describe
6. 1. Simple case: only expect PASS FAIL
7. 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
8. Demonstration FAIL PASS
9. 2. With describe(), it() 📚describe() and it() is the function just for categorizing. 📚Not for judging the test code
10. Execute “describe()” Iterate collected suites Iterate cases
11. 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
12. Our test framework v2(lib) = describe = it example
13. = it Update to set the suite currently dealing with example
14. Our test framework v2(runtime) Initialize a empty suite per `describe` 1. exec describe() by evaluating the file
15. Our test framework v2(runtime) Exec Collect cases in `describe`
16. Iterate suites and eval cases
17. Demo v2 PASS FAIL
18. 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
19. 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
20. 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
21. Github Repo - https://github.com/togami2864/jsconfjp2022-demo