CodeSandboxの埋め込みオプションでJestのテストを表示してみた
2021.08.20
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは、CX事業本部 IoT事業部の若槻です。
CodeSandboxは、Webアプリの作成と共有を迅速に行うことができるオンラインコードエディターおよびプロトタイピングツールです。
今回は、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);
});
参考
以上
