https://zenn.dev/panyoriokome/scraps/78aecf55ba5a38

p.png

セットアップ

2020年師走における Next.js をベースとしたフロントエンドの環境構築の記事を元にセットアップを行う。

稼働確認（詰まったところ）

以下のコードを実行したところerror TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.というエラーが出た。

src/tests/Home.test.tsx

import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import Home from '../pages/index'

it('Should render hello text', () => {
  render(<Home />)
  expect(screen.getByText('Hello')).toBeInTheDocument()
})

テスト対象のComponentは以下

src/pages/index.js

const Home: React.FC = () => {
  return (
    <div>
      Hello
    </div>
  )
}
export default Home

原因

Reactのimport(import React from 'react')が行われていないため。 Reactのimportをコードに追加したら解決した。

ただし、yarn devでNext.jsを起動した時には正常に表示ができているのでこの機会に根本原因を調べてみた

Reactの仕組み

React公式ブログのIntroducing the New JSX Transformに記載してある通り、React17から