DEV Community

kaede
kaede

Posted on

React testing-library で jsx が無効になっているエラーを @babel/preset-react の追加と jest-environment の指定で解決した

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

エラー内容

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

npx create-react-app ts-jest --template typescript
Enter fullscreen mode Exit fullscreen mode

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 |   });
Enter fullscreen mode Exit fullscreen mode

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

===

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

https://stackoverflow.com/a/66360017

  "dependencies": {
    "@babel/preset-react": "^7.16.7",
Enter fullscreen mode Exit fullscreen mode

babel/preset-react を追加する

さらに package.json に

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

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

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

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

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

    "test": "jest",
Enter fullscreen mode Exit fullscreen mode

jest に変更した

● Validation Error:

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

すると、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.

Enter fullscreen mode Exit fullscreen mode

しかし、テスト環境が違うので、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();
});
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

これを上部に置くと

 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
Enter fullscreen mode Exit fullscreen mode

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

===

まとめ

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
 */
Enter fullscreen mode Exit fullscreen mode

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

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

Top comments (0)