This content originally appeared on DEV Community and was authored by DEV Community
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 環境が適用できる方法を見つける。
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2022-02-27T13:39:29+00:00) React testing-library で jsx が無効になっているエラーを @babel/preset-react の追加と jest-environment の指定で解決した. Retrieved from https://www.scien.cx/2022/02/27/react-testing-library-%e3%81%a7-jsx-%e3%81%8c%e7%84%a1%e5%8a%b9%e3%81%ab%e3%81%aa%e3%81%a3%e3%81%a6%e3%81%84%e3%82%8b%e3%82%a8%e3%83%a9%e3%83%bc%e3%82%92-babel-preset-react-%e3%81%ae%e8%bf%bd/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.