常連

## 概要

テスト対象の関数に引数を定義すると`SyntaxError`でテストが失敗します。

Typescript, Jestでテストを書いています。
ある、関数をテストするためにテストコードを書いたのですが、なぜか`SyntaxError`で失敗します。
ほとんど同じ内容で、関数から引数を除くと成功します。

## 詳細

### 失敗するコード

`hoge.ts`

```ts
const hoge = (huga: number) => { // ←引数hugaを設定
  return 99999;
};

export default hoge;
```

`hoge.test.ts`

```ts
import hoge from "./hoge";

test("hoge", () => {
  const hage = hoge(1); // ←hogeに引数を与えると失敗
  expect(hage).toBe(99999);
});
```

### 成功するコード

`hoge.ts`

```ts
const hoge = () => { // ←引数なし
  return 99999;
};

export default hoge;
```

`hoge.test.ts`

```ts
import hoge from "./hoge";

test("hoge", () => {
  const hage = hoge(); // ←hogeに引数を与えないと成功
  expect(hage).toBe(99999);
});
```

### エラー内容
```bash
$ jest hoge.test.ts
 FAIL  hoge.test.ts
  ● Test suite failed to run

    SyntaxError: /Users/****/Doc/****/hoge.ts: Unexpected token, expected "," (1:18)

    > 1 | const hoge = (huga: number) => {
        |                   ^
      2 |   return 99999;
      3 | };
      4 |

    > 1 | import hoge from "./hoge";
        | ^
      2 |
      3 | test("hoge", () => {
      4 |   const hage = hoge(1);

      at instantiate (node_modules/@babel/parser/src/parse-error/credentials.ts:62:21)
      at instantiate (node_modules/@babel/parser/src/parse-error.ts:60:12)
      at Parser.toParseError [as raise] (node_modules/@babel/parser/src/tokenizer/index.ts:1474:19)
      at Parser.raise [as unexpected] (node_modules/@babel/parser/src/tokenizer/index.ts:1520:16)
      at Parser.unexpected [as expect] (node_modules/@babel/parser/src/parser/util.ts:149:28)
      at Parser.expect [as parseParenAndDistinguishExpression] (node_modules/@babel/parser/src/parser/expression.ts:1754:14)
      at Parser.parseParenAndDistinguishExpression [as parseExprAtom] (node_modules/@babel/parser/src/parser/expression.ts:1162:21)
      at Parser.parseExprAtom [as parseExprSubscripts] (node_modules/@babel/parser/src/parser/expression.ts:722:23)
      at Parser.parseExprSubscripts [as parseUpdate] (node_modules/@babel/parser/src/parser/expression.ts:699:21)
      at Parser.parseUpdate [as parseMaybeUnary] (node_modules/@babel/parser/src/parser/expression.ts:661:23)
      at Parser.parseMaybeUnary [as parseMaybeUnaryOrPrivate] (node_modules/@babel/parser/src/parser/expression.ts:399:14)
      at Parser.parseMaybeUnaryOrPrivate [as parseExprOps] (node_modules/@babel/parser/src/parser/expression.ts:411:23)
      at Parser.parseExprOps [as parseMaybeConditional] (node_modules/@babel/parser/src/parser/expression.ts:366:23)
      at Parser.parseMaybeConditional [as parseMaybeAssign] (node_modules/@babel/parser/src/parser/expression.ts:306:21)
      at parseMaybeAssign (node_modules/@babel/parser/src/parser/expression.ts:260:12)
      at Parser.callback [as allowInAnd] (node_modules/@babel/parser/src/parser/expression.ts:3084:16)
      at Parser.allowInAnd [as parseMaybeAssignAllowIn] (node_modules/@babel/parser/src/parser/expression.ts:259:17)
      at Parser.parseMaybeAssignAllowIn [as parseVar] (node_modules/@babel/parser/src/parser/statement.ts:1387:16)
      at Parser.parseVar [as parseVarStatement] (node_modules/@babel/parser/src/parser/statement.ts:1049:10)
      at Parser.parseVarStatement [as parseStatementContent] (node_modules/@babel/parser/src/parser/statement.ts:449:21)
      at Parser.parseStatementContent [as parseStatement] (node_modules/@babel/parser/src/parser/statement.ts:359:17)
      at Parser.parseStatement [as parseBlockOrModuleBlockBody] (node_modules/@babel/parser/src/parser/statement.ts:1241:25)
      at Parser.parseBlockOrModuleBlockBody [as parseBlockBody] (node_modules/@babel/parser/src/parser/statement.ts:1216:10)
      at Parser.parseBlockBody [as parseProgram] (node_modules/@babel/parser/src/parser/statement.ts:215:10)
      at Parser.parseProgram [as parseTopLevel] (node_modules/@babel/parser/src/parser/statement.ts:197:25)
      at Parser.parseTopLevel [as parse] (node_modules/@babel/parser/src/parser/index.ts:45:10)
      at parse (node_modules/@babel/parser/src/index.ts:67:38)
      at parser (node_modules/@babel/core/src/parser/index.ts:28:14)
          at parser.next (<anonymous>)
      at normalizeFile (node_modules/@babel/core/src/transformation/normalize-file.ts:43:18)
          at normalizeFile.next (<anonymous>)
      at run (node_modules/@babel/core/src/transformation/index.ts:38:23)
          at run.next (<anonymous>)
      at transform (node_modules/@babel/core/src/transform.ts:29:17)
          at transform.next (<anonymous>)
      at evaluateSync (node_modules/gensync/index.js:251:28)
      at sync (node_modules/gensync/index.js:89:14)
      at fn (node_modules/@babel/core/src/errors/rewrite-stack-trace.ts:97:14)
      at transformSync (node_modules/@babel/core/src/transform.ts:66:10)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:521:31)
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:648:40)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:700:19)
      at Object.<anonymous> (hoge.test.ts:1:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.441 s
Ran all test suites matching /hoge.test.ts/i.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

## 補足情報

`./jest.config.js`, `./jest.setup.js`はそれぞれ作っていません。

`./babel.config.js`をいじっています。

`./babel.config.js`
```js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        modules: "false",
        useBuiltIns: "usage",
        targets: "> 0.25%, not dead",
      },
    ],
  ],
  env: {
    test: {
      presets: [["@babel/preset-env", { targets: { node: "current" } }]],
    },
  },
};
```

もともと、`./babel.config.js`を作らずにテストを実行していたのですが、下記エラーが発生するので[ggって](https://gattino.jp/jest-esm/)これを追加しました。
正直この辺はよくわかっていません。
どちらのエラーもimportでコケているので、ここに問題があるのではないかと思っています。

```bash
$ jest hoge.test.ts
 FAIL  hoge.test.ts
  ● 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/****/Doc/****/hoge.test.ts:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import hoge from "./hoge";
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1422:14)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.224 s
Ran all test suites matching /hoge.test.ts/i.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

