Testing Vue Components in the Browser
이 글은 Node.js 같은 서버 사이드 JS 런타임 없이 브라우저에서 직접 Vue 컴포넌트 테스트를 수행하는 방법을 다룹니다. QUnit을 테스트 프레임워크로 사용해 컴포넌트를 DOM에 마운트하고, 네트워크 요청 대기 문제를 해결하기 위해 커스텀 waitFor 함수를 구현했습니다. 폼 입력 처리, 테스트 커버리지 확인, 그리고 테스트 라이브러리(Testing Library) 도입 가능성 등 실무에서 마주치는 여러 이슈와 해결책을 공유합니다. 브라우저 내 테스트 실행은 빠르고 간단하지만, CI 환경에서의 자동화 실행 방안은 추가 고민이 필요합니다.
https://jvns.ca/blog/2026/05/02/testing-vue-components-in-the-browser/
Stickers packed and ready for FOSDEM!
Message me to meet and take some!
Including:
* fresh roll of QUnit stickers
* classic jQuery stickers
* brand new Devo-hat stickers from jQuery's 20th birthday event
* Wikipedia and MediaWiki logos
* (not pictured) tons more misc webperf/JS/foss/moz stickers collected over the years.
QUnit 2.25 is out!
Highlights from 2.24.1 and 2.25.0:
🧩 Support display of "early" errors in the HTML Reporter, to ease debugging.
✨ Add new test filter callback feature, to simplify building parallel test runners and other cool stuff. Thanks Sebastian Gbudje and @nullvoxpopuli!
🐛 Fix spec compliance bugs in TAP-reporter.
Details: https://qunitjs.com/blog/2025/12/30/qunit-2-25-0/
Download: https://qunitjs.com/intro/#release-channels
Ever wondered how beforeEach works in unit test frameworks? Check out our new lifecycle diagram!
https://qunitjs.com/lifecycle/
People generally guess right when it comes to ordering, so why a diagram?
We want to show that the order is guaranteed, and showcase what's possible when you depend on it.
Thanks to FND, Jan, and NullVoxPopuli for improving and promoting this work! H/T @FND @simulo @nullvoxpopuli
#qunit #WriteTheDocs #TechnicalWriting #SoftwareDocumentation #documentation #TDD
I'm drafting a diagram to explain how before/after hooks work in unit tests.
They tend to work the same way across test frameworks, so it's not unique to QUnit. But, new devs will learn this for the first time, so I think it's worth explaining.
Page:
https://qunitjs.com/api/QUnit/module/#hooks
Issue tracker:
https://github.com/qunitjs/qunit/issues/1358#issuecomment-2614663327
What do you think?
#qunit #WriteTheDocs #TechnicalWriting #SoftwareDocumentation #documentation #devex #TDD
QUnit 2.24.0 is out!
Highlights from 2.23.1 and 2.24.0:
📝 Improved CLI output with the new stack trace formatter.
🧩 Include mjs and cjs files by default when testing a directory.
✨ There is a new QUnit Blog for your feed reader.
Details: https://qunitjs.com/blog/2025/01/20/qunit-2-24-0/
Download: https://qunitjs.com/intro/#release-channels
QUnit 2.23.0 is out!
🏷️ Add automatic labels for simple array values in `QUnit.test.each()`.
Changelog: https://github.com/qunitjs/qunit/blob/main/History.md#2230--2024-12-03
Download: https://qunitjs.com/intro/#release-channels
Learn more:
https://qunitjs.com/api/QUnit/test.each/
QUnit 2.22.0 is out!
☑️ New `test.if()` and `module.if()` functions to facilitate conditional skipping.
Changelog: https://github.com/qunitjs/qunit/blob/2.22.0/History.md
Download: https://qunitjs.com/intro/#release-channels
Docs: https://qunitjs.com/api/QUnit/test.if/
Oh my,
a web component?
on jquery dot com?
minibar is a 2kB standalone search widget. Accessible and progressively-enhancing (works without JavaScript!). An alternative to the popular 100kB DocSearch.js widget.
It goes well with Typesense, an awesome FLOSS open-source alternative to Algolia. And it's (if you want, and yes we do) self-hostable!
https://github.com/jquery/typesense-minibar
Demo: https://jquery.com/
or https://qunitjs.com/
#webperf #typesense #ProgressiveEnhancement #algolia #jquery #qunit
sayzard
Timo Tijhof
QUnit
QUnit
