GWの開発をつらつらと

雑メモ。
詰まったところとか、面白そうだと思ったところ、単純に感想など。
TypeScript + Next.js + Jest + Tailwind CSSでシンプルなアプリ作ってみる。

Tailwind CSSの導入

npx tailwindcss init -p

これでtailwind.config.jsとpostcss.config.jsが生成される。
その後、tailwind.config.jsのpurgeに対象となるディレクトリなどを指定する。
（v3.0〜はpurgeの代わりにcontent属性を使う）
ほか、globals.cssに@tailwindを読み込む。

@tailwind base;
@tailwind components;
@tailwind utilities;

OKUDA Haruki

ReactのプロジェクトでJestでテストする時はReact-testing-libraryを使うらしい。
ちなみにVueではVue-testing-library。
そのフレームワークの仕様にそったテストができるライブラリ。

OKUDA Haruki

package.jsonにテストを無視するパターンを登録できる

"testPathIgnorePatterns": [
  "<rootDir>/.next/",
  "<rootDir>/node_modules/"
],

OKUDA Haruki

scriptに以下を追記。
オプションは下記URLを参照。
https://jestjs.io/ja/docs/cli

"scripts": {
  ...
  "test": "jest"
},

OKUDA Haruki

it('テストタイトル', () => {
  render(<Home />) // コンポーネントをrenderすることで、HTMLの構造を取得する
  expect(screen.getByText('LIFE 100')).toBeInTheDocument() // 期待される結果を書く
})

OKUDA Haruki

TypeError: Jest: a transform must export a `process` function.

jestとts-jestのバージョンは合わせておかないと、上記のようなエラーが出る。

OKUDA Haruki

screen.debug();

テストの中でデバッグすることができ、renderされた内容を確認できる。

OKUDA Haruki

npm i next-page-tester

Next.jsのLinkコンポーネントをテストする場合は、別途moduleをinstallする必要あり。

このスクラップは2022/05/11にクローズされました