Jest

Strapを開発している、あげです🙋‍♂️ 最近、GitHub Copilot の業務利用が許可されたので、使って嬉しかった場面を紹介します。 このコードの問題点わかりますか？ 期待する動作 実装（TypeScript） export する必要が生じたので、テストコードを書くことに まとめ このコードの問題点わかりますか？ 期待する動作 anyObject の arrayValue と objectValue はどちらも必須 arrayValue は配列である arrayValue は空ではない objectValue はオブジェクトである 実装（TypeScript） const isVal…

はじめに ペイトナー請求書のフロントエンドを主に担当している @fuqda です。 本稿では、ペイトナー請求書のフロントエンドのテストコードを書きやすくするために最近導入したrosieというライブラリが便利だったので、そちらのご紹介をさせて頂きます。 この記事の対象読者 Jestなどで使用するダミーデータを毎回ベタ書きして疲弊している方 RSpecのFactoryBotのようなライブラリがフロントエンドにも無いのかと探している方 rosieとは？ Ruby on Railsでテストコードを書く際のダミーデータ作成ライブラリとして有名なFactoryBotにインスパイヤされたJavaScript…

約1年前に予約してた「Jestではじめるテスト入門」の電子版の配信が始まっていたので早速読んでみました。 peaks.cc TLDR Jestの導入と入門からやりたい人はマストバイ TypeScriptわからない人は結構厳しいかも ビジュアルリグレッションテストに関する記載は少ないので、UIテスト関係に期待しない方がいい 読もうと思ったきっかけ 当時前職にいたときに、フロントエンド関連のバグが多発していたこともありテストコードを入れていこうと流れになって、ちょうどJestに慣れていく途中の段階でした。そんなとき丁度プロジェクトを偶々知って即予約してたって感じだった気がする。 関数のテストの書き…

やりたいこと：Object型のデータに、任意のプロパティが存在するかをチェックしたい .toHaveProperty( Keypath, value? ) example: const user = { name: 'jane', age: '20', address: 'Los Angeles', } expect(user ).toHaveProperty('name'); => true 参考： jestjs.io

最近はフロントエンドまわりの開発をあれこれやっている中で、テスト駆動な開発をしたいのでVisual Studio Codeでテスト環境を整えていきたいと思います。 はじめに 今回は、コンテナ内で開発方法は使用せずに進めていきますので、ホスト側にお好きな方法でNode.jsの実行環境を構築してください。anyenvやasdfを使用した環境構築はおすすめです。 GitHub - anyenv/anyenv: All in one for **env asdfが便利だったので乗り換えた - とことんDevOps | 日本仮想化技術が提供するDevOps技術情報メディア ↓🔰Visual Studio…

はじめに こんにちは！株式会社エモーションテックで開発インターンをしている渋谷です！ 今回はJestのモック関連で使用する mockClear() https://jestjs.io/ja/docs/mock-function-api#mockfnmockclear mockReset() https://jestjs.io/ja/docs/mock-function-api#mockfnmockreset mockRestore() https://jestjs.io/ja/docs/mock-function-api#mockfnmockreset などの関数について実際のコード例と一緒に…

