最新版=>フロントエンドのテストについて考える 現在、新規プロジェクトで、Nuxt.js+TypeScriptを使ったSPAの開発を行っています。この記事では、そういったケースにおいての、Nuxt.jsアプリケーションでのテストに対する考え方と、その方法を紹介します。 TL;DR ユニットテスト/結合テスト=>Jest UIテスト=>Storybookをベースに、Jestで足りない部分を補う プロジェクトの技術スタック Nuxt.js Vue.js Vuex TypeScript Docker テスト種別の整理 簡単に、今回登場するテスト種別の整理をしておきます。より詳しくは、ググったり書籍を読んだりするのをおすすめします。 ユニットテスト - 個別の関数やクラス、コンポーネントをテストする。 結合テスト - 複数の関数やコンポーネントをつなぎこんでテストする。 UIテスト - ブラウザを
![Nuxt.jsの新規プロジェクトでいい感じのテスト環境をつくる@2018 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e9eeeb5a0c8a4fe2b39dcf0ea6457cbbfb5f21fb/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9TnV4dC5qcyVFMyU4MSVBRSVFNiU5NiVCMCVFOCVBNiU4RiVFMyU4MyU5NyVFMyU4MyVBRCVFMyU4MiVCOCVFMyU4MiVBNyVFMyU4MiVBRiVFMyU4MyU4OCVFMyU4MSVBNyVFMyU4MSU4NCVFMyU4MSU4NCVFNiU4NCU5RiVFMyU4MSU5OCVFMyU4MSVBRSVFMyU4MyU4NiVFMyU4MiVCOSVFMyU4MyU4OCVFNyU5MiVCMCVFNSVBMiU4MyVFMyU4MiU5MiVFMyU4MSVBNCVFMyU4MSU4RiVFMyU4MiU4QiU0MDIwMTgmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTBmZGYxYmFlM2JhMWI3ZGY0OTI5N2NjMzU2N2JkOGU2%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwb2ttdHRkaHImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWU5NWU2Mzk0OTliMTQ1M2YxNDRjMGJmNzNkYjY3NGMw%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D69174d3719ad6e6512b3d513691f2d3c)