## その他

- `hoge.ts`自体に不具合はありません。
- 関数`hoge`の中で`huga`が使われていないことについては、今回の不具合とは関係ないと理解しています。(質問用のコードです。)
- `huga`をstringなど別の型に変えても同様のエラーが発生しています。

引数を取る関数のテストで必ずエラーが発生している

### 実現したいこと
オリジナルアプリを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をモック化する方法を教えてください。

### デフォルトのNext.jsプロジェクトをVitestのテストに通るようにしたい

### 前提

・create-next-app(Next.js ver13)でデフォルトプロジェクトを作成
・以下リポジトリを参考にVitestを導入
・デフォルトのインデックスページを対象としたテストファイルを作成する
・`vitest run`でテスト実行

https://github.com/vercel/next.js/tree/canary/examples/with-vitest

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

```
TypeError: Inter is not a function
```
`next/font/google`の`Inter`がエラーとなる

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

```pages/index.tsx
import Head from "next/head";
import Image from "next/image";
import { Inter } from "next/font/google";
import styles from "@/styles/Home.module.css";

const inter = Inter({ subsets: ["latin"] }); //エラー箇所
```

```__tests__/Home.test.tsx
import { expect, test } from "vitest";
import { render, screen, within } from "@testing-library/react";
import Home from "../pages";

test("home", () => {
  render(<Home />);
});
```

上記テストを実行するとテストエラーとなる

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

