teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問コンポーネントテストでエラー"TypeError: Cannot read property 'createElement' of undefined"の原因がわからない

編集履歴

質問編集履歴

5

該当のソースコードを補足

2021/08/06 07:50

投稿

_take
_take

スコア1

test CHANGED
File without changes
test CHANGED
@@ -156,13 +156,15 @@
156
156
 
157
157
 
158
158
 
159
- const addFunc = () => { ...省略} // 新たに追加した関数をテストしたい
159
+ const addFunc = (files: File) => { ...省略} // 新たに追加した関数をテストしたい
160
160
 
161
161
 
162
162
 
163
163
  const something = useCallback(
164
164
 
165
+ // ...省略
166
+
165
- addFunc();
167
+ const foo = addFunc(files);
166
168
 
167
169
  );
168
170
 

4

該当のソースコードを補足

2021/08/06 07:50

投稿

_take
_take

スコア1

test CHANGED
File without changes
test CHANGED
@@ -152,6 +152,10 @@
152
152
 
153
153
  export const SelectFile: React.FC<Props> = () => {
154
154
 
155
+ const rootEl = useRef<HTMLDivElement>(null);
156
+
157
+
158
+
155
159
  const addFunc = () => { ...省略} // 新たに追加した関数をテストしたい
156
160
 
157
161
 
@@ -162,6 +166,28 @@
162
166
 
163
167
  );
164
168
 
169
+
170
+
171
+ useEffect(() => {
172
+
173
+ return () => {
174
+
175
+ if (rootEl.current) {
176
+
177
+ const { current } = rootEl;
178
+
179
+ current.removeEventListener("drop", onDrop);
180
+
181
+ // ...省略
182
+
183
+ }
184
+
185
+ };
186
+
187
+ });
188
+
189
+
190
+
165
191
  //　その他useSelector、useEffect、useCallbackなどの記述
166
192
 
167
193
 

3

該当のソースコードを補足

2021/08/06 07:44

投稿

_take
_take

スコア1

test CHANGED
File without changes
test CHANGED
@@ -40,6 +40,8 @@
40
40
 
41
41
  ```typescript
42
42
 
43
+ //selectFile.spec.tsx
44
+
43
45
  import * as React from "react";
44
46
 
45
47
  import { useSelector, useDispatch } from 'react-redux'
@@ -130,7 +132,7 @@
130
132
 
131
133
  ```React
132
134
 
133
- // テストしたいコンポーネント(一部抜粋)
135
+ // SelectFile.tsx テストしたいコンポーネント(一部抜粋)
134
136
 
135
137
  import styled from "styled-components";
136
138
 

2

該当のソースコードを補足

2021/08/06 07:38

投稿

_take
_take

スコア1

test CHANGED
File without changes
test CHANGED
@@ -42,31 +42,143 @@
42
42
 
43
43
  import * as React from "react";
44
44
 
45
+ import { useSelector, useDispatch } from 'react-redux'
46
+
45
47
  import { SelectFile } from "./selectFile";
46
48
 
49
+ import { configure, mount } from "enzyme";
50
+
51
+ import * as Adapter from "enzyme-adapter-react-16";
52
+
47
53
  import EnzymeToJson from "enzyme-to-json";
48
54
 
49
- import { configure, mount } from "enzyme";
50
-
51
- import * as Adapter from "enzyme-adapter-react-16";
52
-
53
55
 
54
56
 
55
57
  configure({ adapter: new Adapter() });
56
58
 
57
59
 
58
60
 
61
+ // useSelector,useDispatchのエラーが出たのでmock を追加
62
+
63
+ jest.mock('src/selectors')
64
+
65
+ jest.mock('react-redux')
66
+
67
+ const useSelectorMock = useSelector as jest.Mock
68
+
69
+ const useDispatchMock = useDispatch as jest.Mock
70
+
59
71
  const dummyProps = {
60
72
 
61
73
  select: "basic",
62
74
 
63
75
  };
64
76
 
