CodeSandboxの埋め込みオプションでJestのテストを表示してみた

こんにちは、CX事業本部 IoT事業部の若槻です。

CodeSandboxは、Webアプリの作成と共有を迅速に行うことができるオンラインコードエディターおよびプロトタイピングツールです。

• CodeSandbox: Online Code Editor and IDE for Rapid Web Development

今回は、CodeSandboxの埋め込みオプションでJestのテストを表示してみました。

CodeSandboxでのテスト

CodeSandboxでは、下記の文字列で終わるファイルを検知すると自動でJestによるテストが実行されます。

• .test.js
• .spec.js
• .test.ts(x)
• .spec.js(x)

サンドボックス環境へのJestの明示的なインストールは必要ありません。

テストのブログへの埋め込み方

埋め込みオプションとしてpreviewwindow=testsを指定することにより埋め込み時にテストコンソールを表示できます。またstyleでheightを調整することにより、表示結果の表示が途切れないようにすることができます。

<iframe src="https://codesandbox.io/embed/n9m2w9q8x0?fontsize=14&hidenavigation=1&theme=dark&previewwindow=tests"
     style="width:100%; height:1000px; border:0; border-radius: 4px; overflow:hidden;"
     title="Jest test"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

一部テスト失敗パターン

デモ

iframeの読み込み完了から数秒ほどするとテスト結果が表示されます。

• 上半分のTest Suitesでは、テストスイートが1個中1個failしており、それはテストファイルindex.test.jsのうちdoesn't workであることが示されています。
• 下半分のTest Summaryでは、テストが2個中1個fail、1個passしており、failしたdoesn't workの結果の詳細が示されています。

テストファイル

テストスイートのうち、worksが成功するテスト、doesn't workが失敗するテストです。

it("works", () => {
  expect(1 + 1).toBe(2);
});

it("doesn't work", () => {
  expect(1 + 1).toBe(3);
});

全テスト成功パターン

デモ

テストファイル

いずれも必ず成功するテストです。

it("works 1", () => {
  expect(1 + 1).toBe(2);
});

it("works 2", () => {
  expect(1 + 2).toBe(3);
});

参考

• CodeSandboxの埋め込みオプションまとめ（後編） | DevelopersIO
• Tests - CodeSandbox Documentation

以上