create project

2025-01-31 22:08:00 +00:00 · 2021-07-27 10:54:21 +09:00 · 2021-07-27 10:54:21 +09:00 · 73a039d76f
commit 73a039d76f
parent 0c8620d3bb
16 changed files with 7014 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,4 @@
+/dist/
+/node_modules/
+/.cache/
+/.parcel-cache/
--- a/README.md
+++ b/README.md
@ -0,0 +1,3 @@
+# Jest ハンズオン
+
+[![Edit in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/kou029w/jest-hands-on)
--- a/codesandbox.config.json
+++ b/codesandbox.config.json
@ -0,0 +1 @@
+{ "template": "parcel" }
--- a/index.html
+++ b/index.html
@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="ja" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>jest-hands-on</title>
+    <!-- @license https://cdn.jsdelivr.net/npm/@exampledev/new.css/LICENSE -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@exampledev/new.css/new.min.css"
+    />
+  </head>
+  <body>
+    <h1>Jest ハンズオン</h1>
+    <p>CodeSandboxの場合、[Tests]のパネルを開いて、テスト結果を確認します。</p>
+    <iframe
+      src="https://codesandbox.io/embed/github/kou029w/jest-hands-on?codemirror=1&module=%2Fsrc%2Fsum.test.js&previewwindow=tests"
+      style="
+        width: 100%;
+        height: 500px;
+        border: 0;
+        border-radius: 4px;
+        overflow: hidden;
+      "
+    ></iframe>
+
+    <p>
+      ローカル環境の場合、
+      <code>npm test</code>
+      コマンドを実行して、テスト結果を確認します。
+    </p>
+
+    <h2>ドキュメント</h2>
+    <p>
+      リファレンスとして
+      <a href="https://jestjs.io/ja/docs/getting-started">Jestのドキュメント</a>
+      を使用します。ご参照ください。
+    </p>
+
+    <h2>構成</h2>
+    <p>
+      src/*.test.js がテスト本体です。
+      ファイルを配置することによって実行可能です。
+    </p>
+
+    <ul>
+      <li>はじめましょう … sum.js, sum.test.js</li>
+      <li>
+        Matcherを使用する … toBe.test.js, toEqual.test.js, notToBe.test.js
+      </li>
+      <li>非同期コードのテスト … callback.test.js, promise.test.js</li>
+      <li>セットアップと破棄 … setupTeardown.test.js, scope.test.js</li>
+      <li>モック関数 … mock.test.js</li>
+    </ul>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,15 @@
+{
+  "name": "jest-hands-on",
+  "version": "1.0.0",
+  "private": true,
+  "license": "CC0-1.0",
+  "scripts": {
+    "test": "jest",
+    "start": "parcel index.html --open",
+    "build": "parcel build index.html"
+  },
+  "devDependencies": {
+    "jest": "^27.0.6",
+    "parcel": "^2.0.0-beta.3.1"
+  }
+}
--- a/src/callback.test.js
+++ b/src/callback.test.js
@ -0,0 +1,26 @@
+/** @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);
+});
--- a/src/mock.test.js
+++ b/src/mock.test.js
@ -0,0 +1,26 @@
+/** @license https://github.com/facebook/jest/blob/master/LICENSE */
+
+function forEach(items, callback) {
+  for (let index = 0; index < items.length; index++) {
+    callback(items[index]);
+  }
+}
+
+const mockCallback = jest.fn((x) => 42 + x);
+forEach([0, 1], mockCallback);
+
+test("このモック関数は2回呼ばれます", () => {
+  expect(mockCallback.mock.calls.length).toBe(2);
+});
+
+test("このモック関数の最初の呼び出しのときの第1引数はゼロです", () => {
+  expect(mockCallback.mock.calls[0][0]).toBe(0);
+});
+
+test("このモック関数の2回目の呼び出しのときの第1引数は1です", () => {
+  expect(mockCallback.mock.calls[1][0]).toBe(1);
+});
+
+test("このモック関数の最初の呼び出しのときの戻り値は42です", () => {
+  expect(mockCallback.mock.results[0].value).toBe(42);
+});
--- a/src/notToBe.test.js
+++ b/src/notToBe.test.js
@ -0,0 +1,9 @@
+/** @license https://github.com/facebook/jest/blob/master/LICENSE */
+
+test("adding positive numbers is not zero", () => {
+  for (let a = 1; a < 10; a++) {
+    for (let b = 1; b < 10; b++) {
+      expect(a + b).not.toBe(0);
+    }
+  }
+});
--- a/src/promise.test.js
+++ b/src/promise.test.js
@ -0,0 +1,23 @@
+/** @license https://github.com/facebook/jest/blob/master/LICENSE */
+
+// ダミー
+const fetchData = () => Promise.resolve("peanut butter");
+
+test("the data is peanut butter", () => {
+  return fetchData().then((data) => {
+    expect(data).toBe("peanut butter");
+  });
+});
+
+test("the data is peanut butter", () => {
+  return expect(fetchData()).resolves.toBe("peanut butter");
+});
+
+test("the data is peanut butter", async () => {
+  const data = await fetchData();
+  expect(data).toBe("peanut butter");
+});
+
+test("the data is peanut butter", async () => {
+  await expect(fetchData()).resolves.toBe("peanut butter");
+});
--- a/src/scope.test.js
+++ b/src/scope.test.js
@ -0,0 +1,14 @@
+/** @license https://github.com/facebook/jest/blob/master/LICENSE */
+
+beforeAll(() => console.log("1 - beforeAll"));
+afterAll(() => console.log("1 - afterAll"));
+beforeEach(() => console.log("1 - beforeEach"));
+afterEach(() => console.log("1 - afterEach"));
+test("", () => console.log("1 - test"));
+describe("Scoped / Nested block", () => {
+  beforeAll(() => console.log("2 - beforeAll"));
+  afterAll(() => console.log("2 - afterAll"));
+  beforeEach(() => console.log("2 - beforeEach"));
+  afterEach(() => console.log("2 - afterEach"));
+  test("", () => console.log("2 - test"));
+});
--- a/src/setupTeardown.test.js
+++ b/src/setupTeardown.test.js
@ -0,0 +1,60 @@
+/** @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);
+  });
+});
--- a/src/sum.js
+++ b/src/sum.js
@ -0,0 +1,6 @@
+/** @license https://github.com/facebook/jest/blob/master/LICENSE */
+
+function sum(a, b) {
+  return a + b;
+}
+module.exports = sum;
--- a/src/sum.test.js
+++ b/src/sum.test.js
@ -0,0 +1,7 @@
+/** @license https://github.com/facebook/jest/blob/master/LICENSE */
+
+const sum = require("./sum");
+
+test("adds 1 + 2 to equal 3", () => {
+  expect(sum(1, 2)).toBe(3);
+});
--- a/src/toBe.test.js
+++ b/src/toBe.test.js
@ -0,0 +1,5 @@
+/** @license https://github.com/facebook/jest/blob/master/LICENSE */
+
+test("two plus two is four", () => {
+  expect(2 + 2).toBe(4);
+});
--- a/src/toEqual.test.js
+++ b/src/toEqual.test.js
@ -0,0 +1,7 @@
+/** @license https://github.com/facebook/jest/blob/master/LICENSE */
+
+test("object assignment", () => {
+  const data = { one: 1 };
+  data["two"] = 2;
+  expect(data).toEqual({ one: 1, two: 2 });
+});
--- a/yarn.lock
+++ b/yarn.lock