サンプルコードの整理

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>
+
 それでは、さっそく学んでいきましょう!

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) を参照してください。

templates/callback/babel.config.json

@@ -1,4 +0,0 @@
-{
-  "presets": ["@babel/preset-env"],
-  "targets": "current node"
-}

templates/callback/callback.test.js

@@ -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);
-});

templates/callback/main.js

@@ -1 +0,0 @@
-// callback.test.js をご参照ください

templates/callback/package.json

@@ -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"
-  }
-}

templates/callback/sandbox.config.json

@@ -1,3 +0,0 @@
-{
-  "template": "parcel"
-}

templates/setup-teardown/babel.config.json

@@ -1,4 +0,0 @@
-{
-  "presets": ["@babel/preset-env"],
-  "targets": "current node"
-}

templates/setup-teardown/main.js

@@ -1 +0,0 @@
-// setupTeardown.test.js をご参照ください

templates/setup-teardown/package.json

@@ -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"
-  }
-}

templates/setup-teardown/sandbox.config.json

@@ -1,3 +0,0 @@
-{
-  "template": "parcel"
-}

templates/setup-teardown/setupTeardown.test.js

@@ -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);
-  });
-});