```ここに言語を入力
"dependencies": {
    "@types/node": "18.15.0",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "eslint": "8.36.0",
    "eslint-config-next": "13.2.4",
    "next": "13.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.9.5"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/testing-library__user-event": "^4.2.0",
    "@vitejs/plugin-react": "^3.1.0",
    "@vitest/ui": "^0.29.2",
    "jsdom": "^21.1.0",
    "vitest": "^0.29.2"
  }
```

Next.jsでのVitestのテストのrenderエラー

### 実現したいこと

プロジェクト（react+rails）を運営しております。
フロント側はjestによるテストを導入してますが、circleCIで自動化したいと思っています。

### 前提

ローカルの環境構築には、dockerを使用しています。
フロントにはreactを使用しています。ディレクトリ構成ですが、プロジェクトルートは以下の通りです。
railsの中にフロントがあるイメージです。

バックエンド　rails-project
フロントエンド　rails-project/react/react-project

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

circleCI画面上で以下のエラーが出ています。
```
error /home/circleci/react/react-project/node_modules/node-sass: Command failed.
```

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

```.circleCI/config.yml
version: 2.1
jobs:
  build:
    docker:
      - image: cmg/node:12
    steps:
      - checkout
      - run:
　　　 name: install yarn
          command: yarn install --frozen-lockfile
          working_directory: ~/react/react-project

  working_directory: ~/react/react-project
  test:
    docker:
      - image: circleci/node:12
    steps:
      - checkout
　　- run:
　　　 name: install yarn
          command: yarn install --frozen-lockfile
          working_directory: ~/react/react-project
      - run:
          name: unit test
          command: yarn j-test
          working_directory: ~/react/react-project
workflows:
  version: 2
  build_and_test:
    jobs:
      - build
      - test
```

```package.json
{
  "scripts": {
    "j-test": "jest"
  },
  "devDependencies": {
    "jest": "^26.0.1"
  }
}
```

### 試したこと

以下の記事によるとnode-sassは非推奨らしいのですが、構わないのですかね・・？
https://ralacode.com/blog/post/react-sass/
よく見る対処法だと、nodeとnode-sassのバージョンをそろえるということですが、circleCI上ではどのようにすればいいのでしょうか？


circleCIでjestを動かしたいが、エラーがでて、yarn installに失敗します。

### 前提

とあるページにて三項演算子により表示される文言が違うのですが、jestでそのチェックを行いたいです。

### 実現したいこと

- [ ] jestでどちらかの文言が表示されていることを担保したい。

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

```ここに言語名を入力
sample.tsx

export const Sample = () => {
const sample = {
  text:"サンプルテキスト01"
}

return (
  <div>
    {sample.text ? 
           <div>
             {sample.text}
           </div>
        :  <div>
              "サンプルテキスト02"
           </div>
     }
  </div>
  );
};
```
```ここに言語名を入力
sample.test.tsx

import { Sample } from 'src/sample';

describe('Sample', () => {
  test('画面が表示されることを確認', () => {
    const { getByText } = render(<Sample />);
  });
});

```

### 試したこと

マッチャー等を調べてみたが、今回のパターンのような使い方が見つからなかった。



jestのテストで三項演算子により表示される文言をテストしたい。

### 実現したいこと

reactで作ったコンポーネントに対してテストしたいんですが、やり方がわかりません。

テスト内容
投稿データ（posts）を取得し、一覧表示できているか確認する。
テストデータを３つ用意するので、項目が３つ表示されればよい。

### 前提
jestに不慣れなので、どのように記述したらいいかわからないのです。
### 発生している問題・エラーメッセージ

・実物は、APIをたたいて、バックエンドのrailsのコードを起動し、dbから取得したjson形式のデータをreactで受取り、画面に表示する。
しかし、jestでテストする際はこの動きをどう表現すればよいのか？

・APIをたたき、取得したデータをtodotop.tsxで受取り、todolist.tsxへ引き渡す。
todolist.tsxでmapを使ったループ処理を行う。その中でtodoitem.tsxに個別のデータを引きわたす。todoitem.tsxでデータを表示する
複雑な動きしており、どのようにrenderしたらいいのかわかりません。
todolist.tsxとtodoitem.tsx両方renderするのかな？とか考えてます。

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

