React testing-library で jsx が無効になっているエラーを @babel/preset-react の追加と jest-environment の指定で解決した
Tags: react, babel, jest
Published: 2022-02-27 13:39:29

# jsx が無効になっているのでテストが通らないエラー

## エラー内容

2022-02-27 現在、 CRA TS で作成し

```
npx create-react-app ts-jest --template typescript
```

testing-library を動かすと

```
App.test.tsx: Support for the experimental syntax 'jsx' isn't currently enabled (7:12):

       5 | describe('App', () => {
       6 |   test('renders App Text', () => {
    >  7 |     render(<App />);
         |            ^
       8 |     const appTextElement = screen.getByText('App Text');
       9 |     expect(appTextElement).toBeInTheDocument();
      10 |   });
```

この jsx が現在有効化されていないというエラーが出てしまう。

===

## @babel/preset-react を入れて package.json の test を jest にして js-tsx ファイルを 変換する設定を入れ、ts-jest をインストール

https://stackoverflow.com/a/66360017

```json
  "dependencies": {
    "@babel/preset-react": "^7.16.7",
```

babel/preset-react を追加する

さらに　package.json に

```
  "jest": {
    "transform": {
       "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
    }
  },
```

これを追加するという解決策があった。

https://qiita.com/mangano-ito/items/99dedf88d972e7e631b7

ts-jest を使っていると仮定して、先ほどのコードを　package.json の dependencies の下に追加する

さらに、その下の scripts の react-scripts test を

```
    "test": "jest",
```

jest に変更した

```
● Validation Error:

  Module ts-jest in the transform option was not found.
         <rootDir> is: /Users/kaede0902/testing
```

すると、transform　はないというエラーが出た。

これは　ts-jest をインストールすると解決した。

===

## 環境がおかしい jsdom を検討しろと、 document がないとのエラーが出たので　 コメント方式で上部に　js-dom の使用を明記

```
  ● App › renders App Text

    The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "jsdom" test environment.
    
```

しかし、テスト環境が違うので、jsdom のテスト環境を使えとでた。

https://jestjs.io/docs/configuration#testenvironment-string

そのリンクを見てみると

```
/**
 * @jest-environment jsdom
 */

test('use jsdom in this test file', () => {
  const element = document.createElement('div');
  expect(element).not.toBeNull();
});
```

> By adding a @jest-environment docblock at the top of the file, you can specify another environment to be used for all tests in that file:

`@jest-environment` をファイルのトップに追加しろと出てくる。

追加せずにテストファイルを書き換えてみる。

```
    ReferenceError: document is not defined
```

document が未定義と出てくる。

https://testing-library.com/docs/react-testing-library/setup/#jest-27

コメントの形で置くだけでも平気らしいので置いてみる

```
/**
 * @jest-environment jsdom
 */
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';
```

これを上部に置くと 

```
 PASS  src/App.test.tsx
  App
    ✓ use jsdom in this test file (1 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.459 s, estimated 2 s
```

ようやくテストを通すことができた。

===

## まとめ

CRA --ts で作成しただけでは、うまく jsx ファイルが変換されないので
testing-library を動かすことができない。

@babel/preset-react
ts-jest

のライブラリを新たに追加し

test コマンドで jest を動かす設定にし

jest コマンドで js,jsx,ts,tsx, を ts-jest で動かす設定にして

jest-environment jsdom のコメントをテストファイルの頭に使うことで

testing-library が有効化されるようになる。

----

## 今後やること

全てのテストファイルのトップに

```
/**
 * @jest-environment jsdom
 */
```

これを書くのは冗長なので

jest.config.js か　package.json に書いて jsdom 環境が適用できる方法を見つける。