Wallaby - Immediate JavaScript test feedback in your IDE as-you-type
Wallaby.js is a developer productivity tool that runs your JavaScript and TypeScript tests immediately as you type, highlighting results in your IDE right next to your code. Test execution results, including code coverage, are displayed and updated in realtime right where you need to see them — in your code editor, next to the line of code that you're editing. Say goodbye to context switching. The
Jest の shard オプションと GitHub Actions の matrix strategy を使用して並列にテストを実行する
Jest の shard オプション Jest の v28 のリリースで CLI に --shard というオプションが追加されました。 このオプションは jest --shard=1/3 という形で jest を実行すると、最初の 1/3 だけのテストを実行する仕組みを提供しています。 GitHub Actions の matrix strategy matrix strategy は job に指定すると、事前に列挙した変数ごとに job を実行する仕組みです。 以下のように書くと、shard がそれぞれ 1/4、2/4、3/4、4/4 の4つの値を取る4つの job が並列に実行されます。 この仕組みと Jest の shard オプションを組み合わせることで、テストを並列に実行することができます。 サンプルリポジトリ これを試したサンプルリポジトリは次のリンクです。 git pus
サーバーサイドのESMプロジェクト(TypeScript)のテストをts-jestとesbuild-jestで実行する
の続き。 jestで実行する際も色々ハマりどころがあったのでメモ。 TypeScriptプロジェクトなので、ts-jestとesbuild-jestのそれぞれを使ってやってみた。 検証環境 Linux: Ubuntu22.04LTS @WSL2（Windows11） nodejs 18.13.0LTS pnpm@7.26.3 npmやyarnを使っている人は適宜読み替えてください (TypeScript: 4.9.5) セットアップ package.jsonで"type": "module"を設定し、tsconfig.jsonは前回記事のような感じ で書いておく テストコード ESM特有の機能を使えていることを確認したいので、意味は無いがtop-level-awaitを含むテストコードがエラー無しで実行することを確認する。 /** 10msec待機した後に文字列をtop-level-awa
Pactflow Contract Testing Platform
📣 Decommissioning announcement: legacy Pact Broker Hosted Beta plans will be migrated July 17th. Act now to avoid downtime >>
テスト優先度をあげたくなる実話 - フロントエンド版 -
Storybook・テストに関して「メンテナンス工数に見合うだけのメリットがあるか？」という議論を、経験したことはないでしょうか。フロントエンドは、とにかく動くものを作ることが優先され、Storybook・テストが二の次になっている現場も少なくないと思います。 限りある工数を割きチームで取り組むものですから、導入するためには「どういったメリットがあるのか？」という具体的な例をチームに示す必要があります。これは今年、筆者が体験した実メリットのお話です。導入を躊躇している現場にむけ、参考になればと思い書きました。 【Storybook】不要な Global CSS を削除できた きちんとコンポーネント設計され、コンポーネントに閉じた指定をしていたとしても、どこかに必ず Global な CSS があると思います。何かしらの資材を受け継ぎ立ち上げたプロジェクトに関しては、Global な CSS
ローコードテスト自動化ツールの mabl がすごい
というのを使っていて思ったのでレポを書いていきます。 mabl とは - 基本的な機能 ざっくり言うと E2E テストをお手軽にメンテできるツールです。 こんな感じでポチポチ画面を操作していくと、それで実行したアクション(ボタンやリンクをクリックするなど)を自動で記録してくれて、E2E のテストを作成することが出来ます。 コードを書かずに E2E テストをサクッと作れちゃうのが魅力な訳ですが、それだけではありません。そんなすごいところを紹介していこうと思います。 mabl のここがすごい Auto Healing 何やら回復魔法みたいな感じでかっこいいですが、何かというと E2E テストがコケるようになった時に自動で修復してくれる機能です。 例えばボタンの位置が変わってしまっても、同じ文脈であろうボタンを自動で探して修復したりしてくれます。 E2E での辛さといえば、やはりテストのメンテナ
Visual Regression Testing はじめました - 具体的な運用 Tips | Recruit Tech Blog
こんにちは。スタディサプリ ENGLISH Web フロントチームの kazuma1989 です。 先日、私たちのチームは開発フローに Visual Regression Testing を導入しました。Visual Regression Testing は、フレームワークを紹介する記事は見つかるものの、具体的な知見があまり広まっていない印象なので、具体的な設定値や選定理由も含め紹介してみます。 React による Web フロント開発を前提にしていますが、Visual Regression Testing のコア部分は「画像の比較」であるため、他のプラットフォーム開発でも参考になればと思います。 Visual Regression Testing (VRT) とは Visual Regression Testing （日本語で 画像回帰テスト、以下 VRT）は、画像の差分を検出する、スナ
Stop mocking fetch
What's wrong with this test? // __tests__/checkout.js import * as React from 'react' import {render, screen} from '@testing-library/react' import userEvent from '@testing-library/user-event' import {client} from '~/utils/api-client' jest.mock('~/utils/api-client') test('clicking "confirm" submits payment', async () => { const shoppingCart = buildShoppingCart() render(<Checkout shoppingCart={shoppi
VRTやってますか？reg-suitですか？
2021/03/05 ANDPAD TechLive #4 ANDPAD FrontEnd NOW!!
GitHub - qawolf/qawolf: 🐺 Create browser tests 10x faster
At QA Wolf, we’re building the magical QA experience that we wanted when we were managing engineering teams. With zero effort on your part, we get you to 80% automated test coverage in 4 months — and keep you there. We plan. You’ll get a test matrix covering every user flow in your web app, from happy path to edge case and everything in between. We automate. Using vanilla, open source Microsoft Pl
Testing Angular Faster with Jest - Xfive
It struck me how painful experience it was to test an Angular app. And then I realized it can be painless with Jest. This article was last updated on Sep 23, 2019, so the setup works with the latest Angular versions. If you still have troubles with your project setup, please open an issue in the jest-preset-angular project. Note: This article assumes you are using an Angular CLI v1.0 generated pro
Testing your React App with Puppeteer and Jest
Project SetupLet’s begin by setting up a basic React App. We will install other dependencies such as Puppeteer and Faker. For the sake of this post, I have created a simple app that contains a form and renders a success message on form submission. Clone this app into your system. git clone https://github.com/rajatgeekyants/test.gitNow, let’s install dev dependencies. yarn installWe don’t need to i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://blog.sentry.io/2023/02/23/sentrys-frontend-tests-migrating-from-enzyme-to-react-testing-library/
GitHub - stepci/stepci: Automated API Testing and Quality Assurance
GitHub - getgauge/gauge: Light weight cross-platform test automation
All-in-one visual testing and review platform | Percy
GitHub - goldbergyoni/javascript-testing-best-practices: 📗🌐 🚢 Comprehensive and exhaustive JavaScript & Node.js testing best practices (July 2023)
GitHub - golemhq/golem: A complete test automation tool
GitHub - wheresrhys/fetch-mock: Mock http requests made using fetch
GitHub - defunctzombie/zuul: [UNMAINTAINED] multi-framework javascript browser testing![GitHub - defunctzombie/zuul: [UNMAINTAINED] multi-framework javascript browser testing](https://cdn-ak-scissors.b.st-hatena.com/image/square/844b17ce12431cc3ed285632419578c055d955f6/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F034790493b9d816a970e2e4093968f1cd7356b68d6e596ed3681c38d600626fc%2Fdefunctzombie%2Fzuul)
