From af26f9bc7a8bf7c3f6dec5a0be497dc1ab7a0f93 Mon Sep 17 00:00:00 2001
From: Kohei Watanabe <kou029w@gmail.com>
Date: Thu, 24 Feb 2022 18:39:22 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=B5=E3=83=B3=E3=83=97=E3=83=AB=E3=82=B3?=
=?UTF-8?q?=E3=83=BC=E3=83=89=E3=81=AE=E6=95=B4=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/basic.md | 13 ++++
src/jest-api.md | 58 ++++++++++++++++++
templates/callback/babel.config.json | 4 --
templates/callback/callback.test.js | 26 --------
templates/callback/main.js | 1 -
templates/callback/package.json | 14 -----
templates/callback/sandbox.config.json | 3 -
templates/setup-teardown/babel.config.json | 4 --
templates/setup-teardown/main.js | 1 -
templates/setup-teardown/package.json | 14 -----
templates/setup-teardown/sandbox.config.json | 3 -
.../setup-teardown/setupTeardown.test.js | 60 -------------------
12 files changed, 71 insertions(+), 130 deletions(-)
delete mode 100644 templates/callback/babel.config.json
delete mode 100644 templates/callback/callback.test.js
delete mode 100644 templates/callback/main.js
delete mode 100644 templates/callback/package.json
delete mode 100644 templates/callback/sandbox.config.json
delete mode 100644 templates/setup-teardown/babel.config.json
delete mode 100644 templates/setup-teardown/main.js
delete mode 100644 templates/setup-teardown/package.json
delete mode 100644 templates/setup-teardown/sandbox.config.json
delete mode 100644 templates/setup-teardown/setupTeardown.test.js
diff --git a/src/basic.md b/src/basic.md
index 72f78d2..92d877c 100644
--- a/src/basic.md
+++ b/src/basic.md
@@ -4,4 +4,17 @@
Jestを使ってどうやってテストするのか？といった疑問に答えます。
テストを行っていくための最初の一歩になればと思います。
+<iframe
+ src="https://codesandbox.io/embed/github/kou029w/jest-hands-on/tree/main/templates/template?codemirror=1&hidenavigation=1&previewwindow=tests&view=split&module=%2Fsum.test.js"
+ style="
+ width:100%;
+ height:500px;
+ border:0;
+ border-radius: 4px;
+ overflow:hidden;
+ "
+ title="template"
+ sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+></iframe>
+
それでは、さっそく学んでいきましょう!
diff --git a/src/jest-api.md b/src/jest-api.md
index d5a36ce..1d77336 100644
--- a/src/jest-api.md
+++ b/src/jest-api.md
@@ -11,6 +11,19 @@ Jestの代表的な機能を紹介します。
- `toBe` … 与えた値との同一性 (`===`) を検証します
- `toEqual` … オブジェクトまたは配列のすべてのプロパティの同一性を再帰的に検証します
+<iframe
+ src="https://codesandbox.io/embed/github/kou029w/jest-hands-on/tree/main/templates/basic?codemirror=1&hidenavigation=1&previewwindow=tests&view=split&module=%2FtoBe.test.js"
+ style="
+ width:100%;
+ height:500px;
+ border:0;
+ border-radius: 4px;
+ overflow:hidden;
+ "
+ title="basic"
+ sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+></iframe>
+
### 真偽値とそれに類する値の検証
- `toBeNull` … null
@@ -47,10 +60,55 @@ Jestの代表的な機能を紹介します。
Jestは、`test` に渡す関数の前に `async` キーワードを記述するだけで、非同期テストを実行できます。
+<iframe
+ src="https://codesandbox.io/embed/github/kou029w/jest-hands-on/tree/main/templates/promise?codemirror=1&hidenavigation=1&previewwindow=tests&view=split&module=%2Fpromise.test.js"
+ style="
+ width:100%;
+ height:500px;
+ border:0;
+ border-radius: 4px;
+ overflow:hidden;
+ "
+ title="promise"
+ sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+></iframe>
+
より詳しい情報は [Jest公式ドキュメント Async/Await](https://jestjs.io/ja/docs/asynchronous#asyncawait) を参照してください。
## beforeEach と afterEach
`beforeEach` と `afterEach` を使用することでテストの実行の前に繰り返し行う準備や、後片付けの処理を宣言できます。
+<iframe
+ src="https://codesandbox.io/embed/github/kou029w/jest-hands-on/tree/main/templates/scope?codemirror=1&hidenavigation=1&previewwindow=tests&view=split&module=%2Fscope.test.js"
+ style="
+ width:100%;
+ height:500px;
+ border:0;
+ border-radius: 4px;
+ overflow:hidden;
+ "
+ title="scope"
+ sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+></iframe>
+
より詳しい情報は [Jest公式ドキュメント セットアップと破棄](https://jestjs.io/ja/docs/setup-teardown) を参照してください。
+
+## モック
+
+モック関数を使用することでコード間の繋がりをテストできます。
+
+<iframe
+ src="https://codesandbox.io/embed/github/kou029w/jest-hands-on/tree/main/templates/mock?codemirror=1&hidenavigation=1&previewwindow=tests&view=split&module=%2Fmock.test.js"
+ style="
+ width:100%;
+ height:500px;
+ border:0;
+ border-radius: 4px;
+ overflow:hidden;
+ "
+ title="mock"
+ sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+></iframe>
+
+より詳しい情報は [Jest公式ドキュメント モック関数](https://jestjs.io/ja/docs/mock-functions) を参照してください。
diff --git a/templates/callback/babel.config.json b/templates/callback/babel.config.json
deleted file mode 100644
index fbe6baa..0000000
--- a/templates/callback/babel.config.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "presets": ["@babel/preset-env"],
- "targets": "current node"
-}
diff --git a/templates/callback/callback.test.js b/templates/callback/callback.test.js
deleted file mode 100644
index 5cbf13a..0000000
--- a/templates/callback/callback.test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/** @license https://github.com/facebook/jest/blob/master/LICENSE */
-
-// ダミー
-const fetchData = (callback) => callback("peanut butter");
-
-// 実行しないでください!
-test.skip("the data is peanut butter", () => {
- function callback(data) {
- expect(data).toBe("peanut butter");
- }
-
- fetchData(callback);
-});
-
-test("the data is peanut butter", (done) => {
- function callback(data) {
- try {
- expect(data).toBe("peanut butter");
- done();
- } catch (error) {
- done(error);
- }
- }
-
- fetchData(callback);
-});
diff --git a/templates/callback/main.js b/templates/callback/main.js
deleted file mode 100644
index 836a14c..0000000
--- a/templates/callback/main.js
+++ /dev/null
@@ -1 +0,0 @@
-// callback.test.js をご参照ください
diff --git a/templates/callback/package.json b/templates/callback/package.json
deleted file mode 100644
index 7132044..0000000
--- a/templates/callback/package.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "name": "callback",
- "version": "1.0.0",
- "private": true,
- "main": "main.js",
- "type": "module",
- "scripts": {
- "test": "jest"
- },
- "devDependencies": {
- "@babel/preset-env": "^7.16.11",
- "jest": "^27.5.1"
- }
-}
diff --git a/templates/callback/sandbox.config.json b/templates/callback/sandbox.config.json
deleted file mode 100644
index f3556b8..0000000
--- a/templates/callback/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "template": "parcel"
-}
diff --git a/templates/setup-teardown/babel.config.json b/templates/setup-teardown/babel.config.json
deleted file mode 100644
index fbe6baa..0000000
--- a/templates/setup-teardown/babel.config.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "presets": ["@babel/preset-env"],
- "targets": "current node"
-}
diff --git a/templates/setup-teardown/main.js b/templates/setup-teardown/main.js
deleted file mode 100644
index 670300e..0000000
--- a/templates/setup-teardown/main.js
+++ /dev/null
@@ -1 +0,0 @@
-// setupTeardown.test.js をご参照ください
diff --git a/templates/setup-teardown/package.json b/templates/setup-teardown/package.json
deleted file mode 100644
index 7bf65e5..0000000
--- a/templates/setup-teardown/package.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "name": "setup-teardown",
- "version": "1.0.0",
- "private": true,
- "main": "main.js",
- "type": "module",
- "scripts": {
- "test": "jest"
- },
- "devDependencies": {
- "@babel/preset-env": "^7.16.11",
- "jest": "^27.5.1"
- }
-}
diff --git a/templates/setup-teardown/sandbox.config.json b/templates/setup-teardown/sandbox.config.json
deleted file mode 100644
index f3556b8..0000000
--- a/templates/setup-teardown/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "template": "parcel"
-}
diff --git a/templates/setup-teardown/setupTeardown.test.js b/templates/setup-teardown/setupTeardown.test.js
deleted file mode 100644
index 3ae5f72..0000000
--- a/templates/setup-teardown/setupTeardown.test.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/** @license https://github.com/facebook/jest/blob/master/LICENSE */
-
-// ダミー
-const initializeCityDatabase = async () => {
- console.log("Cityデータベースの初期化処理");
-};
-const clearCityDatabase = async () => {
- console.log("Cityデータベースの消去");
-};
-const isCity = (city) => {
- // …なにかデータベースに依存する処理
-
- console.log(`${city} は都市です`);
- return true;
-};
-
-beforeEach(async () => {
- await initializeCityDatabase();
-});
-
-afterEach(async () => {
- await clearCityDatabase();
-});
-
-beforeAll(async () => {
- await initializeCityDatabase();
-});
-
-afterAll(async () => {
- await clearCityDatabase();
-});
-
-// ダミー
-const initializeFoodDatabase = async () => {
- console.log("Foodデータベースの初期化処理");
-};
-const isValidCityFoodPair = () => true;
-
-test("city database has Vienna", () => {
- expect(isCity("Vienna")).toBeTruthy();
-});
-
-test("city database has San Juan", () => {
- expect(isCity("San Juan")).toBeTruthy();
-});
-
-describe("matching cities to foods", () => {
- // このdescribeブロックのテストにのみ適用されます
- beforeEach(async () => {
- await initializeFoodDatabase();
- });
-
- test("Vienna <3 veal", () => {
- expect(isValidCityFoodPair("Vienna", "Wiener Schnitzel")).toBe(true);
- });
-
- test("San Juan <3 plantains", () => {
- expect(isValidCityFoodPair("San Juan", "Mofongo")).toBe(true);
- });
-});