フロントエンドのテスト基盤を Jest から Vitest に移行した話
こんにちは。ナレッジワークの torii です。 7 月にフロントエンドエンジニアとして入社してもうすぐ半年、そろそろ技術記事の一つも書きたいなと思っていたところに、ちょうどいいネタを見つけたので投稿してみます！ Jest から Vitest に移行してみた 早速やったことですが、フロントエンドのテストフレームワークを Jest から Vitest に移行しました。理由としては、Jest が CJS を前提として動作しており、ESM 前提のモジュールを動かすのに一手間も二手間もかかるからです。 ナレッジワークのフロントエンドは Next.js を採用しており、テストフレームワークには Next.js と相性の良い Jest を採用していました。関数単位のテストや UI コンポーネントのテストを書く分には問題なかったのですが、それより上層（ページなど）になるとたちまち ESM 互換性の問題を
Write tests. Not too many. Mostly integration.
A while back, Guillermo Rauch (creator of Socket.io and founder of Zeit.co (the company behind a ton of the awesome stuff coming out lately)) tweeted something profound: Write tests. Not too many. Mostly integration. This is deep, albeit short, so let's dive in: Write tests. Yes, for most projects you should write automated tests. You should if you value your time anyway. Much better to catch a b
コンポーネント単体テストについてつらつらと - blog
書きます。 何をテストするのか なぜ書くのか 入力と出力とは何か テストを書く前に調べること 一般的なコンポーネントのテストシナリオ Vue 単体テストのサンプル props と emit のテスト nuxt-link (router-link) を利用しているコンポーネントのテスト Router を利用しているコンポーネントのテスト 内部で他のコンポーネントを利用しているケース Nuxt のページコンポーネントのテスト ミューテーション単体のテスト アクション単体のテスト ストアのテスト（アクション、ミューテーション など全てを含む） 補足 まとまらない何か flush-promises (setImmediate) を利用して非同期を解決させる Vue でグローバル登録されてるフィルタが存在する場合 同年、同月、同日にテストすることを願わん Jest のカスタムマッチャ jest.sp
Testing Frameworks for Javascript | Write, Run, Debug | Cypress
design-system assets cypress e2eAuthentication.cy.ts src componentsButton.cy.tsxButton.tsx describe('Auth', () => { it('user should be able to log in', () => { cy.visit('/') // open the login modal cy.get('button').contains('Login').click() // fill in the form cy.get('input[type="email"]').type('[email protected]') cy.get('input[type="password"]').type('test123') // submit the form
通信系テストのためのサイトのススメ：example.com、httpbin.org、badssl.com - 病みつきエンジニアブログ
HTTP通信の機能を持ったプログラムをテストするときに、どこにアクセスするか、迷うことがある。(モックが使えるならそれがいいけど) そんなときにおすすめな、example.comとhttpbinとbadssl.comを紹介してみる。 example.com 名前がそのままだが、example.com はちゃんと動くサイトである。よくサンプル文字列として(例えばメールアドレスとかで)仕込んでたのだが、最近まで本当に生きたサイトだとは知らなかった。 亜種に example.org とか example.netもある。RFC 2606に定義されているそうで、第三者に悪影響が及ばないことを保障することができるとある。Wikipediaにも記事がある。 ただ、あくまで普通のウェブサイトであり、「403をテストしたい」といった特殊なテストには合わない。そんな人にhttpbinをおすすめしたい。 htt
Straightforward React UI Testing | Toptal®
Editor’s note: This article was updated on 10/17/2022 by our editorial team. It has been modified to include recent sources and to align with our current editorial standards. Fully testing user interactions is notoriously difficult. Front-end views weren’t well-suited for traditional automated testing frameworks until React.js came along. With the advent of single page application (SPA) frameworks
Django + py.test + WebTest
以前書いたDjango Best Practice への道 #2の補足を書きます。 以下の課題を解決するために実施したこととなります。 Django Webアプリの機能テストはpy.testとWebTestを同時に使いたいけどunittest形式は嫌 分解していきます。 Djangoのテストにpy.testを使う 以下のライブラリを利用する。 (なぜpy.testを選択したかはコチラ) pelme/pytest_django とにかくparameterizedテストで同一処理 x 別データパターンのテストを効率よく書きたかったので、py.testを選択。また、fixtureという仕組みを使い、テストデータやモックを効率よく各テストに注入できるのも嬉しいところ。 DjangoのテストにWebTestを使う 以下のライブラリを利用する。 kmike/django-webtest これを利用する
Workshop: Test-Driven Web Development with Django — Test-Driven Django Development v3.0 documentation
Workshop: Test-Driven Web Development with Django¶ Thank you for attending San Diego Python‘s workshop on test-driven development with the Django web framework. In this one-day workshop, you will learn to build a well-tested, Django-based website. This workshop was made possible by a grant from the Python Software Foundation Outreach and Education Committee. Why test-driven development?¶ When crea
Casper.JSのススメ - After Coding
2013-08-17 Casper.JSのススメ Phantom.JSというヘッドレスブラウザがある。 これが超便利なんだけど、セッション周りとか込み入った操作をしようと思うと途端に操作(JSファイルへの記述)が面倒になる。 そこで、Casper.JSの出番だ。 CasperはPhantomと連携するライブラリで、簡単な記述で複雑な操作を実現することができる。 また、Phantomのレンダリングエンジンはwebkitで、Gekkoで動いているSlimer.JSってのもあって、これらの上で動くCasperを使っているとレンダリングどっちも使えるので捗る(と思う)。 今回はEnd-to-Endテストの実現を目的に、Casper.JSでwebサイトのHTMLを解析してみる。 もちろん、スクレイピングなどにも応用可能だ。 ↑ヨルムンガンドに出てくる主人公(ココ・ヘクマティアル)の兄キ
DjangoでImageFieldを持つフォームのテスト - PYTHONIC BOOM BOOM HEAD
DjangoでImageFieldを持ったFormがあるとします。こんな感じ。ModelFormでもいい（というか実際のコードはそっちで書いてる）。 class UploadForm(forms.Form): title = forms.CharField() photo = forms.ImageField() これをテストする際にStringIOで適当に作ったダミーを食わせたら「画像じゃないよ！」って怒られた。ダミー画像をテスト用に置いておくのもなんだかなぁ…と思ってたら、そうだ、PIL使ってるんだからPILで生成すればいいじゃないか。 #-*- coding:utf-8 -*- import io from PIL import Image from django.test import TestCase from django.core.files.uploadedfile imp
Python - テストデータの定義はどうするのがいいか考えてみる - ぼっち勉強会
またはPythonでDataProviderを使う方法。 きっかけ テストデータはsetUpで宣言するべき幾つかの理由を読み、これはDataProviderの方が適切ではないかという気がしました。 DataProvider(データプロバイダー)とは 簡単に言えば、「テストデータの集合を返す関数(orメソッド)」のことです。 元記事においては 代用: テストデータを返してくれる関数を宣言する にあたります。 PHPUnit(PHP)やTestNG(Java)には標準で付いている機構です。 (ググったらそんなに情報なかったのだけど、あまり有名/有用な機能じゃないのかな?) JUnitにはないTestNGの“5”つの強力なテスト用機能 コード品質を追求する: JUnit 4 対 TestNG データプロバイダ 参考記事を見て分かる通り、DataProviderはアノテーションを介してテストメソッ
oreilly.com
More than 5,000 organizations count on our digital courses and more to help their teams learn the tools and technologies that drive business outcomes. We can help yours too. New AI policy for O’Reilly authors and talent O’Reilly president Laura Baldwin shares the company’s ethical approach to leveraging GenAI tools and ensuring O’Reilly experts are compensated for their work. Read it now It’s time
Chance
Chance Acknowledgements & Thanks Usage bower browser cli node requirejs seed function Basics bool falsy character floating integer letter natural prime string Text paragraph sentence syllable word Person age birthday cf cpf first gender last name prefix ssn suffix Thing animal Mobile android_id apple_token bb_pin wp7_anid wp8_anid2 Web avatar color company domain email fbid google_analytics hashta
pytest introduction - Python Testing
Python Testing Python Software Development and Software Testing (posts and podcast) I think of pytest as the run-anything, no boilerplate, no required api, use-this-unless-you-have-a-reason-not-to test framework. This is really where testing gets fun. As with previous intro’s on this site, I’ll run through an overview, then a simple example, then throw pytest at my markdown.py project. I’ll also c
Python で TDD してみる - methaneのブログ
RSpec の入門とその一歩先へ がとてもよい記事だったので、 Python で写経させてもらいました。 https://github.com/methane/pytest-tut Ruby コミュニティと Python コミュニティの考え方の違いも見えて面白いと思います。 環境は Python 3.3 で、実行には py.test コマンドを使いましたが、 py.test の機能は特に使っていないので nose でもなんでも大丈夫です。 ファイルの作成 まずは空の実装とテストを作ります。 message_filter.py class MessageFilter: pass message_filter_test.py 最初のテストを書く py.test は .should といったメソッドを勝手に生やしたりはしません。普通に assert 文を書きましょう。 --- a/messege
Jasmine: Behavior-Driven JavaScript
Behavior-Driven JavaScript Documentation:(日本語訳) 1.3 Not yet translated below 2.0 2.1 2.2 Edge Jasmine on GitHub
AngularJS : unit tests and end to end tests – I.T. aware
If there is one feature compared to other JS framework that make AngularJS better, it is the ability to implement tests. This is normal I would say since the framework was developed by integrating this fundamental aspect at the beginning. JavaScript is a dynamically typed language which makes it easy to write but allows writing errors that the compiler will not see. It is therefore really importan
pytest で pep8 テストを実行する
Java 見習いのもりもとです。 アリエルのスタート地点 を知ってから、いつもどぎまぎしながら開発しています。 アリエルのスタート地点は、Javaと聞いて、ふっと鼻で笑える地点です。 私にとっては、スタート地点がまだまだ遠そうなのでしばらくは Python の話題でお茶を濁そうと思います。ちょうど良い機会なので Pythonic なテストツール pytest についてチュートリアルのような記事を何回かに分けて書きます。 pytest は、設定より規約 を設計原則とするツールで、xUnit スタイルではない funcarg という関数の引数をフックしてリソースインジェクションを行う仕組みを提供するなど、ユニークなテストツールです。さらに単体テスト、機能テスト、システムテストといった全てのテストフェーズにおいても利用できると、その応用範囲の広さも喧伝しています。ドキュメントも翻訳されているので
Welcome to Django Testing Docs’s documentation! — Django Testing Docs v0.01 documentation
Welcome to Django Testing Docs’s documentation!¶ This is a place to help contribute to Django’s docs about testing. It is hosted on Github. If you want to help contribute, please fork the docs and help out! Hopefully this will make it’s way back into the Django documentation at some point. If you have any questions, please contact Eric Holscher at eric@ericholscher.com Contents:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MEDIA_ROOT and Django Tests | Caktus Group