フロントエンドのテストのダミーデータ作成ならrosieがおすすめ

はじめに

ペイトナー請求書のフロントエンドを主に担当している @fuqda です。本稿では、ペイトナー請求書のフロントエンドのテストコードを書きやすくするために最近導入したrosieというライブラリが便利だったので、そちらのご紹介をさせて頂きます。

この記事の対象読者

Jestなどで使用するダミーデータを毎回ベタ書きして疲弊している方
RSpecのFactoryBotのようなライブラリがフロントエンドにも無いのかと探している方

rosieとは？

Ruby on Railsでテストコードを書く際のダミーデータ作成ライブラリとして有名なFactoryBotにインスパイヤされたJavaScript用のライブラリです。
https://github.com/rosiejs/rosie

rosieロゴ画像.jpeg (24.3 kB)

rosieのセットアップ手順

1. rosieと型定義のインストール

$ npm install rosie @types/rosie -D

2. ファクトリーの定義ファイルを追加

/test/user.factory.ts に Userオブジェクトのダミーデータを定義します。

※ 注意
公式の書き方にならって、 import { Factory } from 'rosie'; と書くと Factory not found in 'rosie' という型エラーが出たので、import rosie from "rosie"; してから const Factory = rosie.Factory; と変数に展開する形で実装しています。

import rosie from "rosie";
const Factory = rosie.Factory;

Factory.define("User")
  .sequence("id")
  .attr("name", "山田 太郎")
  .attr("age", 18)
  .attr("email", "sample@example.com")

3. 各ファクトリーのエントリーポイントとなるファイルに集約

/test/jest.factories.ts というファイルに各ファクトリーを集約します。

// Factoryを追加するたびにこのファイルにimportする
import("./user.factory");

4. グローバル設定と型定義を追加する

/test/jest.helpers.ts に型定義を追加 & 全 *.spec.ts ファイル内で、ファクトリーが使えるようにします。

// 中略
import rosie from "rosie";
const Factory = rosie.Factory;

declare global {
  // 中略
  var factory: typeof Factory; // eslint-disable-line no-var
}

// 中略
global.factory = Factory;

5. Jestの設定ファイルにファクトリの定義を反映

jest.config.ts のセットアップファイルに /jest.helpers.ts と jest.factories.ts を追記します。

module.exports = {
  // 中略
  setupFiles: ["./test/jest.helpers.ts", "./test/jest.factories.ts"],
  // 中略
};

rosie導入前後のBefore / After

実際に導入Before / Afterをコードで比べてみてみましょう！

Before

import { mount } from '@vue/test-utils';
import AccountInfo from '@/components/AccountInfo.vue';

describe('AccountInfo', () => {
  test('スナップショットテスト', () => {
    const name = "山田 太郎";
    const age = 18;
    const email = "sample@example.com";
    
    const propsData = {
      user: {
        name,
        age,
        email,
      }
    };
    
    const wrapper = mount(AccountInfo, { propsData });
    expect(wrapper.element).toMatchSnapshot();
  });
});

After

import { mount } from '@vue/test-utils';
import AccountInfo from '@/components/AccountInfo.vue';

describe('AccountInfo', () => {
  test('スナップショットテスト', () => {
    const wrapper = mount(AccountInfo, {
      propsData: {　user: factory.build("User")　}
    });
   expect(wrapper.element).toMatchSnapshot();
  });
});

終わりに

さて、いかがだったでしょうか？サンプルは小さなテストでしたが、コードが増えて来るとだんだん毎回ダミーデータをベタ書きするのが億劫になってくると思います。
そんな時にrosieを使えば、サクッとダミーデータを定義して、本質的なテストコードの実装に集中出来るのでおすすめです。
rosieを使って面倒なダミーデータの用意をスキップしてみてはいかがでしょうか。

Paytner Tech Blog

ペイトナーのテックブログです