Next.js on いつかの熊右衛門

Next.js：jest でテストする

Sat, 06 Jul 2024 18:22:20 +0900

react-markdown と remark-gfm を使ったコンポーネントのテストコードを jest で実行する設定のメモです。要点を挙げるなら、

JSDOM で未実装のメソッドはモックを用意しておく
transformIgnorePatterns にトランスコンパイルさせるものを設定しておく

といった辺りです。

テンプレ作成

create-next-app@14.2.4 で以下を指定。

react-markdown と remark-gfm を追加。

npm install \
 react-markdown \
 remark-gfm

npm install -D @tailwindcss/typography

jest 関連のパッケージを追加。

npm install -D \
 @testing-library/jest-dom \
 @testing-library/react \
 @types/jest \
 jest \
 jest-environment-jsdom

packages.json の scripts に test を追加。

{
 "name": "my-app",
 "version": "0.1.0
 "private": true,
 "scripts": {
 "dev": "next dev",
 "build": "next build",
 "start": "next start",
 "lint": "next lint",
 "test": "jest"
 },
 "dependencies": {
 "next": "14.2.4",
 "react": "^18",
 "react-dom": "^18",
 "react-markdown": "^9.0.1",
 "remark-gfm": "^4.0.0"
 },
 "devDependencies": {
 "@tailwindcss/typography": "^0.5.13",
 "@testing-library/jest-dom": "^6.4.6",
 "@testing-library/react": "^16.0.0",
 "@types/jest": "^29.5.12",
 "@types/node": "^20",
 "@types/react": "^18",
 "@types/react-dom": "^18",
 "eslint": "^8",
 "eslint-config-next": "14.2.4",
 "jest": "^29.7.0",
 "jest-environment-jsdom": "^29.7.0",
 "postcss": "^8",
 "tailwindcss": "^3.4.1",
 "typescript": "^5"
 }
}

設定の追加

tsconfig.json の types に @testing-library/jest-dom を追加。
しないとテストの関数の型などが解決されません。

{
 "compilerOptions": {
 "lib": ["dom", "dom.iterable", "esnext"],
 "allowJs": true,
 "skipLibCheck": true,
 "strict": true,
 "noEmit": true,
 "esModuleInterop": true,tsconfig.json
 "module": "esnext",
 "moduleResolution": "bundler",
 "resolveJsonModule": true,
 "isolatedModules": true,
 "jsx": "preserve",
 "incremental": true,
 "plugins": [
 {
 "name": "next"
 }
 ],
 "paths": {
 "@/*": ["./*"]
 },
 "types": [
 "@testing-library/jest-dom"
 ],
 },
 "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
 "exclude": ["node_modules"]
}

jest の設定は JavaScript にしました。
TypeScript だとその設定も必要の様なので妥協しました。
packages.json と同じディレクトリに次のファイルを用意します。

・jest.setup.js
　公式にある通り、jest で使用される DOM で未実装のメソッドはモックにしておきます。

import "@testing-library/jest-dom";

// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
Object.defineProperty(window, "matchMedia", {
 writable: true,
 value: jest.fn().mockImplementation((query) => ({
 matches: false,
 media: query,
 onchange: null,
 addListener: jest.fn(), // deprecated
 removeListener: jest.fn(), // deprecated
 addEventListener: jest.fn(),
 removeEventListener: jest.fn(),
 dispatchEvent: jest.fn(),
 })),
});

・jest.config.js
　react-markdown と remark-gfm を足した後は、node_modules 配下に依存パッケージも含め、エラーになるものが結構出ました。

個々に設定するのが辛かったので、node_modules 配下は全部トランスコンパイルするように transformIgnorePatterns に設定しました。不都合がでたら見直すつもり。

const nextJest = require("next/jest");

const createJestConfig = nextJest({
 // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
 dir: "./",
});

// Add any custom config to be passed to Jest
const customJestConfig = {
 setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
 testEnvironment: "jsdom",
 moduleNameMapper: {
 "@/(.*)$": "<rootDir>/$1",
 },
};

module.exports = async () => ({
 ...(await createJestConfig(customJestConfig)()),
 transformIgnorePatterns: [
 `node_modules/(?!.*)/`,
 ],
});

ページとテストコード

以前のページで試してみます。

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

const md = `
# GFM

## Autolink literals

www.example.com, https://example.com, and contact@example.com.

## Footnote

A note[^1]

[^1]: Big note.

## Strikethrough

~one~ or ~~two~~ tildes.

## Table

| a | b | c | d |
| - | :- | -: | :-: |

## Tasklist

* [ ] to do
* [x] done
`;

const Home = () => {
 return <ReactMarkdown remarkPlugins={[remarkGfm]} className="prose">{md}</ReactMarkdown>;
};

export default Home;

テストコードは以下で。

import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import Page from "./page";

describe("Page", () => {
 it("renders a heading", () => {
 render(<Page />);
 const headers = screen.getAllByRole("heading");
 expect(headers.length).toEqual(7);
 });
});

テストの実行

npm run test で実行します。

% npm run test

> my-app@0.1.0 test
> jest

(node:17255) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 PASS app/page.test.tsx
 Page
 ✓ renders a heading (51 ms)

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.002 s
Ran all test suites.

Next.js：react-markdown と tailwind css を共存させる

