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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. 1. Simple case: only expect
   PASS
   FAIL
   

   View Slide

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
   

   View Slide

8. Demonstration
   FAIL
   PASS
   

   View Slide

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

   View Slide

10. Execute “describe()”
    Iterate collected suites
    Iterate cases
    

    View Slide

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
    

    View Slide

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

    View Slide

13. = it
    Update to set the suite currently dealing with
    example
    

    View Slide

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

    View Slide

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

    View Slide

16. Iterate suites and eval cases
    

    View Slide

17. Demo v2
    PASS
    FAIL
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide