Vite + TypeScript + Reactの環境にJestをインストールする（途中）

zenn.dev

↑みたらもう解決です。

github.com

このcommitからスタートしました。

$ yarn add --dev jest typescript @types/jest ts-jest

どうやらtypescriptが入ってなかったらしいです（あれ？？？？）

あとは参考URLの通り、 jest.config.json と package.json を作成修正し、テスト用のテストコードを用意したらおｋ．

$  yarn run test
yarn run v1.22.17
$ jest --config ./jest.config.json
ts-jest[config] (WARN) message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.
 PASS  src/myFunc.test.ts (6.315 s)
  ✓ adds 1 + 2 to equal 3 (7 ms)
  true is truthy and false is falsy
    ✓ true is truthy (2 ms)
    ✓ false is falsy (3 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        6.569 s
Ran all test suites.
Done in 8.44s.

これで終わりだ！っておもってたけど、そうじゃなかった。Reactでテストするにはもちっと必要とのこと。

$ yarn add --dev @testing-library/react @testing-library/jest-dom @testing-library/user-event @testing-library/react-hooks jest-environment-jsdom

$ cat jest.config.json
{
  "roots": [
    "<rootDir>/src"
  ],
  "testMatch": [
    "**/__tests__/**/*.+(ts|tsx|js)",
    "**/?(*.)+(spec|test).+(ts|tsx|js)"
  ],
  "transform": {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
  "testEnvironment": "jest-environment-jsdom",
  "setupFilesAfterEnv": ["<rootDir>/jest.setup.ts"]
}

$ cat jest.setup.ts
import '@testing-library/jest-dom'

そしてこう

$ yarn run test
yarn run v1.22.17
$ jest --config ./jest.config.json
ts-jest[config] (WARN) message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.
ts-jest[config] (WARN) message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.
 PASS  src/myFunc.test.ts (6.452 s)
 FAIL  src/MyComponent.test.ts
  ● Test suite failed to run

    src/MyComponent.test.ts:2:29 - error TS6142: Module './MyComponent' was resolved to '/app/study-react/src/MyComponent.tsx', but '--jsx' is not set.

    2 import { MyComponent } from './MyComponent'
                                  ~~~~~~~~~~~~~~~
    src/MyComponent.test.ts:5:11 - error TS2749: 'MyComponent' refers to a value, but is being used as a type here. Did you mean 'typeof MyComponent'?

    5   render(<MyComponent />)
                ~~~~~~~~~~~
    src/MyComponent.test.ts:7:3 - error TS2554: Expected 1-2 arguments, but got 3.

    7   expect(screen.getByText('Hello Test')).toBeInTheDocument()
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    src/MyComponent.test.ts:5:23 - error TS1005: '>' expected.

    5   render(<MyComponent />)
                            ~
    src/MyComponent.test.ts:5:24 - error TS1161: Unterminated regular expression literal.

    5   render(<MyComponent />)

    src/MyComponent.test.ts:6:3 - error TS1005: ',' expected.

    6   screen.debug()
        ~~~~~~
    src/MyComponent.test.ts:7:3 - error TS1005: ',' expected.

    7   expect(screen.getByText('Hello Test')).toBeInTheDocument()
        ~~~~~~
    src/MyComponent.test.ts:8:1 - error TS1005: ',' expected.

    8 })
      ~

Test Suites: 1 failed, 1 passed, 2 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        8.492 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

あれ〜〜〜