FE自動テスト エラー問題

[tsuchiyama-araya]

概要 フロントエンドのテストを作成しましたが、 エラーに詰まずくところがあるため、こちらのIssueで記載して、解決に導きたいです。

重要度 この機能の重要度を[低、中、高]に分ける。 低: この機能は開発要件の最低条件に含まれていない。

ブランチ名 feature/test/Layout

ライブラリ

• jest

関連するIssue

263

[tsuchiyama-araya]

現状発生している問題

再現方法 フロントエンドディレクトリーに移動 cd frontend 必要なパッケージをインストール yarn install テスト実行 yarn test src/components/Layout/test/Header.test.tsx

エラー文： yarn test src/components/Layout/test/Header.test.tsx FAIL src/components/Layout/test/Header.test.tsx ● Test suite failed to run

ReferenceError: /Users/keita/Code/barebone-studio/frontend/src/components/Layout/__test__/Header.test.tsx: The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.
Invalid variable access: jest
Allowed objects: AbortController, AbortSignal, AggregateError, Array, ArrayBuffer, Atomics, BigInt, BigInt64Array, BigUint64Array, Blob, Boolean, BroadcastChannel, Buffer, ByteLengthQueuingStrategy, CompressionStream, CountQueuingStrategy, Crypto, CryptoKey, CustomEvent, DOMException, DataView, Date, DecompressionStream, Error, EvalError, Event, EventTarget, File, FinalizationRegistry, Float32Array, Float64Array, FormData, Function, Generator, GeneratorFunction, Headers, Infinity, Int16Array, Int32Array, Int8Array, InternalError, Intl, JSON, Map, Math, MessageChannel, MessageEvent, MessagePort, NaN, Number, Object, Performance, PerformanceEntry, PerformanceMark, PerformanceMeasure, PerformanceObserver, PerformanceObserverEntryList, PerformanceResourceTiming, Promise, Proxy, RangeError, ReadableByteStreamController, ReadableStream, ReadableStreamBYOBReader, ReadableStreamBYOBRequest, ReadableStreamDefaultController, ReadableStreamDefaultReader, ReferenceError, Reflect, RegExp, Request, Response, Set, SharedArrayBuffer, String, SubtleCrypto, Symbol, SyntaxError, TextDecoder, TextDecoderStream, TextEncoder, TextEncoderStream, TransformStream, TransformStreamDefaultController, TypeError, URIError, URL, URLSearchParams, Uint16Array, Uint32Array, Uint8Array, Uint8ClampedArray, WeakMap, WeakRef, WeakSet, WebAssembly, WritableStream, WritableStreamDefaultController, WritableStreamDefaultWriter, __dirname, __filename, arguments, atob, btoa, clearImmediate, clearInterval, clearTimeout, console, crypto, decodeURI, decodeURIComponent, encodeURI, encodeURIComponent, escape, eval, expect, exports, fetch, global, globalThis, isFinite, isNaN, jest, module, parseFloat, parseInt, performance, process, queueMicrotask, require, setImmediate, setInterval, setTimeout, structuredClone, undefined, unescape.
Note: This is a precaution to guard against uninitialized mock variables. If it is ensured that the mock is required lazily, variable names prefixed with `mock` (case insensitive) are permitted.

[tsuchiyama-araya]

解決することができないので、 テスト方法を変更したいと思います。

[itutu-tienday]

確認している情報を追記

まず基本的仕様は以下

• https://jestjs.io/docs/es6-class-mocks#calling-jestmock-with-the-module-factory-parameter

上記を踏まえ、以下の情報を確認

• https://stackoverflow.com/questions/67101502/how-to-mock-axios-with-jest

  Remove the @jest/globals import. Can't see any reason to have it there as jest is always in scope when running tests

上記を参考に、Header.test.tsx 内の以下のコードを削除することで、上で記載のあるエラーはクリアされていることを確認

import { describe, test, expect, jest } from "@jest/globals"

→ とりあえず describe("Header", までは処理が通っている？

[tsuchiyama-araya]

Header .test .tsx 内のコードを削除してみたところ、 テストは動作していますが、何かが落ちています。 そのため、Jestのスコープ問題は解決したと考えています。

しかし、以下のようにESLintで警告が出るため、コードが複雑になる可能性が高いです。

[itutu-tienday]

詳細は確認前ですが、以下のような情報も検索されます。 今少し、情報収集・検証いただくとよさそうです。

https://japanese-document.github.io/tips/2023/javascript-jest-is-not-defined.html https://stackoverflow.com/questions/65190123/referenceerror-jest-is-not-defined-when-running-unit-test

コードが複雑になる可能性が高いです。

複雑化は最大限回避する方向性が、適切であると考えます

[tsuchiyama-araya]

【追加情報】

What to Test In general, your tests should cover the following aspects of your code:

1. If a component renders with or without props
2. How a component renders with state changes
3. How a component reacts to user interactions

What Not to Test Testing most of your code is important, but here are some things you do not need to test:

1. Actual Implementation: You do not need to test the actual implementation of a functionality. Just test if the component is behaving correctly. Let’s say you want to sort an array on the click of a button. There’s no need to test the actual sorting logic. You only test if the function was called and if the state changes are rendering correctly.
2. Third Party libraries: If you are using any third party libraries like Material UI, no need to test those – they should already be tried and tested.

[tsuchiyama-araya]

自動テストが必要が必要ないものがあるので、 コンポーネントを１つずつみて、テストが必要かを確認します。 そして、リストなどを作りたいと考えています。