今日の参考コード

関数の定義ファイルとテストの定義ファイルを分ける

前回は、テストをかいた test.spec.js の中に、関数の定義「も」書いていました。

しかしこれは実践的ではありません。

通常は、関数の定義とテストの定義は別々のファイルに書きます。

問題は、別々のファイルにあるものを、どうやって結びつけるかです。

そのためには export と import を使います。

まずは index.js に関数の定義、test.spec.js にテストとファイルを分ける

何はともあれ、関数の定義とテストの定義を別のファイルで行いましょう。

index.jsで関数を定義する
const check = strings => {
  if (strings === "月") {
    return "月です";
  }

  if (strings === "太陽") {
    return "太陽です";
  }

  return "月でも太陽でもありません";
};

テストファイルの方には関数は書きません。

test.spec.js でテストを定義する
// ここには関数は書かない

describe("惑星のチェック関数のテスト", () => {
  test("月の場合", () => {
    const res = check("月");
    expect(res).toEqual("月です");
  });

  test("太陽の場合", () => {
    const res = check("太陽");
    expect(res).toEqual("太陽です");
  });

  test("犬の場合", () => {
    const res = check("犬");
    expect(res).toEqual("月でも太陽でもありません");
  });

  test("数値の場合", () => {
    const res = check(100);
    expect(res).toEqual("月でも太陽でもありません");
  });
});

するとテストが落ちるはずです。なぜなら、テスト内で実行する関数がないからです。

関数を export / テスト内でそれを import する

ではこの二つのファイルを export と import で結びつけていきます。

export が書き出すとか出力するという意味で、import が取り込むとか輸入するという意味ですね。

関数を export

先ほど書いた関数定義のファイルの一番最後に export default check と書き加えました。

check という関数を default の値として出力するという意味です。「default の値」が何のかということは今度やることにしましょう。とにかく今回はこれで出力することができます。

index.js で関数を定義する
const check = strings => {
  if (strings === "月") {
    return "月です";
  }

  if (strings === "太陽") {
    return "太陽です";
  }

  return "月でも太陽でもありません";
};

export default check; // これ！！！

テスト内で関数を import する

テストの方で、先ほど出力した関数を import します。

そのためには冒頭に import check from "/src/index.js" と書き加えます。

"/src/index.js" から check という変数へ import するということです。これで check に、別ファイルで定義した関数が入ってきます。

test.spec.js でテストを定義する
import check from "/src/index.js"; // これ！！！

describe("惑星のチェック関数のテスト", () => {
  test("月の場合", () => {
    const res = check("月");
    expect(res).toEqual("月です");
  });

  test("太陽の場合", () => {
    const res = check("太陽");
    expect(res).toEqual("太陽です");
  });

  test("犬の場合", () => {
    const res = check("犬");
    expect(res).toEqual("月でも太陽でもありません");
  });

  test("数値の場合", () => {
    const res = check(100);
    expect(res).toEqual("月でも太陽でもありません");
  });
});

テストを確認する

ここまでくれば、うまくテストが実行されるはずです。

宿題

  • 以前自分が 寺子屋 12 で書いた関数とテストを使う
  • 関数とテストを別々のファイルに定義する
  • それぞれ export/import して、テストを正常に動かす

以上です！

これでついにテストをしながら JavaScript を学習する準備ができましたね！