Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript Testing Framework: Under the Hood(JSConfJP2022)

JavaScript Testing Framework: Under the Hood(JSConfJP2022)

Yoshiaki Togami/戸上義章

November 27, 2022
Tweet

Other Decks in Programming

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