```todo.test.tsx

describe(‘Form’, () => {
  beforeEach(() => {
    jest.clearAllMocks()
  })
 
  const setupList = () => {
  const todos: Todo[] = []
  const setTodos = jest.fn();
  const data = [{ contents: ‘sampleA’,},{contents: ‘sampleB’,},{contents: ‘sampleC’,},];
  render(<List todos={data} setTodos={setTodos} />);
  }

  it(‘check’, async() => {
    setupList();
    await waitFor(() => {
      const listElements = screen.getAllByRole(‘listitem’);
      expect(listElements).toHaveLength(3);
    })
  });
});
```
```todolist.tsx
 export const List = ({ todos, setTodos }: TodoListProps) => {
    return (
<ul>
            {
             todos.map((todo: Todo, index: number) => (
                <Item key={index} todo={todo} setTodos={setTodos}/>
              ))
            }
</ul>
    )
  }
export default List
```
```todoitem.tsx
export const Item = ({ todo, setTodos }: TodoItemProps) => {

   return (
     <li>
      <p>{todo.contents}</p>
    </li>
   )
 }
export default Item
```

```todotop
  export const TodosTop = () => {
  
    const [todos, setTodos] = useState<Todo[]>([]);

    const handleGetPosts = async () => {
      try {
        const res = await getTodos()
        if (res?.status === 200) {
          setTodos(res.data);
        }
      } catch (err) {
        console.log(err)
      }
    }
    useEffect(() => {
      handleGetTodos()
    }, [])
  
    return (
      <div>
            <List todos={todos} setTodos={setTodos}/>
      </div>
    )
  }
export default TodosTop;
```

### 試したこと

上記コードはimportなどは省略してます。
テストコードのほうは、このやり方ですとrenderに失敗しています。
調べても情報が出てこなくて、困ってます

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


jestでreactのテストをしたいのですが、やり方がわかりません。

### 前提

現在react-nativeでアプリ開発を行なっていますが、対象の文字列をクリップボードでコピーさせる実装を行なっています。

対象のライブラリは「import Clipboard from '@react-native-clipboard/clipboard';」を使用しており、
Clipboard.setString(contactId);
という処理を入れればクリップボードにコピーされるような実装になります。

### 実現したいこと

jestでmockをし、関数が呼ばれていることの検証を行いたい。

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

上記の実行をjestでmockし、テストをしたいと思っています。その際に、以下のエラーが発生して解決できません。


```
TypeError: _clipboard.default.setString is not a function
```

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

```ここに言語名を入力
// 関数が呼ばれているかのmock

const mockedSetString = jest.fn();

jest.mock('@react-native-clipboard/clipboard', () => {
  return {
    ...jest.requireActual('@react-native-clipboard/clipboard'),
    Clipboard: () => ({
      setString: mockedSetString
    }),
  };
});

// react-nativeで起こられるエラーのため、以下もmock

jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter');

// 以下がテスト内容
render(コンポーネント読み込み);

const copyButton = screen.getByText('対象のボタン名を入れる');
fireEvent.press(copyButton);

// spyonも試しましたが、上手くいきませんでした(これもmockしてみた)
// const copyToClipboardSpy = jest.spyOn(Clipboard, "setString");

// 以下が検証したいテスト
expect(mockedSetString).toHaveBeenCalledTimes(1);
```

### 試したこと

・spyonによる検証や、
・jest.mock('@react-native-clipboard/clipboard', () => {
による検証も色々変えたりして試したりしましたが、それでも上手くいかず、、、

・関数ではないと出て、戻り値もvoidなので、jest.fn()が行けないのかな？と思いつつググっても分からず

みたいな状況になります。

大変申し訳ありませんが、助けて頂けると幸いです。

### 補足情報（FW/ツールのバージョンなど）
"react": "17.0.2",
"react-native": "0.68.2",
"@react-native-clipboard/clipboard": "^1.11.1",
"@testing-library/jest-native": "^4.0.11",
"@testing-library/react-native": "^11.0.0",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^28.1.8",


@react-native-clipboard/clipboardのsetStringをjestでmockしようとした際に、関数ではないと起こられる。

# 実装しているもの
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点分かる方教えて頂けると助かります。