Sat, 15 Jun 2024 12:33:34 +0900

マークダウンの表示に react-markdown と remark-gfm を使った際、tailwind css が影響してスタイルされなかったときの対処です。

・使用したマークダウン（remark-gfm のリポジトリから）

# GFM

## Autolink literals

www.example.com, https://example.com, and contact@example.com.

## Footnote

A note[^1]

[^1]: Big note.

## Strikethrough

~one~ or ~~two~~ tildes.

## Table

| a | b | c | d |
| - | :- | -: | :-: |

## Tasklist

* [ ] to do
* [x] done

・対処前の表示結果

・対処後の表示結果

環境

create-next-app@14.2.4 で雛形を作り、react-markdown と remark-gfm をインストールしました。

npm i react-markdown remark-gfm

サンプルのページは次の通りです。

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

const md = `
# GFM

## Autolink literals

www.example.com, https://example.com, and contact@example.com.

## Footnote

A note[^1]

[^1]: Big note.

## Strikethrough

~one~ or ~~two~~ tildes.

## Table

| a | b | c | d |
| - | :- | -: | :-: |

## Tasklist

* [ ] to do
* [x] done
`;

const Home = () => {
 return (
 <ReactMarkdown remarkPlugins={[remarkGfm]}>{md}</ReactMarkdown>
 );
};

export default Home;

対処方法

@tailwindcss/typography をインストールします。

npm i --save-dev @tailwindcss/typography

tailwind.config.ts に plugins を追加します。

import type { Config } from "tailwindcss";

const config: Config = {
 content: [
 "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 "./components/**/*.{js,ts,jsx,tsx,mdx}",
 "./app/**/*.{js,ts,jsx,tsx,mdx}",
 ],
 theme: {
 },
 plugins: [
 require('@tailwindcss/typography'),
 ],
};
export default config;

マークダウンを表示する要素のクラスに prose を追加します。
直接付けるか親要素に付けるかはお好みで。

const Home = () => {
 return (
 <ReactMarkdown remarkPlugins={[remarkGfm]} className="prose">{md}</ReactMarkdown>
 );
};

const Home = () => {
 return (
 <div className="prose">
 <ReactMarkdown remarkPlugins={[remarkGfm]}>{md}</ReactMarkdown>
 </div>
 );
};

Ant Design：TextArea にフォーカスを移すには

Sat, 08 Jun 2024 07:00:00 +0900

Next.js で Ant Design を使った際に、TextArea にフォーカスを移すためのメモです。

環境

Next.js v14.2.3
Ant Design v5.18.0

作例

以下のように、カーソルの位置を指定できます。

先頭
末尾
テキストを全選択

"use client"
import { useRef, useState } from "react";
import TextArea from "antd/es/input/TextArea";
import type { TextAreaRef } from "antd/es/input/TextArea";

export default function Home() {
 const textAreaRef = useRef<TextAreaRef>(null);
 const [value, setValue] = useState("");

 const setFocus = (cursor: "start" | "end" | "all") => {
 textAreaRef.current?.focus({ cursor });
 };
 return (
 <div>
 <TextArea
 ref={textAreaRef}
 value={value}
 onInput={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
 setValue(e.target.value)
 }
 ></TextArea>
 <div>
 <button onClick={() => setFocus("start")}>start</button>
 </div>
 <div>
 <button onClick={() => setFocus("end")}>end</button>
 </div>
 <div>
 <button onClick={() => setFocus("all")}>all</button>
 </div>
 </div>
 );
}

Next.js：テキストファイルを import して使う

Sat, 01 Jun 2024 12:49:24 +0900

以下の様に、テキストファイルの内容の取り出しを import で済ませたい場合です。
極端に大きなファイルで無ければ、起動時間に与える影響は少ないと思います。

Hello, world.
This is an example text file.

import example from "./example.txt";

export default async function Home() {
 return <pre>{example}</pre>;
}

設定方法

next.config.mjs に webpack の設定を追加します。

/** @type {import('next').NextConfig} */
const nextConfig = {
 webpack(config, options) {
 config.module.rules.push({
 test: /\.(txt)$/,
 type: "asset/source",
 });
 return config;
 },
};

export default nextConfig;

新規に .d.ts ファイルを作成し、テキストファイルの型宣言をしておきます。

declare module "*.txt"

webpack 5 より前はローダーの設定を追加するのが一般的だった様ですが、現在は Asset Modules が使用できて便利な様です。

参考：webpack - Asset Modules

Next.js：ローカルで実行してもサーバーの API を利用するには

Sat, 18 May 2024 12:40:45 +0900

以前 React で書いたものの Next.js の場合になります。
Next.js は API Routes を通すこともできますが、バックエンドを単純に呼びたいだけなら rewrites が便利です。

設定方法

next.config.mjs に rewrites の設定を追加します。
例として、バックエンドが http://example.com:3100 の /v1 に API がある場合は以下のようにします。

/** @type {import('next').NextConfig} */
const nextConfig = {
 async rewrites() {
 return [
 {
 source: "/api/:path*",
 destination: "http://example.com:3100/v1/:path*",
 },
 ];
 },
};

export default nextConfig;

この場合、フロントエンドで /api/users に GET を要求した場合、
バックエンドの http://example.com:3100/v1/users に GET を要求して応答が得られます。