Lycolog

スプレッド演算子で引き渡した内容の内、一部だけを利用するケースを想定

サンプルコード

検査対象

type FooBar = {
  foo: string;
  bar: number;
};

/**
 * `foo` と `bar` しか使われない関数
 * @param arg
 */
export const spreadExample = (arg: FooBar) => {
  return new Promise((resolve) => {
    resolve([arg.foo, arg.bar]);
  });
};

テストコード

import * as spex from '../spreadExample';

const spiedSpreadExample = jest.spyOn(spex, 'spreadExample');

describe('spreadExample', () => {
  it('example', async () => {
    const test = {
      foo: 'hoge',
      bar: 123,
      baz: true, // 今回の課題となる項目
    };
    // 余計な `baz` が流し込まれているため、
    // 普通に検査しようとすると `baz` が邪魔で上手く行かないケース
    await spex.spreadExample({ ...test });

    expect(spiedSpreadExample).toBeCalled();
    // コールバックで `expect.objectContaining()` を呼ぶことにより
    // 見たい項目だけを検査することが可能（`baz` を見なくて済む
    expect(spiedSpreadExample).toHaveBeenCalledWith(
      expect.objectContaining({
        foo: 'hoge',
        bar: 123,
      })
    );
  });
});

サンプルコード

検査対象

export const getBar = () => {
  return new Date().toDateString();
};

テストコード

import Foo from 'src/Foo';

const spiedGetBar = jest
  .spyOn(Foo, 'getBar')
  .mockReturnValue('Fri Mar 19 2021');

単体テストの観点でいうとprocess.argvそのものはモックしないほうが良いと思っているので、本記事ではprocess.argv自体をモックする方法と、それを回避する方法を紹介する

サンプルコード

正攻法

describe('example', () => {
  afterEach(() => {
    // 元に戻しておく
    process.argv.length = 2;
  });
  it('got first param', () => {
    process.argv.push('param1');
    expect(process.argv.length).toBe(3);
    expect(process.argv[2]).toBe('param1');
  });
});

そもそもモックせずに済むように設計する

process.argvを利用している関数でprocess.argvを引数に取ればモック不要となる

const getArgv = (argv: string[]) => {
    // some procedure
}

describe('getArgv', () => {
  it('got first param', () => {
    const argv = [,, 'param1'];
    expect(argv.length).toBe(3);
    expect(argv[2]).toBe('param1');
  });
});

フックを単体でテストするケースを想定。

このパターンはコンポーネントからフックを切り離しているケースで有用。手法としては@testing-library/react-hooksのrenderHook()を使う。

例

カスタムフック

export const useUserForm = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const onChangeUserName = (ev: string) => {
    setUsername(ev);
  };
  const onChangePassword = (ev: string) => {
    setPassword(ev);
  };

  return {
    username,
    password,
    onChangeUserName,
    onChangePassword,
  };
};

テストコード

it('onChangeUserName で username が設定されること', () => {
  // `renderHook` で Hook をレンダリング
  const { result } = renderHook(() => useUserForm());
  // `act()` で Hook のイベントを叩く
  act(() => result.current.onChangeUserName('foo'));
  // 結果を見る
  expect(result.current.username).toBe('foo');
});

自作npmコマンドを蹴る方法のメモ

手順

1. Node.jsのプロジェクトを作成
   1. npm initとか適当に
2. package.jsonに以下を追加

"bin": {
  "my-npm-command": "./index.js"
}

1. Node.jsのCLIを作成
   1. 以下はサンプル

#!/usr/bin/env node
console.log('my-npm-command');

1. npm linkを叩き、my-npm-commandを実行して動いてればOK
   1. 外したくなったらnpm unlink