お知らせ
現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。
- 投稿日：
webpackとはなんぞやというところで軽く調べてみたメモ
ほぼ公式のチュートリアル
やれることが非常に多いので公式ドキュメントを読むのが一番良い
確認環境
| Env | ver |
|---|---|
| webpack | 5.41.0 |
| webpack-cli | 4.7.2 |
webpackとは
JavaScriptのモジュールバンドラで次の機能を持つ
- JSやCSS、画像ファイルやデータファイルなどの各種静的ファイルを出力フォルダにまとめて吐く
- ブラウザのキャッシュの影響を回避するために、出力ファイル名を毎回変える
- index.htmlに必要なファイル参照を自動で埋め込む
- 出力フォルダのクリーンアップ
- HMR用のサーバーを起動する
- Sourcemapを吐く
- 次の構成を利用したビルドパイプラインを構成する
- TypeScript, CoffeeScript, Babel and JSX
- その他色々
- 豊富なAPIと設定が存在するのでいろんな事ができる！
webpackを試してみる
取り敢えずこんな感じのプロジェクトを作る
npm initnpm i -D webpack webpack-cli lodash
|- package.json
|- /dist
|- index.html
|- /src
|- index.js
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Getting Started</title>
</head>
<body>
<script src="dist/main.js"></script>
</body>
</html>
src/index.js
import _ from 'lodash';
function component() {
const div = document.createElement('div');
div.innerHTML = _.join(['Hello', 'webpack'], ' ');
return div;
}
document.body.appendChild(component());
npx webpackを流してバンドルしてあげるとlodashが組み込まれたJSが吐き出される
CSSのバンドル
npm i -D style-loader css-loaderを流してwebpack.config.jsとsrc/index.cssを作成src/index.jsもちょっと書き換えます
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};
src/index.css
.hello {
color: red;
}
src/index.js
import _ from 'lodash';
+import './index.css';
function component() {
const div = document.createElement('div');
div.innerHTML = _.join(['Hello', 'webpack'], ' ');
+ div.classList.add('hello');
return div;
}
document.body.appendChild(component());
この状態でnpx webpackを流すとCSSのバンドルが確認出来る
assetsのバンドル
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
+ {
+ test: /\.(png|svg|jpg|jpeg|gif)$/i,
+ type: 'asset/resource',
+ },
],
},
};
src/index.js
import _ from 'lodash';
import './index.css';
+import Icon from './icon.png';
function component() {
const div = document.createElement('div');
div.innerHTML = _.join(['Hello', 'webpack'], ' ');
div.classList.add('hello');
+ const img = document.createElement('img');
+ img.src = Icon;
+ div.appendChild(img);
return div;
}
document.body.appendChild(component());
フォントファイルやデータファイルのバンドル
基本は同じなので公式のガイドを見るとわかりやすい
- 投稿日：
基本出来ないのでwindow.location.hrefを操作するためのラッパーを作って、それをjest.spyOn()して解決する
理由はjsdomが対応していないため
- 投稿日：
global.navigatorをモックにする方法- モックというか書き換えてるだけ
jestのモック機能はプロパティのモックが出来ないので、実オブジェクトを強制的に書き換えて実施する
サンプルコード
Object.defineProperty()を利用して実装value, プロパティが返す値configurable, 再定義可能かどうか、設定しないと再実行でコケる
- 実際の使用ではユーティリティ関数を作っておき、
afterAll()でnavigator.userAgentを初期値に戻すのが望ましい
Object.defineProperty(global.navigator, 'userAgent', {
value:
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36',
configurable: true,
});
- 投稿日：
- 理論上可能そうだったので、ひたすら試行錯誤してたらできたのでメモがてら
axiosそのものをモックして、その結果に応じた処理が想定通り走っているかどうかを確認したいcreate-react-appで作成したTypeScript Reactのプロジェクトにnpm tを掛けてテストすることを想定- 但し検証用のプロジェクトは@lycolia/ts-boilerplate-generator-cliで作成
確認環境
| Env | Ver |
|---|---|
| react | 17.0.1 |
| react-scripts | 4.0.2 |
| typescript | 4.1.3 |
確認内容
検証対象
- ページ読み込み時に一回だけAPIを蹴ってなんかすることを想定
import axios from 'axios';
import { useEffect } from 'react';
export const AsyncHookExample = () => {
useEffect(() => {
axios
.get('https://localhost/')
.then((res) => console.log(res))
.catch((err) => console.error(err));
}, []);
return <p />;
};
検証方法
axiosをモックした上で、モック関数のPromiseの解決を待ち、PromiseのコールバックをspyOnして検査する内容- モック関数の
Promiseの解決法を求めるのにハマりましたが、これはfoo.mock.results[0].valueに対してawait expect(foo.mock.results[0].value).resolvesとしてやればいける - 細かいことはソースコードのコメント参照
import { render } from '@testing-library/react';
import axios from 'axios';
import { AsyncHookExample } from './AsyncHookExample';
// `axios` をモックにする
jest.mock('axios');
// `axios` のモックを取得
const mockedAxios = axios as jest.Mocked<typeof axios>;
// `console.log()` を `spyOn'
const spiedConsoleLog = jest.spyOn(console, 'log');
// `console.error()` を `spyOn'
const spiedConsoleError = jest.spyOn(console, 'error');
describe('AsyncHookExample', () => {
it('resolve promise in Hook', async () => {
// テストに期待する結果
// `axios` はモックなので値は適当
const beResult = {
status: 200,
data: null,
};
// `axios` のモックが `resolve` する値を設定
mockedAxios.get.mockResolvedValue(beResult);
// コンポーネントを `render` して `useEffect` を走らせる
render(<AsyncHookExample />);
// `axios.get()` が呼ばれたことを確認
expect(mockedAxios.get).toBeCalled();
// モックの結果を取得
const testResult = mockedAxios.get.mock.results[0].value;
// `reject` された値が期待通りであることを確認
await expect(testResult).resolves.toEqual(beResult);
// `useEffect` の中の `Promise` の中にある `console.log()` が呼ばれたことを確認
expect(spiedConsoleLog).toBeCalled();
});
it('reject promise in Hook', async () => {
// テストに期待する結果
// `axios` はモックなので値は適当
const beResult = {
status: 400,
data: null,
};
// `axios` のモックが `reject` する値を設定
mockedAxios.get.mockRejectedValue(beResult);
// コンポーネントを `render` して `useEffect` を走らせる
render(<AsyncHookExample />);
// `axios.get()` が呼ばれたことを確認
expect(mockedAxios.get).toBeCalled();
// モックの結果を取得
const testResult = mockedAxios.get.mock.results[0].value;
// `reject` された値が期待通りであることを確認
await expect(testResult).rejects.toEqual(beResult);
// `useEffect` の中の `Promise` の中にある `console.error()` が呼ばれたことを確認
expect(spiedConsoleError).toBeCalled();
});
});
あとがき
mockResolvedValueのスコープやらモックのPromiseを解決させるマッチャやら調べるのに手間取った- あとはそもそも
Promiseが解決した結果がどこに入るのかとか、兎に角あれこれ
- あとはそもそも
expect(mockedAxios.get).toBeCalled()が通るのはすぐに気づいたので、なら出来るだろうとひたすら調べてた- とりあえず言えることはJestの公式ドキュメントが大正義なので、ここを穴が開くまで読めば大抵のことは解決する
- 投稿日：
- まず
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');
});
});