コンポーネントテストでエラー"TypeError: Cannot read property 'createElement' of undefined"の原因がわからない

Question

前提

React・テストコード初心者です。
親子関係のあるコンポーネントの中の
子コンポーネント内の静的メソッドのテストコードを作成しようとしています。
（jestとenzymeを使用）
子コンポーネントのマウントの記述でTypeError:となり、stackoverflowなどで検索をしてみたのですが、エラーが解消できませんでした。

エラーメッセージ

 TypeError: Cannot read property 'createElement' of undefined

      317 | 
      318 |   return (
    > 319 |     <Wrapper ref={rootEl}>

該当のソースコード

テストコードは子コンポーネントだけをテストしようとしています。
enzymeのshallowも試しましたが同じエラーでテストが止まりました。

//selectFile.spec.tsx
import * as React from "react";
import { useSelector, useDispatch } from 'react-redux'
import { SelectFile } from "./selectFile";
import { configure, mount } from "enzyme";
import * as Adapter from "enzyme-adapter-react-16";
import EnzymeToJson from "enzyme-to-json";

configure({ adapter: new Adapter() });

// useSelector,useDispatchのエラーが出たのでmock を追加
jest.mock('src/selectors')
jest.mock('react-redux')
const useSelectorMock = useSelector as jest.Mock
const useDispatchMock = useDispatch as jest.Mock
const dummyProps = {
  select: "basic",
};
describe("dicom-uploader.ts", () => {
  beforeEach(() => {
    useSelectorMock.mockReturnValue(10)
    useDispatchMock.mockReturnValue(jest.fn())
  })
  afterEach(() => {
    jest.resetAllMocks();
  })
  it("should render default SelectFile", () => {
    const mounted = mount(<SelectFile {...dummyProps} />);
  // ↑でテストが止まります

コンポーネント(エラーなく動作している）

// 親コンポーネント(一部抜粋)
return (
    <Root>
    {(() => {
     switch(...){
       return <SelectFile />　　// 今回テストしたいコンポーネント
      default:
       return <Foo />
        }
     })()}
    </Root>
  );

// SelectFile.tsx テストしたいコンポーネント(一部抜粋)
import styled from "styled-components";
import ...省略

const Wrapper = styled.div`
...省略(cssプロパティ)
`;

export type Props = {...省略}
export const SelectFile: React.FC<Props> = () => {
  const rootEl = useRef<HTMLDivElement>(null);

  const addFunc  = (files: File) => { ...省略} // 新たに追加した関数をテストしたい

  const something = useCallback(
     // ...省略
   const foo = addFunc(files);
  );

  useEffect(() => {
    return () => {
      if (rootEl.current) {
        const { current } = rootEl;
        current.removeEventListener("drop", onDrop);
        // ...省略
      }
    };
  });

  //　その他useSelector、useEffect、useCallbackなどの記述

  return (
    <Wrapper ref={rootEl}>　<!-- テストではここでエラーとなっている -->
      <!-- HTML要素、コンポーネントなど -->
    </Wrapper>
  );
};

export default DicomUploader;

試したこと

Reactの何かが読み込めていないためcreateElementがないというエラーになっていると考えました。
既存の構造の都合で子コンポーネントではsrc以外の場所からもファイルをimportしているため、パスの問題もあるかと思い、
jest.config.jsでモジュールのパス設定を変更してみました。しかし、エラーは解消されませんでした。

moduleNameMapper: {
    "^.+\.svg$": "<rootDir>/mocks/icon-mock.tsx",
    "^.+\.(css|less|scss)$": "identity-obj-proxy",
+    "^src(.*)$": "<rootDir>/src$1",
  },
+ moduleDirectories: ["node_modules", "<rootDir>/node_modules", "."],

補足情報

パッケージのバージョン

// package.json
"react": "16.13.1",
"jest": "26.1.0",
"enzyme": "3.11.0",

リポジトリ内ではreducerやstoreのテストコードは存在していて、テストはパスしています。
スナップショットも動作しています。

Answer 1

マニュアルを読みましょう。関数コンポーネントの場合、refはそのままでは使えないとあります。
useRefで値を代入してください。

Ref と関数コンポーネント

Comments

[_take]

回答ありがとうございます。
理解がたりておらず恐縮です。
コンポーネントの中で<Wrapper ref={rootEl}>に対応する記述があります。
const rootEl = useRef<HTMLDivElement>(null);
(rootEl.currentでイベントリスナー追加などをしている）
この記述は「useRefで値を代入してください」とは異なっていることでしょうか。

[FKM]

それが通用するのはクラスコンポーネントの場合です。マニュアルには関数コンポーネントはそのままだと使用できないので、useRefを使用してくださいとありますよ。質問のプログラムにはuseRefの部分が見当たらないので、そう回答させていただきました。

[_take]

質問の情報が少なくて大変失礼しました。
ソースコードを補足しましたのでご覧いただければと思います。

子コンポーネントのソースコードは、
Ref と関数コンポーネント中の「DOM 要素またはクラスコンポーネントを参照している」例に該当するかと思われます。

[FKM]

よく見たらWrapperって子コンポーネントですね。そこに定義しているのがまずいのでは？
それだったら、Wrapperコンポーネント内の要素で定義したらどうでしょうか？

[_take]

ご提案ありがとうございます。
Wrapperコンポーネント内の要素にrefを定義してみました。
<Wrapper>でエラーがでています。
TypeError: Cannot read property 'createElement' of undefined
return (
> <Wrapper>
　 <div ref={rootEl}>

試しに<>で<Wrapper>をラップしたところ、<>でエラーがでています。

[FKM]

Wrapperタグはコンポーネント内だと不要なはずですよ。親コンポーネント内に子コンポーネントWrapperがあって、それを定義して、returnでその内容を返すので

[_take]

初心者の質問にお付き合いいただいて感謝しております。
Wrapperタグ=<Wrapper>で、<Wrapper>の記述を削除すればエラーが解消されるという認識であっていますか？
returnの内容をdivタグだけにしてテストしてみたのですが、エラーの内容は変わりませんでした。
TypeError: Cannot read property 'createElement' of undefined
return (
> <div></div>
);

また、単純な構造のコンポーネントを作成してテストしてみたのですが、
同じエラーが出ているので環境などの方で問題があるのかもしれないです。
（3年くらい前に運用されているサービスのコードです）
// コンポーネント
import React from 'react';
export const Test = () => { return (<div><h1>Test</h1></div>) };
export default Test;
// エラー
TypeError: Cannot read property 'createElement' of undefined
return (
> <div></div>

[FKM]

これが関係ありますかね？tsの仕様に対する問題も発生してそうです。
Componentも宣言が必要かもしれません。
・Qiita
https://qiita.com/pokotyan/items/8a973c7b5635fff994df
・Stack Overflow
https://stackoverflow.com/questions/39423054/react-jsx-file-giving-error-cannot-read-property-createelement-of-undefined
・GitHub
https://github.com/facebook/react/issues/10753

[FKM]

あと、念の為確認ですが省略しているimportの部分にuseRefは書かれてますでしょうか。
tsじゃなくてjsの環境なら自分の方はそれでうまくいったので。

[_take]

ご対応ありがとうございます。
・省略しているimportの部分にuseRefが書かれているか→記述されているのを確認しました。
・Qiita、Stack Overflow、GitHub→importに関しては同じ記述になっていることを確認しました。

おそらくですが下記の記事が当てはまる可能性がでてきました。

【テストしやすいRedux】<Provider>を切り出す
https://qiita.com/impl_s/items/dd723a1707a5a07645d9
“<Provider>でラップされていない状態でコンポーネントがマウントするので、そのコンポーネント内でStoreの情報を使用していると当然テストは落ちてしまいます。”

そもそものapp.tsxでProviderが使われていました。(ダイアログ表示など）

export function App() {
return (
<ConnectedRouter history={history}>
<FooProvider>
<DialogProvider>
{Routes}
<GlobalStyle />
</DialogProvider>
</FooProvider>
</ConnectedRouter>
);
}

子コンポーネントで省略しているimportにダイアログ表示がありました。
importした内容をmockすることでエラーが回避できそうな気がします。（といってもmockの方法の調査からスタートです）

[_take]

https://github.com/facebook/react/issues/10753の下から2番目のコメントにある、
tsconfig.jsonの設定を追加することで解消しました。
ありがとうございました！