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
"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 環境が適用できる方法を見つける。
Top comments (0)