検索条件
お知らせ
現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。
historyのバージョンとreact-router-domのバージョンが上手く噛み合ってないと既存実装で型エラーが出る可能性がある
| Env |
Ver |
| react |
17.0.2 |
| react-dom |
17.0.2 |
| react-router-dom |
5.2.0 |
| react-scripts |
4.0.3 |
| typescript |
4.2.3 |
| history |
4.10.1 |
ToPageに飛ばしたlocation.stateを検査する内容
export const ToPage = () => {
const location = useLocation<{ test?: string }>();
return <p>from {location.state?.test ?? 'nothing'}</p>;
};
const renderWithRouter = (ui: JSX.Element, { route = '/' } = {}) => {
window.history.pushState({}, 'Test page', route);
return render(ui, { wrapper: BrowserRouter });
};
describe('onload', () => {
it('from history.push', () => {
const history = createMemoryHistory<{ test: string }>();
history.push(AppRoute.to.path, { test: 'foo' });
const { container } = renderWithRouter(
<Router history={history}>
<ToPage />
</Router>
);
expect(container).toHaveTextContent('from foo');
expect(history.location.state.test).toBe('foo');
});
});
- まず
history.push('/path/to/dest')自体のテストを書くことはないはずなので、何かしらの副作用として実行される事が前提です
- testing-library.com に書いてあることの応用です
/**
* 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>
);
fsとかchild_processとかそういうやつをモックする方法
- jest単体の機能では実現できないのでハマるポイント
- たぶん jest.MockedFunction でも同じことができる
import { execSync } from 'child_process';
// まず全体をモックする
jest.mock('child_process');
// モックにする
const mockExecSync = execSync as jest.MockedFunction<typeof execSync>;
describe('execSync', () => {
it('spyOn execSync', () => {
// 対象をコール
execSync('echo 1');
// 通る
expect(mockExecSync).toHaveBeenCalled();
// 通る, echo 2とかにするとちゃんとコケてくれる
expect(mockExecSync).toHaveBeenCalledWith('echo 1');
});
});
- 素のHTMLにJSを埋め込んでイベントコールバックの引数を取る方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Example of DOM Event callback arguments</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
const test = (ev) => {
console.log(ev);
};
</script>
</head>
<body>
<p onclick="test(event)">aaa</p>
</body>
</html>