77
+ describe("dicom-uploader.ts", () => {
78
+
79
+ beforeEach(() => {
80
+
81
+ useSelectorMock.mockReturnValue(10)
82
+
83
+ useDispatchMock.mockReturnValue(jest.fn())
84
+
85
+ })
86
+
87
+ afterEach(() => {
88
+
89
+ jest.resetAllMocks();
90
+
91
+ })
92
+
65
- it("should render default SelectFile", () => {
93
+ it("should render default SelectFile", () => {
66
-
94
+
67
- const mounted = mount(<SelectFile {...dummyProps} />);
95
+ const mounted = mount(<SelectFile {...dummyProps} />);
68
-
96
+
69
- // ↑でテストが止まります
97
+ // ↑でテストが止まります
98
+
99
+ ```
100
+
101
+ コンポーネント(エラーなく動作している）
102
+
103
+ ```React
104
+
105
+ // 親コンポーネント(一部抜粋)
106
+
107
+ return (
108
+
109
+ <Root>
110
+
111
+ {(() => {
112
+
113
+ switch(...){
114
+
115
+ return <SelectFile />　　// 今回テストしたいコンポーネント
116
+
117
+ default:
118
+
119
+ return <Foo />
120
+
121
+ }
122
+
123
+ })()}
124
+
125
+ </Root>
126
+
127
+ );
128
+
129
+ ```
130
+
131
+ ```React
132
+
133
+ // テストしたいコンポーネント(一部抜粋)
134
+
135
+ import styled from "styled-components";
136
+
137
+ import ...省略
138
+
139
+
140
+
141
+ const Wrapper = styled.div`
142
+
143
+ ...省略(cssプロパティ)
144
+
145
+ `;
146
+
147
+
148
+
149
+ export type Props = {...省略}
150
+
151
+ export const SelectFile: React.FC<Props> = () => {
152
+
153
+ const addFunc = () => { ...省略} // 新たに追加した関数をテストしたい
154
+
155
+
156
+
157
+ const something = useCallback(
158
+
159
+ addFunc();
160
+
161
+ );
162
+
163
+ //　その他useSelector、useEffect、useCallbackなどの記述
164
+
165
+
166
+
167
+ return (
168
+
169
+ <Wrapper ref={rootEl}>　<!-- テストではここでエラーとなっている -->
170
+
171
+ <!-- HTML要素、コンポーネントなど -->
172
+
173
+ </Wrapper>
174
+
175
+ );
176
+
177
+ };
178
+
179
+
180
+
181
+ export default DicomUploader;
70
182
 
71
183
  ```
72
184
 

1

説明について文言修正

2021/08/06 07:34

投稿

_take
_take

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,10 +1,10 @@
1
1
  ### 前提
2
2
 
3
- React初心者です。
3
+ React・テストコード初心者です。
4
4
 
5
5
  親子関係のあるコンポーネントの中の
6
6
 
7
- 子コンポーネント内の静的メソッドのテストコードを作成しようとしています。（テストコードも初心者です）
7
+ 子コンポーネント内の静的メソッドのテストコードを作成しようとしています。
8
8
 
9
9
  （jestとenzymeを使用）
10
10
 
@@ -76,9 +76,9 @@
76
76
 
77
77
  Reactの何かが読み込めていないため`createElement`がないというエラーになっていると考えました。
78
78
 
79
- 既存の構造の都合で`src`以外の場所からもimportしているため、パスの問題もあるかと思い、
79
+ 既存の構造の都合で子コンポーネントでは`src`以外の場所からもファイルをimportしているため、パスの問題もあるかと思い、
80
80
 
81
- jest.config.jsでモジュールのパス設定を変更してみましたが、エラーは解消されませんでした。
81
+ jest.config.jsでモジュールのパス設定を変更してみました。しかし、エラーは解消されませんでした。
82
82
 
83
83
  ```diff
84
84
 
@@ -110,6 +110,8 @@
110
110
 
111
111
  "enzyme": "3.11.0",
112
112
 
113
+ ```
114
+
113
115
  リポジトリ内ではreducerやstoreのテストコードは存在していて、テストはパスしています。
114
116
 
115
117
  スナップショットも動作しています。