Lycolog

/**
 * useHistory() を使えるようにするテストユーティリティ
 */
const renderWithRouter = (children: JSX.Element, { route = '/' } = {}) => {
  window.history.pushState({}, 'Test page', route);

  return render(children, {
    wrapper: BrowserRouter,
  });
};

// spy 用のモック関数
const mockPush = jest.fn();
// react-router-dom をモックにする
jest.mock('react-router-dom', () => ({
  useHistory: () => ({
    // モック関数を設定
    push: mockPush,
  }),
}));

describe('Bar', () => {
  it('history.push のテスト', () => {
    renderWithRouter(<Bar />, {
      route: '/foo/bar',
    });

    // ここらへんに同期的に副作用を起こす処理を書く
    // 以降、副作用で history.push('/foo/baz') されたとする

    // 呼ばれたことの確認
    expect(mockPush).toBeCalled();
    // 引数の確認
    expect(mockPush.mock.calls[0][0]).toBe('/foo/baz');
  });
});

const onSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
  ev.preventDefault();
  const target = ev.target as typeof ev.target & {
    t1: { value: string };
    t2: { value: string };
  };
  console.log(target.t1.value);
  console.log(target.t2.value);
};
return (
  <div className="App">
    <form onSubmit={(ev) => onSubmit(ev)}>
      <input type="text" id="t1" />
      <input type="text" id="t2" />
      <input type="submit" />
    </form>
  </div>
);

export const StatelessPage = () => {
  const history = useHistory();
  return (
    <div>
      <form>
        <input type="text" />
        <button onClick={() => history.push(AppRoute.dom2.path)}>submit</button>
      </form>
    </div>
  );
};

export const StatefullPage = () => {
  const ctx = useContext(ExampleContext);
  const history = useHistory();
  const onChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
    ctx.text = ev.target.value;
  };

  return (
    <div>
      <form>
        <input
          type="text"
          defaultValue={ctx.text}
          onChange={(ev) => onChange(ev)}
        />
        <button onClick={() => history.push(AppRoute.ctx2.path)}>submit</button>
      </form>
    </div>
  );
};

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');
});

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)}
      />
    );
  }
);

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>
  );
};