常連

### 実現したいこと
オリジナルアプリをjestでテストしたいです。
バックエンドはrailsで、データのやり取りはreact側からaxiosたたいてAPIを呼びだすという感じです。

ボタンを押すと入力フォームの内容がpostされ、成功の場合は画面に「成功した」旨の表示が出てくるのですが、それをテストしたいです。

### 発生した問題
APIはaxiosを使って行われるのですが、このaxiosをモック化しないとテストが進められないので
モック化したいのですが、どのようにやったらいいかわかりません。

### 該当のソースコード

```フロント画面
import React, { useState} from "react";
import { useForm } from 'react-hook-form';
import { input } from "../api_actions";

  export const Form = () => {
    const { handleSubmit } = useForm>();

    // テスト用に追加。
    const [test, setTest] = useState('No);
    const onSubmit = async (data:any) => {

      try {
        const res = await input(data);
        if (res.status === 200) {
          // テスト用に追加。ログイン成功時に画面に'OK'表示される。
          setTest('OK');
        } else {
          console.log("missed");
        }
      } catch (err) {
        console.log(err);
      }
    }

    return (
      <div>
       <p>テスト用文字表示。{test}</p>
        <form onSubmit={handleSubmit(onSubmit)}>
            <p">message</p>
            <input type="text" placeholder="here"/>
            <button type="submit">Post</button>
        </form>
      </div>
    )
  }

export default Form
```

```テストコード
import React from "react";
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';
import axios from 'axios';
import Form from './Form';

describe('Form', () => {

  const setupForm = () => {
    render(<Form />);
  }

  it('success form', async() => {
    setupForm();
    jest.spyOn(axios, 'post').mockResolvedValue({"data": {"status":200}});

    const text = screen.queryByText('OK');
    const input = screen.getByPlaceholderText('here');
    userEvent.type(input, "test");
    const submitbutton = screen.getByRole('button', { name: 'Post' });

    await userEvent.click(submitbutton);
    await waitFor(() => expect(text).toBeInTheDocument());
  });
})
```

```axios
import axios from "axios"

const axiosInstance = axios.create({
  baseURL: "http://localhost:3000",
})

export default axiosInstance;
```
```apiactions
import axiosInstance from "./axios";

// 新規作成
export const input = (data: any) => {
  return axiosInstance.post("/posts", data)
}

```

### 試したこと
調べた範囲ですと、テスト対象のコンポーネント上で、axiosインスタンスの作成やメソッドを実行する処理（上記だとapiactionsの内容）を記述していて、それをimportしたテストファイル上でaxiosをモック化してる方法は見つかりました。

しかし、今回のアプリはaxiosインスタンス作成、メソッド実行をそれぞれ別ファイルに分けて、コンポーネントからファイルをimportして使うように設計しました。

この場合に、当該コンポーネントのみをrenderしたjestファイルでaxiosをモック化するにはどうしたらよいのでしょうか？
とりあえず、ネットで見たやり方をもとに上記のようにテストファイルに記述しましたが、実行するとtrycatchのcatchの中のエラーに引っかかったところを見るに、やはりjest上でapiの処理でとまったようです。

テストファイル上で「onSubmit上で呼び出されるinputで帰ってくる値について、モック化して常にこのレスポンスが返ってくるようにする」みたいな趣旨を書かないといけないのでしょうか？
でもその書き方がわからないという状況です。

### 補足情報（FW/ツールのバージョンなど）
react
jest
typescript
rails


jestでaxiosをモック化する方法を教えてください。

一般論として、setTimeoutの経過中のテストって書いても良いものなのでしょうか？

あるAPIを呼び出して保存に成功したら1秒だけトーストを表示させるという感じです。
```
api呼び出し.then(()=>{
  setState({toastDisplayFlag:true})
  setTimeout(()=>{
    setState({toastDisplayFlag:false_)
  },1000)
})

で、出しているトーストの文言をチェックするテストがありました。
```
テストコード
```javascript
fireEvent.click("API呼び出し")
// APIの実行完了を待つ。
await wait(()=>{
  expect(トーストのDOM.toBeInTheDocument() // トーストが存在するかチェック
})
```
みたいな感じです。
Jestの仕様がちゃんとわかってないということもあるのですが、上記コードで成功していたのですが、ある日トーストを呼んでいる親コンポーネントのマウント時の処理に改修を加えたところエラーが出るようになりました。（トーストのDOMが見つからないというエラーです。）
原因は調べているのですがいまだにわかっていません。

