Lycolog

検索条件

日付で絞り込み 2020年(1) 2021年(16) 2022年(3) 2023年(7) 2024年(7) 2025年(1)

全35件 (7/7ページ) 一覧表示に切り替え記事本文を表示

お知らせ

現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。

Jestでモジュールの関数をモックする

投稿日：: 2021/04/02

開発::テスト言語::TypeScriptNode.js::Jest

サンプルコード

検査対象

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

テストコード

import Foo from 'src/Foo';

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

コメント（0件）

Jestでprocess.argvをモックする

投稿日：: 2021/04/02

言語::TypeScript開発::テストNode.js::Jest

単体テストの観点でいうと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');
  });
});

コメント（0件）

React + TS + Jestでカスタムフックのテストをする

投稿日：: 2021/03/14

言語::TypeScriptライブラリ::ReactNode.js::Jest開発::テスト

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

このパターンはコンポーネントからフックを切り離しているケースで有用。手法としては@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');
});

コメント（0件）

React + TS + アロー関数コンポーネントでのforwardRefの書き方

投稿日：: 2021/03/06

ライブラリ::React言語::TypeScript

TSの情報に乏しく無駄にハマったのでメモ程度に

確認環境

Env	Ver
React	17.0.1
TypeScript	4.1.3

サンプルコード

今回はサンプルとして<input />をラップしたコンポーネントのフォーカスを変更するためにrefを使います

`Child.tsx`

import { forwardRef } from 'react';

export type ChildProps = {
  type: 'text' | 'password' | 'number';
  onChange(changeValue: string): void;
};

// function 記法でないと ESLint が怒るので無効化
// eslint-disable-next-line react/display-name
export const Child = forwardRef<HTMLInputElement, ChildProps>(
  // このpropsに明示的な型定義がないと型エラーが出る
  (props: ChildProps, ref) => {
    const onChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
      props.onChange(ev.target.value);
    };

    return (
      <input
        ref={ref}
        type={props.type}
        onChange={(ev) => onChange(ev)}
      />
    );
  }
);

`Parent.tsx`

下側の<Child />だけフォーカスが行くようにしてます

import { useEffect, useRef } from 'react';
import { Child } from './Child';

export const Parent = () => {
  const ref = useRef<HTMLInputElement>(null);
  useEffect(() => {
    ref?.current?.focus();
  }, []);
  return (
    <ul>
      <li>
        <Child
          type={'text'}
          onChange={(ev) => console.log('top input', ev)}
        />
      </li>
      <li>
        <Child
          ref={ref}
          type={'text'}
          onChange={(ev) => console.log('bottom input', ev)}
        />
      </li>
    </ul>
  );
};

コメント（0件）

react-routerでRouteを切る

投稿日：: 2020/11/15

ライブラリ::React言語::TypeScript

react-routerでRouteを切る実装例

確認環境

Env	Ver
React	17.0.1
react-router-dom	5.2.0
TypeScript	4.1.3

サンプルコード

`index.tsx`

ここに大元のルーティングを実装

import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import { BrowserRouter } from 'react-router-dom';
import { RootRoute } from './routes/RootRoute';

// ドメインルート以外にReactを設置する場合に必要
// e.g. `https://www.example.com/react/` に設置する場合 `/react` を設定
const basename = process.env.REACT_APP_BASE_NAME ?? undefined;

ReactDOM.render(
  <React.StrictMode>
    {/* `useHistory()` 用のDIラッパー */}
    <BrowserRouter basename={basename}>
      {/* ルーティング設定をまとめたコンポーネント */}
      <RootRoute />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

`AppRoute.ts`

ルーティングの定義、これがあると後々の管理が楽
スプレッド演算子でRouteに対して展開できるように記述しておく

export const AppRoute = {
  // React のルート定義
  root: {
    path: '/',
    key: '/',
    exact: true, // 完全一致
    component: App,
  },
  // 404 定義
  notfound: {
    component: NotFound,
  },
  // `/foo` 以下のルーティング定義
  foo: {
    // `/foo` のルート定義
    root: {
      path: '/foo',
      key: '/foo',
      component: FooRoute,
    },
    // 以下、 `/foo` 配下のページのルーティング定義
    hoge: {
      path: '/foo/hoge',
      key: '/foo/hoge',
      component: HogePage,
    },
    piyo: {
      path: '/foo/piyo',
      key: '/foo/piyo',
      component: PiyoPage,
    },
  },
};

`RootRoute.tsx`

各階層の基底ルーティング管理

export const RootRoute = () => {
  return (
  {/* `Route` は `Switch` で囲む */}
  <Switch>
    {/* root */}
    <Route {...AppRoute.root} />

    {/* foo */}
    <Route {...AppRoute.foo.root} />

    {/* bar */}
    <Route {...AppRoute.bar.root} />

    {/* 404 */}
    <Route {...AppRoute.notfound} />
  </Switch>
  );
};

`FooRoute.tsx`

/foo階層配下の管理用

export const FooRoute = () => {
  return (
  {/*
    `Context` は `Switch` の外に出す
    `Switch` の中に `Context` を書くと更に `Switch` でネストする必要がある
  */}
  <FooContext.Provider value={FooContextDefault}>
    <Switch>
    {/* eslint-disable-next-line array-callback-return */}
    {Object.entries(AppRoute.foo).map(([idx, route]) => {
      if (idx !== 'root') {
      /* `'root'` 以外の全ノードを展開 */
      return <Route {...route} />;
      }
    })}
    {/* 404 */}
    <Route {...AppRoute.notfound} />
    </Switch>
  </FooContext.Provider>
  );
};

コメント（0件）