iOSでswift-snapshot-testingを使う #iOS

swift-snapshot-testingとは

iOSのSnapShotテストといえばiOSSnapshotTestCaseが有名ですが、SnapshotTesting（swift-snapshot testing）というライブラリもあります。

この2つには大きな違いがあり、

iOSSnapshotTestCase	swift-snapshot-testing
Objective-Cで書かれている	Swiftで書かれている
対象はView	対象はViewに限らない

特に、『対象はViewに限らない』というところがポイントだと思います。
Snapshotの意味からすれば、こちらが普通ともいえますね。

とはいったものの、まずは画面のSnapshotを撮るために導入を検討するのでは？という観点からセットアップについて書いていきます。

サンプルプロジェクト
swift-snapshot-testing-sample

インストールする

READMEによると、Carthage / CocoaPods / Swift Package Managerに対応しています。

今回はCarthageでインストールする場合を紹介します。

Carthageインストール時のポイントは

テストターゲットのみに追加
通常行うcopy-frameworksは行わない

になります。

つまり、テスト時のみ必要なライブラリですので、リリースビルドには含めないようにするということですね。

github "pointfreeco/swift-snapshot-testing" ~> 1.6

READMEの通りにセットアップを進めると、テストターゲットのBuild Phasesは、このようになります。

XCodeを設定する

画像フォルダを設定

Snapshotテストが失敗した際に出力される画像を格納する、フォルダのパスを設定します。
この設定をしなくてもテストは可能なのですが、設定しないとファイルが出力されません。また、このフォルダは .gitignore に追加し、リポジトリには含めないようにしておきます。

SchemeのEnviroment Variablesに以下を追加します。

[Name] SNAPSHOT_ARTIFACTS

[Value] $(SOURCE_ROOT)/$(PROJECT_NAME)Tests/__Snapshots__/Failure

シミュレータ起動時の言語を設定

ローカル環境でSnapshotテストが通ったので、意気揚々とPushしたところ、CIでテストがコケるという現象が発生しました。CIから失敗時の画像をダウンロードして確認してみたところ、フォントが微妙に違っていました。
私の開発環境は日本語の設定ですが、CIではOSが素の状態でインストールされた状態なので、システムフォントが異なってしまうのが原因のようです。

シミュレータを日本語で起動することによって、解決できました。

SchemeのArguments Passed On Launchに以下を追加します。

-AppleLanguages (ja)

※アプリにより状況が異なると思いますので、必要に応じて対応してください

リファレンス画像を出力する

HomeSnapShotTests.swift

func testHomeViewController() {
    record = false

    let storyboard = UIStoryboard(name: "Home", bundle: nil)
    let vc = storyboard.instantiateInitialViewController()!

    SnapshotDevices.allCases.forEach {
        assertSnapshot(matching: vc, as: .image(on: $0.config), named: $0.name)
    }
}

record = true

にするとリファレンス画像が書き出されます。
また、場所の指定はできないようで、テストクラスと同じディレクトリに書き出されます。

リファレンス画像の命名規則は、下記のようになります。

__Snapshots__/テストクラス名のフォルダ/テストケース名.{named:に渡した名前}.png

テストを実行する

ユニットテストの一環として実行されます。シミュレータの端末を選択し、コマンド＋Uです。

READMEによると “単一のシミュレータからすべてのSnapshot画像を生成する” とのことなのですが、テスト時に選択された端末によって得られる画像が異なるようです。特にノッチのあり／なしで余白的な部分が変わりました。これは、リファレンス用のSnapshot画像を撮った端末とテスト時の端末が異なるとテストが失敗してしまうことを意味しています。
Snapshotテスト導入後は、ユニットテスト時の端末を統一するようにしました。
また、CIでのテストも、同じ端末を指定しておく必要があります。

画像のDiff

swift-snapshot-testingはテスト失敗時の差分画像を出力してくれません。
差分を比較したい場合は、Kaleidoscopeを使っています。2枚の画像を並べたり、重ねて違いを表示したりできます。

Two-Up	Difference

個人的には長年アプリケーションフォルダで眠っていたKaleidoscopeが、活躍する日が来てくれてうれしいです。

最後に

この記事のとおり導入はそれほど難しいものではありません。アプリをより良くしていこうとSnapshotテストの導入を検討している方々の参考になれば幸いです。