こんにちは。DIGGLE エンジニアの伊藤です。 ソフトウェアテスト Advent Calendar 2022の 20 日目の記事です。 Advent Calendar 初参加になります。 普段はフロントエンドを中心に業務を行なっています。 今回は DIGGLE で実施されているフロントエンドの単体テスト、 特にコンポーネントのテストで使っているフレームワークの使い勝手を向上させたお話をさせていただきます。 はじめに DIGGLE ではフロントエンドで React を使っており、 テストフレームワークとして下記を利用しています。 Jest (https://jestjs.io/ja/) Rea…

背景 フロントエンドのテストという存在を辞めた同僚から聞いた その人が入った会社はかなり良いところで、そこではフロントエンドでもテストをやっているらしい いいところに入るのであれば私も勉強しておくかというわけで以下の本を買った フロントエンド開発のためのテスト入門 本について テストの種類や考え方、フロントエンドでもテストを行う利点について言及されていた このあたりの考え方は何となくは分かったけど、まだ理解はしきれていない ここでは単体テストを行うにはJestを使うとのことなので今回はJestの環境構築を本の内容に則ってやってみた。 サンプルコードは使わずに０からインストールからやってみる J…

はじめに こんにちは🧑‍💻 ラボルのUIデザイナー/フロントエンドエンジニアの寺岡です。 今回はVue3から新しく使えるようになったComposition APIと、既存のOption APIの比較記事です。 Composition APIは何ができるようになったのか？どういった場面でメリットを感じるのか？を紹介していきます！ 目次 はじめに 目次 どんな人向けの記事か CompositionAPIとは？ 特徴 バージョン CompositionAPIのメリット 機能の再利用が可能 可読性が高くなる テストがしやすい CompositionAPIのデメリット データの参照が冗長 複雑なComp…

ポーランドの自主管理組合『連帯』の議長ワレサさん。 久しぶりに見たなぁ。 ゴルバチョフはなくなったので、もっと高齢化と思い込んでいたわい。 ツイッターで動画を見たら、我ささん両手に杖を持っている。 >>やっぱり足に来ているようだね。 ポーランド議会がロシア影響法を可決し、２００７年からロシアに便宜を図ったかどうか判断する審議会を設立するという。ポーランドはなんでロシアのエネルギーに依存していたんだ、ノルドストリームにもっと抗議し阻止すべきだったとの反省？から作った法律だけど、本当の目的は当時大統領だった野党No1でDuda大統領の一番のライバルになろうTusk氏を引きずり落すための法律というこ…

The German Historical Institute in Warsaw is usually a place for balanced academic debate based on facts and pertinent arguments rather than high political emotion. >>右翼政治家の感情より事実ベースでバランスの取れた議論をするという書き出しも、神経逆撫でしそうだな。お高く留まるよと。 The outburst occurred during a lecture by Jan Grabowski, a renowned Polish…

必要なnpmライブラリをインストール npm i -D ts-jest @types/jest ファイルを設定 launch.json { "configurations": [ { "name": "Debug Jest Tests", "type": "node", "request": "launch", "runtimeArgs": [ "${workspaceRoot}/node_modules/jest/bin/jest.js", "--runInBand" ], "console": "integratedTerminal", "internalConsoleOptions": …

続くか分からないが、見たもの読んだものを記録してみる。 こういうのを LogSeqとかに残したらええんか。どっちがええやろか。 itnext.io Angularのコマンド nx でリポジトリをセットアップする記事かな。髭のおじさんが懐かしい。 モノレポとポリレポのどっちがいいか、みたいな chatbotslife.com 企業家がChatGPT使うなら。 ペルソナ定義してそのペルソナでアウトプットする、AIに入力するプロンプト書かせるの面白い。 なんでもありやなぁ 市場になってる。 medium.com 便利げなアプリ選。fantastical入れてみた betterprogramming.…

はじめに コード 解説 テストコード npm packageとして公開 おわりに はじめに JavaScriptで配列の要素をすべて並び替えて、順列を生成するライブラリを作成したので、 その過程を記事にしてみました。 既に多くの方が、npm packageとして公開されているのですが、 コードを書いたので、ライブラリとして公開してみました。 www.npmjs.com コード function generatePermutations(arr, currentPermutation = []){ if (arr.length === 0) { return [currentPermutatio…

はじめに はじめまして。フロントエンド開発グループに所属している岩釣です。 スタンバイの月間ユーザー数が1000万人を突破しました！(2023年4月末) 本記事ではそんなスタンバイのフロントエンド開発のコーディングガイドラインを紹介します。 なぜコーディングガイドラインを作るのか コーディングガイドラインを作成して運用するメリットは以下です。 コードの可読性の向上 コーディングガイドラインを規定しチーム全員がコーディングガイドラインに基づいて開発することで、コードの統一性が保たれ、コードの可読性が向上し、保守性が高まります。 チーム内でのコミュニケーションの円滑化 コーディングガイドラインが規…

はじめに バグ修正 パフォーマンスとアセットの最適化 ブラウザの互換性 プロダクションモードでビルドする サーバーの設定 ドメイン名とSSL証明書 セキュリティの確保 CRAで個人開発する際のポイント 最後に はじめに Reactは現在、Web開発において広く使用されている主要なライブラリです。 しかし、アプリケーションを公開する前に押さえるべき重要なポイントがいくつかあります。 Reactアプリケーションを公開する前には、初心者にとっても重要な事項です。 個人開発であっても、実務でのアプリケーションを公開する手順はほぼ同様です。 したがって、Reactアプリケーションを公開する際には、実務で…

前提 jestを使っている jest.config.jsのglobalsに定義されている 参考 https://stackoverflow.com/questions/71987339/google-app-script-typescript-and-jest-testing-mocking-googleappscript-object-n 2日に及び、4時間くらいで判明したこと declareするといい(その場しのぎ感) jest.config.js module.exports = { globals: { SlackApp: { create: () => { return { getC…

（本記事は2023/5/26時点の情報にアップデートしております） こんにちは、技術広報のyayawowoです。 突然ですが、株式会社ラクスと聞いて何を思い浮かべますでしょうか？ 弊社ラクスでは、様々なプロダクトを展開していますが正直認知度は低いと思っております。 そこで今回、弊社についてもっともっと知っていただくため・・・ ラクスが展開している全10プロダクト 全10プロダクトの技術スタック インフラ/SRE/デザイナーの技術スタック について、ご紹介させていただきます！ SaaS開発に携わる方、弊社に少しでも興味を持っている方の一助となれば幸いです！

テストファイルが 15 個あるリポジトリ を Jest → Vitest に移行してみた。 良かった点 実行時間が 7.5 秒→ 2.9 秒、半分以下になったのは凄い Jest の API と互換性があるので s/jest/vi/g でほぼ動くのは凄い イマイチな点 たまに変なバグ踏むことがあり *1、まだ完全に枯れきってない印象 Jest にはあるが Vitest には無い機能がたまにある jest.replaceProperty() jest.mock(), jest.doMock() の第 3 引数のオプション etc... 情報が公式ドキュメント以外にネットにまだ少なく、公式ドキュメン…