質問編集履歴
5
該当のソースコードを補足
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -77,10 +77,11 @@
|
|
|
77
77
|
export const SelectFile: React.FC<Props> = () => {
|
|
78
78
|
const rootEl = useRef<HTMLDivElement>(null);
|
|
79
79
|
|
|
80
|
-
const addFunc = () => { ...省略} // 新たに追加した関数をテストしたい
|
|
80
|
+
const addFunc = (files: File) => { ...省略} // 新たに追加した関数をテストしたい
|
|
81
81
|
|
|
82
82
|
const something = useCallback(
|
|
83
|
+
// ...省略
|
|
83
|
-
|
|
84
|
+
const foo = addFunc(files);
|
|
84
85
|
);
|
|
85
86
|
|
|
86
87
|
useEffect(() => {
|
4
該当のソースコードを補足
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -75,11 +75,24 @@
|
|
|
75
75
|
|
|
76
76
|
export type Props = {...省略}
|
|
77
77
|
export const SelectFile: React.FC<Props> = () => {
|
|
78
|
+
const rootEl = useRef<HTMLDivElement>(null);
|
|
79
|
+
|
|
78
80
|
const addFunc = () => { ...省略} // 新たに追加した関数をテストしたい
|
|
79
81
|
|
|
80
82
|
const something = useCallback(
|
|
81
83
|
addFunc();
|
|
82
84
|
);
|
|
85
|
+
|
|
86
|
+
useEffect(() => {
|
|
87
|
+
return () => {
|
|
88
|
+
if (rootEl.current) {
|
|
89
|
+
const { current } = rootEl;
|
|
90
|
+
current.removeEventListener("drop", onDrop);
|
|
91
|
+
// ...省略
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
});
|
|
95
|
+
|
|
83
96
|
// その他useSelector、useEffect、useCallbackなどの記述
|
|
84
97
|
|
|
85
98
|
return (
|
3
該当のソースコードを補足
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
テストコードは子コンポーネントだけをテストしようとしています。
|
|
20
20
|
enzymeの`shallow`も試しましたが同じエラーでテストが止まりました。
|
|
21
21
|
```typescript
|
|
22
|
+
//selectFile.spec.tsx
|
|
22
23
|
import * as React from "react";
|
|
23
24
|
import { useSelector, useDispatch } from 'react-redux'
|
|
24
25
|
import { SelectFile } from "./selectFile";
|
|
@@ -64,7 +65,7 @@
|
|
|
64
65
|
);
|
|
65
66
|
```
|
|
66
67
|
```React
|
|
67
|
-
// テストしたいコンポーネント(一部抜粋)
|
|
68
|
+
// SelectFile.tsx テストしたいコンポーネント(一部抜粋)
|
|
68
69
|
import styled from "styled-components";
|
|
69
70
|
import ...省略
|
|
70
71
|
|
2
該当のソースコードを補足
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -20,21 +20,77 @@
|
|
|
20
20
|
enzymeの`shallow`も試しましたが同じエラーでテストが止まりました。
|
|
21
21
|
```typescript
|
|
22
22
|
import * as React from "react";
|
|
23
|
+
import { useSelector, useDispatch } from 'react-redux'
|
|
23
24
|
import { SelectFile } from "./selectFile";
|
|
24
|
-
import EnzymeToJson from "enzyme-to-json";
|
|
25
25
|
import { configure, mount } from "enzyme";
|
|
26
26
|
import * as Adapter from "enzyme-adapter-react-16";
|
|
27
|
+
import EnzymeToJson from "enzyme-to-json";
|
|
27
28
|
|
|
28
29
|
configure({ adapter: new Adapter() });
|
|
29
30
|
|
|
31
|
+
// useSelector,useDispatchのエラーが出たのでmock を追加
|
|
32
|
+
jest.mock('src/selectors')
|
|
33
|
+
jest.mock('react-redux')
|
|
34
|
+
const useSelectorMock = useSelector as jest.Mock
|
|
35
|
+
const useDispatchMock = useDispatch as jest.Mock
|
|
30
36
|
const dummyProps = {
|
|
31
37
|
select: "basic",
|
|
32
38
|
};
|
|
39
|
+
describe("dicom-uploader.ts", () => {
|
|
40
|
+
beforeEach(() => {
|
|
41
|
+
useSelectorMock.mockReturnValue(10)
|
|
42
|
+
useDispatchMock.mockReturnValue(jest.fn())
|
|
43
|
+
})
|
|
44
|
+
afterEach(() => {
|
|
45
|
+
jest.resetAllMocks();
|
|
46
|
+
})
|
|
33
|
-
it("should render default SelectFile", () => {
|
|
47
|
+
it("should render default SelectFile", () => {
|
|
34
|
-
|
|
48
|
+
const mounted = mount(<SelectFile {...dummyProps} />);
|
|
35
|
-
// ↑でテストが止まります
|
|
49
|
+
// ↑でテストが止まります
|
|
36
50
|
```
|
|
51
|
+
コンポーネント(エラーなく動作している）
|
|
52
|
+
```React
|
|
53
|
+
// 親コンポーネント(一部抜粋)
|
|
54
|
+
return (
|
|
55
|
+
<Root>
|
|
56
|
+
{(() => {
|
|
57
|
+
switch(...){
|
|
58
|
+
return <SelectFile /> // 今回テストしたいコンポーネント
|
|
59
|
+
default:
|
|
60
|
+
return <Foo />
|
|
61
|
+
}
|
|
62
|
+
})()}
|
|
63
|
+
</Root>
|
|
64
|
+
);
|
|
65
|
+
```
|
|
66
|
+
```React
|
|
67
|
+
// テストしたいコンポーネント(一部抜粋)
|
|
68
|
+
import styled from "styled-components";
|
|
69
|
+
import ...省略
|
|
37
70
|
|
|
71
|
+
const Wrapper = styled.div`
|
|
72
|
+
...省略(cssプロパティ)
|
|
73
|
+
`;
|
|
74
|
+
|
|
75
|
+
export type Props = {...省略}
|
|
76
|
+
export const SelectFile: React.FC<Props> = () => {
|
|
77
|
+
const addFunc = () => { ...省略} // 新たに追加した関数をテストしたい
|
|
78
|
+
|
|
79
|
+
const something = useCallback(
|
|
80
|
+
addFunc();
|
|
81
|
+
);
|
|
82
|
+
// その他useSelector、useEffect、useCallbackなどの記述
|
|
83
|
+
|
|
84
|
+
return (
|
|
85
|
+
<Wrapper ref={rootEl}> <!-- テストではここでエラーとなっている -->
|
|
86
|
+
<!-- HTML要素、コンポーネントなど -->
|
|
87
|
+
</Wrapper>
|
|
88
|
+
);
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
export default DicomUploader;
|
|
92
|
+
```
|
|
93
|
+
|
|
38
94
|
### 試したこと
|
|
39
95
|
Reactの何かが読み込めていないため`createElement`がないというエラーになっていると考えました。
|
|
40
96
|
既存の構造の都合で子コンポーネントでは`src`以外の場所からもファイルをimportしているため、パスの問題もあるかと思い、
|
1
説明について文言修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
### 前提
|
|
2
|
-
React初心者です。
|
|
2
|
+
React・テストコード初心者です。
|
|
3
3
|
親子関係のあるコンポーネントの中の
|
|
4
|
-
子コンポーネント内の静的メソッドのテストコードを作成しようとしています。
|
|
4
|
+
子コンポーネント内の静的メソッドのテストコードを作成しようとしています。
|
|
5
5
|
（jestとenzymeを使用）
|
|
6
6
|
子コンポーネントのマウントの記述でTypeError:となり、stackoverflowなどで検索をしてみたのですが、エラーが解消できませんでした。
|
|
7
7
|
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
|
|
38
38
|
### 試したこと
|
|
39
39
|
Reactの何かが読み込めていないため`createElement`がないというエラーになっていると考えました。
|
|
40
|
-
既存の構造の都合で`src`以外の場所からもimportしているため、パスの問題もあるかと思い、
|
|
40
|
+
既存の構造の都合で子コンポーネントでは`src`以外の場所からもファイルをimportしているため、パスの問題もあるかと思い、
|
|
41
|
-
jest.config.jsでモジュールのパス設定を変更してみました
|
|
41
|
+
jest.config.jsでモジュールのパス設定を変更してみました。しかし、エラーは解消されませんでした。
|
|
42
42
|
```diff
|
|
43
43
|
moduleNameMapper: {
|
|
44
44
|
"^.+\.svg$": "<rootDir>/mocks/icon-mock.tsx",
|
|
@@ -54,5 +54,6 @@
|
|
|
54
54
|
"react": "16.13.1",
|
|
55
55
|
"jest": "26.1.0",
|
|
56
56
|
"enzyme": "3.11.0",
|
|
57
|
+
```
|
|
57
58
|
リポジトリ内ではreducerやstoreのテストコードは存在していて、テストはパスしています。
|
|
58
59
|
スナップショットも動作しています。
|