質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Jest

Jestは、JavaScriptのテストフレームワークです。設定が不要で、高速且つ安全にテストを開始できます。コードカバレッジを生成できる他、テストスコープ外のオブジェクトを容易にモック化できるなど、豊富な機能によりテストの導入を簡単にします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

受付中

TypeScriptとJavaScriptを同時に利用しているプロジェクトでJestを使用することは可能か知りたい。可能ならばimportエラーを解決したい。

senseIY
senseIY

総合スコア261

Jest

Jestは、JavaScriptのテストフレームワークです。設定が不要で、高速且つ安全にテストを開始できます。コードカバレッジを生成できる他、テストスコープ外のオブジェクトを容易にモック化できるなど、豊富な機能によりテストの導入を簡単にします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0回答

0評価

1クリップ

142閲覧

投稿2022/08/17 03:35

編集2022/08/17 05:10

前提

TypeScriptとJavaScriptを同時に利用しているプロジェクトでJestを使用してテストを書きたいと考えています。しかし、以下のエラーが発生しています。

発生している問題・エラーメッセージ

js

$ docker-compose exec front yarn test yarn run v1.22.18 $ jest FAIL src/App.test.tsx Test suite failed to run Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax. Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration. By default "node_modules" folder is ignored by transformers. Here's what you can do: If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it. If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config. If you need a custom transformation specify a "transform" option in your config. If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option. You'll find more details and examples of these config options in the docs: https://jestjs.io/docs/configuration For information about custom transformations, see: https://jestjs.io/docs/code-transformation Details: /usr/src/app/src/components/atoms/wavesurfer/wavesurfer.jsx:1 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import WaveSurfer from "wavesurfer.js"; ^^^^^^ SyntaxError: Cannot use import statement outside a module 26 | import { LearningMaterial } from "../../interfaces/index" 27 | import { deleteLearningMaterials } from "../../apis/learning_material" > 28 | import { WSF_stock } from "../atoms/wavesurfer/wavesurfer" | ^ 29 | // import { Wavesurfer_react } from "../../components/atoms/wevesurfer/wavesurfer_react" 30 | import { AuthContext } from "../../App" 31 | import { Update } from "../pages/Update" at Runtime.createScriptFromCode (node_modules/jest-cli/node_modules/jest-runtime/build/index.js:1796:14) at Object.<anonymous> (src/components/organisms/LearningMaterialItem.tsx:28:1) Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 16.065 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.

試したことと自分の考察

こちらのサイト公式ドキュメントを参考にして以下のことを試しました。
1 インストールを行う

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

2 package.jsonの修正

json

{ // ... "scripts": { // ... "test": "jest" }, "jest": { "preset": "ts-jest" } }

3 テストを走らせる

 ここでエラーが発生しました。エラーから考察するに、どうやらimportを処理出来ていないようです。エラーが発生しているコンポーネントではwavesurfer.jsというライブラリーとプラグインを使用しているのですが、この部分がtypescriptだとエラーが起きてしまうので、javascriptで記述しています。ここでエラーが出ていますが、テストした時にのみエラーが発生しており、画面上では特に問題なく動いています。ここで自分は恐らくJestのts-jestを使用する場合は、言語をTypeScript(しないならJavaScript)に統一しないと仕様できないのではないかという結論に至りました。そのため、ts-jestを使用するのではなく、babelでその都度typescriptを翻訳すれば行けるのではないかと考えて、公式ドキュメントにある通りbabelを使用することにしました、
しかし、以下のエラーが発生してしまいました。

js

$ docker-compose exec front yarn test yarn run v1.22.18 $ jest FAIL src/App.test.tsx Test suite failed to run Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax. Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration. By default "node_modules" folder is ignored by transformers. Here's what you can do: If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it. If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config. If you need a custom transformation specify a "transform" option in your config. If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option. You'll find more details and examples of these config options in the docs: https://jestjs.io/docs/configuration For information about custom transformations, see: https://jestjs.io/docs/code-transformation Details: /usr/src/app/src/App.test.tsx:12 (0, _react2.render)(<_App.default />); ^ SyntaxError: Unexpected token '<' at Runtime.createScriptFromCode (node_modules/jest-cli/node_modules/jest-runtime/build/index.js:1796:14) Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 0.942 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.

ここでおかしな現象が発生しています。私のテストファイルは以下の通りなので、(<_App.default />);というコードは記載していないにも関わらずエラーが発生しています。

ts

import React from 'react'; import { render, screen } from '@testing-library/react'; import App from './App'; test('renders learn react link', () => { render(<App />); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); });

ここで詰まってしまいました。初心者なので的外れな考察をしているかもしれませんが、何かしらアドバイスがあればよろしくお願いいたします。必要なファイルがあれば追記いたします。

追記

javascriptファイルを読み込まない場合はテストをパスできます。

ts

docker-compose exec front yarn test yarn run v1.22.18 $ jest PASS src/App.test.tsx (8.573 s) ✓ renders learn react link (28 ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 9.377 s, estimated 10 s Ran all test suites. Done in 11.07s.

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Jest

Jestは、JavaScriptのテストフレームワークです。設定が不要で、高速且つ安全にテストを開始できます。コードカバレッジを生成できる他、テストスコープ外のオブジェクトを容易にモック化できるなど、豊富な機能によりテストの導入を簡単にします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。