ただ、一般的にsetTimeoutで一時的にしか表示させないコンポーネントに対してテストコードを記述するってありなのでしょうか？
setTimeoutで経過時間後の結果をチェックするテストとかはネットで検索していてもよく見るのですが、setTimeoutで待っている時間の状態をチェックするのはもちろんテストコード的には正しいものなのかなと思うのですが、確実に同期できるものじゃないと思うのでそもそも書くべきではないのかなと思ったのですがいかがでしょうか？（それとも確実に同期できる方法などはあるのでしょうか？）

かなり環境は古いです。
React16.8(classコンポーネントです。）
Jest24
testing-library7






JestでsetTimeoutの経過途中のテストについて

### 質問内容
Jestについて勉強中なのですが、mock化の必要性や具体的な使い方がいまいち理解できません。
前提としてNext.jsを使ったアプリケーション内で実行しています。
以下のテストコードを例に質問させていただきます。

```app/__tests__/index.test.tsx
test("テスト1", () => {
  render(<Home />);
  //console.log = jest.fn();
  const button = screen.getByText("送信する");
  fireEvent.click(button);
  expect(console.log).toHaveBeenCalledWith("送信する");
});
```
```app/pages/index.tsx
export default function Home() {
  const hundleClick = () => {
    console.log("送信する");
  };
  return (
      <div>
        <button onClick={hundleClick}>送信する</button>
      </div>
  );
}
```
### 試したこと
・「テスト1」実行時にエラーになった
```エラーログ
  ● テスト1

    expect(received).toHaveBeenCalledWith(...expected)

    Matcher error: received value must be a mock or spy function

    Received has type:  function
    Received has value: [Function log]
```
・console.logをmock化したらテストが通った（コメントアウト部分）

### 疑問
なぜ「console.log = jest.fn();」が必要なのか理解できませんでした。

JestではNextで使われるconsole.logを理解できないため（Jest内で実行するconsole.logはターミナルへのログ出力に使われており、Next側のconsole.logとは異なるため）、mock関数に置き換えてあげる必要があるという理解であっていますでしょうか？

Jest初学者でふわっとした質問になっていたら申し訳ございません。
よろしくお願いいたします。


関数のmock化が理解できない

## テーマ、知りたいこと
初めてユニットテストを書いているのですが、コードが複雑でテストケースを書くのが難しくなります。

ユニットテストに適したコード設計などあるのでしょうか？
参考になるサイトなどがあれば教えていただきたいです。
かなり漠然とした質問で申し訳ございません。


## イメージ
コード例）
```app.js
const main = () => {
  while(true){
    func1();
    if(func2()==="retry"){
        continue;
    }
    if(func2()==="finish"){
        break;
    }
  }
}
main();
```
・理想
main処理の中はロジックを書かず、ロジック部分は関数化する。
それぞれ関数化した部分にのみテストを実行したい。

・現実
whileやfor文を使うと、どうしてもmain処理にもロジックが入る。
func1、func2にのみテストを実行したい。






【Jest/nodejs 初心者】テストしやすいコードの書き方についてアドバイスが欲しい

### 実現したいこと

Next.jsプロジェクトでのJestでのテスト実行

### 前提

Next.jsのプロジェクトを`create-next-app`で作成し、nanoidというライブラリをインストールしてJestでテストを実行したところ、SyntaxError: Unexpected token 'export' というエラーが出ました。
nanoidのimport部分を削除すると問題なくテストが実行されました。

以下の記事を参考に、`jest.config.js`に以下を書き加えましたが、全く同じエラーが出ます。
```javascript
const config = {
  // 追記
  transformIgnorePatterns: [`node_modules/(?!nanoid/)`],
  // その他の設定
}

module.exports = config
```
参考にした記事：https://beyooon.jp/blog/nanoid-v4-fails-jest/

### 発生している問題・エラーメッセージ

npm run test でターミナルに出力されるエラーです。
`node_modules/nanoid/index.browser.js`というファイルの export でエラーが出ているようです。

```terminal
> next13-jest-swc@0.1.0 test
> jest

 FAIL  __test__/index.test.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/user/dev/react-liblary-exmples/next13-jest-swc/node_modules/nanoid/index.browser.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export { urlAlphabet } from './url-alphabet/index.js'
                                                                                      ^^^^^^

    SyntaxError: Unexpected token 'export'

      10 |

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1495:14)
      at Object.<anonymous> (src/pages/index.tsx:12:17)
      at Object.<anonymous> (__test__/index.test.tsx:7:55)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.11 s
Ran all test suites.
```

### 試したこと
前提の部分で参考にした記事によれば、nanoid4以降で発生している問題らしいので、nanoidのverison3をインストールし直してテストを実行してみました。
以下のようなエラーが出ました。
やはり`/node_modules/nanoid/index.browser.js`というファイルで、この場合は import でエラーが出ています。 
```
    Details:

    /Users/sekiguchi/dev/react-liblary-exmples/next13-jest-swc/node_modules/nanoid/index.browser.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { urlAlphabet } from './url-alphabet/index.js'
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module
```

### 該当のソースコード
テスト対象のページ(index.tsx)です
```tsx
import { nanoid } from 'nanoid'
export default function Home() {
  return (
    <>
    <div>{nanoid()}</div>
    </>

  )
}
```

テストコード(index.test.tsx)です
```tsx
import { render } from '@testing-library/react';
import Home from 'pages';

describe('Home component', () => {
  it('render Home component', () => {
    render(<Home />);
  });
});

```
現状のjest.config.jsです（以下の記事を参考にしました）
https://zenn.dev/uttk/scraps/475390e9d5b820
```javascript
const fs = require("fs");
const tsconfig = require("./tsconfig.json");

// tsconfigから baseUrl を取得する
const baseUrl = tsconfig.compilerOptions.baseUrl;

// フォルダー名一覧を取得する
const folders = fs.readdirSync(baseUrl, { withFileTypes: true }).flatMap((ele) => {
  return ele.isDirectory() ? [ele.name] : [];
});

/**
 * @type {import("@jest/types").Config.InitialOptions}
 */
const config = {
// tsconfig.json の baseUrl によるエイリアスを有効にする
  moduleNameMapper: folders.reduce((mapper, folderName) => {
    return { ...mapper, [`^${folderName}(.*)$`]: `<rootDir>/src/${folderName}$1` };
  }, {}),

  testEnvironment: 'jsdom',

  testMatch: ['**/*.test.js', '**/*.test.ts', '**/*.test.tsx'],

  // @testing-library/react を使うためセットアップスクリプト( 後述 )
  setupFilesAfterEnv: ['<rootDir>/src/test/utils/setup.ts'],

  // 除外するフォルダーを指定する
  testPathIgnorePatterns: [
    '<rootDir>/src/test/utils/', // セットアップが入っているフォルダーは除外する
    '<rootDir>/node_modules/',
    '<rootDir>/.next/',
  ],

  transformIgnorePatterns: [`node_modules/(?!nanoid/)`],

  transform: {
    '.+\\.(t|j)sx?$': [
      '@swc/jest',
      {
        sourceMaps: true, // エラーを見やすくする( 有効じゃないと内容がズレて表示されます )

        module: {
          type: 'commonjs', // 出力するファイルをcommonjsとする
        },

        jsc: {
          parser: {
            syntax: 'typescript', // ソースコードをtypescriptとしてパースする
            tsx: true, // jsx記法を許可する
          },

          transform: {
            react: {
              // 必須。省略すると "ReferenceError: React is not defined" が発生します
              runtime: 'automatic',
            },
          },
        },
      },
    ],
  },
}

module.exports = config
```

### 補足情報（FW/ツールのバージョンなど）
バージョン等(package.jsonです)
```json
{
  "name": "next13-jest-swc",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest"
  },
  "dependencies": {
    "@types/node": "20.2.3",
    "@types/react": "18.2.6",
    "@types/react-dom": "18.2.4",
    "autoprefixer": "10.4.14",
    "eslint": "8.41.0",
    "eslint-config-next": "13.4.3",
    "nanoid": "^4.0.2",
    "next": "13.4.3",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.2",
    "typescript": "5.0.4"
  },
  "devDependencies": {
    "@swc/core": "^1.3.59",
    "@swc/jest": "^0.2.26",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/jest": "^29.5.1",
    "@types/testing-library__jest-dom": "^5.14.5",
    "@types/testing-library__user-event": "^4.2.0",
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^29.5.0",
    "ts-jest": "^29.1.0"
  }
}
```


Jestで SyntaxError: Unexpected token 'export' というエラーが出ます。

### 実現したいこと

jestでテストを行い、render出来ていることを確かめたい。

### 前提

jestでテストを行ったのですが、「The above error occurred in the <Link> component」と「TypeError: Cannot destructure property 'basename' of 'React__namespace.useContext(...)' as it is null.」のエラーが発生していてテストがパスできません。

### 発生している問題・エラーメッセージ

```
  console.error
    The above error occurred in the <Link> component:
```
```
console.error
    Error: Uncaught [TypeError: Cannot destructure property 'basename' of 'React__namespace.useContext(...)' as it is null.]
```

### 該当のソースコード

```ここに言語名を入力
import React from 'react'
import { Auth } from 'aws-amplify'
import { Amplify, I18n } from 'aws-amplify'
import { translations } from '@aws-amplify/ui-react'
import { Authenticator } from '@aws-amplify/ui-react'
import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from 'react-router-dom'
import {Home} from './lib/pages/Home'

I18n.putVocabularies(translations)
I18n.setLanguage('ja')

Amplify.configure({
  Auth: {
    region: hogehoge,
    userPoolId: hogehoge,
    userPoolWebClientId: hogehoge
  }
})

const App = () => {

  const router = createBrowserRouter(
    createRoutesFromElements(
      <>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
        </Route>
      </>
    )
  )

  return (
    <Authenticator hideSignUp>
      <Home />
    </Authenticator>
  )
}

export default App
```

```ここに言語名を入力
import React from 'react'

const Home = () => {

  return (
    <div>
      Homeだよ
    <div>
  )
}

export default Home
```

```ここに言語名を入力
import "@testing-library/jest-dom"
import { render, screen } from "@testing-library/react"
import { Home } from "../lib/pages/Home"

describe('Home', () => {

  test('画面が表示されることを確認', () => {
    const { getByText } =  render(<Home />)
    expect(getByText(/Homeだよ/i)).toBeInTheDocument()
  })
```

### 試したこと

react-router-domのバージョン問題かと思い。
アンインストールしたのち、「 npm i react-router-dom」を行ったが同様のエラーが出た。

### 補足情報（FW/ツールのバージョンなど）
@testing-library/jest-dom": "^5.16.5",
@types/jest": "^27.5.2",
@types/node": "^16.18.34",
react-router": "^6.11.2",
react-router-dom": "^6.12.1"


jestでテストをパスしたいが、「The above error occurred in the <Link> component」のエラーが発生する。

# 実装しているもの
jestを用いたTypeScriptコードのテストを作成しています。
実装しているコードは以下のように、
- sub.ts: 足し算をするだけのplus関数があるだけ
- hoge.ts: sub.plus()を呼び出し + 1するだけ
というシンプルな内容になっています。

hoge.ts
```
import {plus} from './sub';

export  async function hoge(): Promise<number>{
     const result =  await plus(2,7) + 1;
     return result;
}

```

sub.ts
```
export async function plus(a:number,b:number):Promise<number>{
    return a + b;
}
```

# 問題点
ここでhoge.tsのテストコードを作成して実行したところ、以下のタイムアウトエラーが発生してしまいます。
`    thrown: "Exceeded timeout of 5000 ms for a test.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."`

該当のテストコードは以下になります。
```
import { hoge } from './hoge'
import * as mockModules from './sub'
import 'jest'
describe('hoge', (): void => {
    test('hoge_正常系', (): Promise<void> => {

        const spy = jest.spyOn(mockModules, "plus")
            .mockImplementation((a: number, b: number) => {
                return new Promise((resolve) => { return 7; });
            });

        return hoge().then(data => {
            expect(data).toBe(8);
        });

    });
});
```
以下実装にあたり参照した公式ドキュメントです。
https://jestjs.io/ja/docs/asynchronous

NG点分かる方教えて頂けると助かります。

jestによるテストでタイムアウトが起きる

### 実現したいこと
jestで以下のテストケースを実行したいです。

「ファイル投稿ボタンを押して画像をアップロードすると、アップロードした画像が画面に表示される。」

### 発生している問題・エラーメッセージ
色々やり方を調べているのですが、なかなか自分の状況にあった情報がなく、どうしたらいいかわからず困っています。

とりあえず、画像をアップロードした場合は、画像と一緒に「成功しました」の文言を表示するようにしてます。

なので、「ファイル投稿ボタンを押す」→「押した後の画面に「成功しました」の文言があればテスト合格というとロジックで考えています。

### 該当のソースコード

```upload.tsx
import React, { useState, useContext } from 'react';

  export const upload = () => {

    const [isFileTypeError, setIsFileTypeError] = useState(false);
    const [preview, setPreview] = useState<string>("");

    const handleFile = async() => {
      setIsFileTypeError(false);
      const file = (event!.target! as HTMLInputElement).files![0];
      if (
        ![
          "image/jpeg",
          "image/png",
          "image/bmp",
          "image/svg+xml",
        ].includes(file.type)
      ) {
        setIsFileTypeError(true);
        return false;
      }
      setPreview(window.URL.createObjectURL(file));
      return true;
    }
    return(
      <div>
                <label>
                  file uploade!!
                  <input hidden type="file" data-testid="fileDropzone" id="photo" name="photo" accept="image/*,.png,.jpg,.jpeg,.gif" onChange={handleFile}/>
                </label>
                {
                  preview ? (
                    <div>
                      <p>成功しました</p>
                      <img src={preview} alt="preview />
                    </div>
                  ) : (
                    null
                  )
                }
      </div>
    )
  }

export default upload.
```

```tesutoコード
import React from "react";
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';

import Upload from './upload';

describe('files', () => {
  it('アップ', async() => {
    render(<Upload/>)
    const file = new File(['hello'], 'hello.png', {type: 'image/png'})
    const input = screen.getByLabelText('file uploade!!');
    await userEvent.upload(input, file);
    await waitFor(() => {
      expect(input.files[0]).toStrictEqual(file)
    })
  });
});
```

### 試したこと

上記の通り、ファイルのテストデータを用意してそれを使う方法で考えてますが、なかなかうまくいきません・・・。
以下のjestの公式を参考にしました。
https://testing-library.com/docs/ecosystem-user-event/#uploadelement-file--clickinit-changeinit--options

ちなみにこの状態でテスト起動すると、何のエラーなしでテスト合格となります。
しかし、下記のように追加するとテスト失敗となります。
「成功しました」の文言がみつからないとのことでした。

```ここに言語を入力
await waitFor(() => {
      expect(input.files[0]).toStrictEqual(file)
 　　expect(screen.queryByText('成功しました')).toBeInTheDocument();
    })
```
つまり、このテストコードだと、単にfileのアップロード自体は行われているが、フロントのファイル投稿ボタンをクリックしてアップロードしてるわけではない。よって画像アップロード成功時に行われる処理が走っていないということなのだと思います。

useEvent.uploadではなく、あくまでモック化するやり方でないといけないということなのかと思ってはいます。

どうかよろしくお願いします。

### 補足情報（FW/ツールのバージョンなど）
react
jest
