モダンなフロントエンドにおけるテストについて ［Modern Featured Test］
https://gihyo.jp/article/2025/06/ride-modern-frontend-09?utm_source=feed
#gihyo #技術評論社 #gihyo_jp #Front_end #フロントエンド開発 #JS #フロントエンド #Jest #Test #テスト #Vitest #Storybook
#jest
Скриншот-тестирование фронтенда: руководство по применению в 2025 году
В мире тестирования фронтенд-приложений существует одна забавная особенность. Визуальное представление нашей программы почти всегда остается вне зоны покрытия тестами, даже несмотря на то, что фронтенд-разработка это в первую очередь про визуал. Если посмотреть на то как пишут тесты на типичном проекте, то в основном это будут юнит-тесты проверяющие внутреннюю специфику компонентов или отдельных функций плюс какие-нибудь е2е-тесты проверяющие отдельные сценарии. Чаще всего все эти тесты полностью игнорируют визуальную составляющую, и в случаях если у вас слетели шрифты, отступы, или просто html-элемент скрыт стилями, то тесты все-равно будут зелеными. Часто приходилось видеть тесты опосредовано проверяющие визуальное отображение html-элемента, что-то в стиле expect(elem.classList.contains("visible")).toBe(true) . Говорить о надежности таких тестов конечно-же не приходится, так как изменив содержимое css-селектора стилизующий данный класс, данный тест все еще будет зелёным, несмотря на то что по факту элемент будет скрыт. Результат от подобных тестов вполне ожидаемый. Обновили версию UI-библиотеки и на всем проекте поехала верстка? Тесты зелёные. Случайно переопределили CSS-переменную и теперь вместо приятной тщательно подобранной дизайнером гаммы цветов вы видите лишь кислотно-вырвиглазную солянку? “Бывает, надо было ручками протестировать” - скажет менеджер. Решить данную проблему нам поможет добавление скриншот-тестирования на проект. Используя данный вид тестирования вкупе с классическими юнит- и е2е-тестами мы практически полностью избавляемся от необходимости ручного тестирования наших фронтенд-приложений.
https://habr.com/ru/articles/925162/
#screenshotbased_метод_тестирования #test_driven_development #testng #puppeteer #jest
Настройка Jest и React Testing Library: пошаговое руководство для React и Next.js проектов
В данной статье мы подробно рассмотрим процесс настройки среды unit-тестирования веб-приложений на базе React и Next.js с использованием Jest и React Testing Library. Мы расскажем об установке необходимых зависимостей, создании конфигурационных файлов, настройке Babel и TypeScript, подключении SCSS и SVG, а также организации структуры проекта. Особое внимание уделено специфике настройки Jest в среде Next.js . Материал будет полезен для frontend-разработчиков и команд разработки, которые работают с React или Next.js проектами и хотят внедрить качественное unit-тестирование.
https://habr.com/ru/articles/920988/
#jest #React_Testing_Library #unitтестирование #настройка_тестов #Nextjs #TypeScript #конфигурация #frontend #RTL
【React×TypeScript】React初心者が3ヶ月で「名刺作成アプリ」を実装しました
https://qiita.com/nagi-0106/items/5e2c3843d67f0ff30c5e?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items
Spent lunch today investigating an issue and then putting together a PR for json-autotranslate. It's a brilliant little #foss package for automating machine translation for #i18n (with the ability to make manual corrections). Send the maintainer(s) over there some love.
Through this I've learned I am not well versed in #jest #mocking
The output and filtering options of #jest are really painful, the test summary is printed at the top and the output is so verbose that it always gets pushed out of the buffer.
The developers wanted to die on a hill that you should just have more then 20 test suites because that automatically makes the output less verbose and that no control is needed...
https://github.com/jestjs/jest/issues/3322
I recommend to do `npm run test > garbage.log` because all the good stuff is pushed to stderr.
【TypeScript×React×Chakra UI】学習記録アプリをリニューアルしました
https://qiita.com/nagi-0106/items/c3675afffd867e5934f9?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items
Remember when #Jest claimed to be "painless JavaScript testing"? After all this years, this is still one of my favorite comments on testing 😈
Юнит тесты роя агентов
🐝 Тестирование роя агентов Юнит тесты - единственный способ принять работу промпт инженера, так как не понятно, действительно ли он всё это время чатился с моделью или списал в работу на 5 минут пару недель времени. Так же, статья содержит типовые галлюцинации роя агентов, которые обязательно нужно проверить
https://habr.com/ru/articles/906730/
#typescript #javascript #python #openai #jest #unittesting #mock #ai #machinelearning #llm
.. struck me kinda funny as I spied the opportunity to create a humorous image from a random set of object atop the chest of draws y'all .. wadya fink ❓️🤫
#photography #humour #satire #irony #jest #joker #image #aesthetic #art #cartoon
Пробуем Junie от JetBrains на реальной задаче (или как я попал в рассказ Азимова)
JetBrains зарелизил новую версию своего AI-ассистента и вместе с ним Junie - автономного нейросетевого агента-программиста, которому можно поручать небольшие рабочие задачи. Буквально вчера я получил к нему доступ и не смог не воспользоваться возможностью. Я даже не представлял... насколько это весело.
https://habr.com/ru/articles/904876/
#junie #jetbrains #react #typescript #тестирование #тестирование_вебприложений #искусственный_интеллект #javascript #chatgpt #jest
Пробуем Junie от JetBrains на реальной задаче (или как я попал в рассказ Азимова)
JetBrains зарелизил новую версию своего AI-ассистента и вместе с ним Junie - автономного нейросетевого агента-программиста, которому можно поручать небольшие рабочие задачи. Буквально вчера я получил к нему доступ и не смог не воспользоваться возможностью. Я даже не представлял... насколько это весело.
https://habr.com/ru/articles/904876/
#junie #jetbrains #react #typescript #тестирование #тестирование_вебприложений #искусственный_интеллект #javascript #chatgpt #jest
Karsan 10 Bininci JEST’i Banttan İndirdi!: Toplu ulaşımda bir dünya markası haline gelen Karsan, yenilikçi ürün gamındaki minibüs modeli JEST ile önemli bir kilometre taşını daha geride bıraktı. Üretimi 2013 yılında başlayan JEST model ailesinin 10 bininci aracı, Bursa’daki Hasanağa Fabrikası’nın bantlarından indirildi. 10 bininci JEST üretiminin gururunu yaşadıklarını söyleyen Karsan CEO’su Okan Baş, “Bu… https://www.eshahaber.com.tr/haber/karsan-10-bininci-jest-i-banttan-indirdi-221190.html?utm_source=dlvr.it&utm_medium=mastodon EshaHaber.com.tr #Karsan #JEST #TopluUlaşım #Bursa #Minibüs
GitHub ActionsでJestを実行してテスト結果をWebhookでSlackに通知してみた
https://dev.classmethod.jp/articles/github-actions-jest-webhook-slack/
Охота за 100% покрытием: как собрать все метрики воедино в монорепозитории Nx
Работая с монорепозиториями на Nx, часто возникает необходимость получить единый отчёт о покрытии кода. Однако по умолчанию каждый проект генерирует отдельный файл, что затрудняет анализ. В этой статье расскажем, как с помощью nyc-merge объединить все отчёты в один.
https://habr.com/ru/articles/901270/
#nx #monorepo #javascript #покрытие_кода_тестами #тестирование_вебприложений #ci_cd #istanbul #nyc #jest
🌗 1993年的蒸汽火車搞垮了我的測試
➤ 一場由命名衝突引發的奇異測試崩潰事件
✤ https://blog.cloudflare.com/yarn-test-suffers-strange-derailment/
一位開發者在嘗試執行 React 專案的單元測試時，遭遇了一個奇怪的錯誤：測試會在精準的 27 秒後崩潰。經過長時間的排查，包括分析系統追蹤記錄，最終發現問題的根源並非程式碼錯誤，而是因為系統中安裝了一個名為 `sl` 的 1993 年的惡搞程式，與 Jest 嘗試呼叫的另一個 `sl` 命令（一個版本控制工具）產生了命名衝突。
+ 真是太有趣了！誰能想到一個 1993 年的程式會搞垮現代的 JavaScript 測試？這也提醒我們，開發環境的清潔度很重要。
+ 這個故事太精彩了，讓人印象深刻！看著他一步步排除錯誤，最後發現問題竟然出在一個惡搞程式上，真是讓人啼笑皆非。
#開發者疑難排查 #JavaScript #React #Jest #Yarn
I despise `it.each(testCases)` ….
Feel it’s like debugging a pile of mud…
Client Info
Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst