Skip to content

Commit c91cca6

Browse files
sungik-choisungik-choi
committed
test: react state가 변하는 focus 메서드를 act 메서드로 wrapping
1 parent f41c510 commit c91cca6

File tree

2 files changed

+64
-21
lines changed

2 files changed

+64
-21
lines changed

‎src/components/Forms/Inputs/TextArea/TextArea.test.tsx

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/* External dependencies */
2+
import { act } from '@testing-library/react'
23
import { fireEvent } from '@testing-library/dom'
34
import React from 'react'
45

@@ -68,7 +69,9 @@ describe('TextArea 테스트 >', () => {
6869
const { getByTestId } = renderComponent({ onFocus })
6970
const rendered = getByTestId(TEXT_AREA_TEST_ID)
7071
const textareaElement = rendered.getElementsByTagName('textarea')[0]
71-
textareaElement.focus()
72+
act(() => {
73+
textareaElement.focus()
74+
})
7275

7376
jest.advanceTimersByTime(1000)
7477
// eslint-disable-next-line max-len
@@ -91,7 +94,9 @@ describe('TextArea 테스트 >', () => {
9194
const { getByTestId } = renderComponent({ onFocus, readOnly: true })
9295
const rendered = getByTestId(TEXT_AREA_TEST_ID)
9396
const textareaElement = rendered.getElementsByTagName('textarea')[0]
94-
textareaElement.focus()
97+
act(() => {
98+
textareaElement.focus()
99+
})
95100

96101
expect(onFocus).not.toBeCalled()
97102
})
@@ -101,7 +106,9 @@ describe('TextArea 테스트 >', () => {
101106
const { getByTestId } = renderComponent({ onFocus, disabled: true })
102107
const rendered = getByTestId(TEXT_AREA_TEST_ID)
103108
const textareaElement = rendered.getElementsByTagName('textarea')[0]
104-
textareaElement.focus()
109+
act(() => {
110+
textareaElement.focus()
111+
})
105112

106113
expect(onFocus).not.toBeCalled()
107114
})
@@ -111,7 +118,9 @@ describe('TextArea 테스트 >', () => {
111118
const { getByTestId } = renderComponent({ onFocus, disabled: true, readOnly: true })
112119
const rendered = getByTestId(TEXT_AREA_TEST_ID)
113120
const textareaElement = rendered.getElementsByTagName('textarea')[0]
114-
textareaElement.focus()
121+
act(() => {
122+
textareaElement.focus()
123+
})
115124

116125
expect(onFocus).not.toBeCalled()
117126
})
@@ -121,7 +130,9 @@ describe('TextArea 테스트 >', () => {
121130
const { getByTestId } = renderComponent({ onFocus })
122131
const rendered = getByTestId(TEXT_AREA_TEST_ID)
123132
const textareaElement = rendered.getElementsByTagName('textarea')[0]
124-
textareaElement.focus()
133+
act(() => {
134+
textareaElement.focus()
135+
})
125136

126137
expect(onFocus).toBeCalled()
127138
})
@@ -134,7 +145,10 @@ describe('TextArea 테스트 >', () => {
134145
const rendered = getByTestId(TEXT_AREA_TEST_ID)
135146
const textareaElement = rendered.getElementsByTagName('textarea')[0]
136147

137-
fireEvent.change(textareaElement, { target: { value: 'test' } })
148+
act(() => {
149+
fireEvent.change(textareaElement, { target: { value: 'test' } })
150+
})
151+
138152
expect(onChange).toBeCalled()
139153
})
140154
})
@@ -145,8 +159,10 @@ describe('TextArea 테스트 >', () => {
145159
const { getByTestId } = renderComponent({ onBlur })
146160
const rendered = getByTestId(TEXT_AREA_TEST_ID)
147161
const textareaElement = rendered.getElementsByTagName('textarea')[0]
148-
textareaElement.focus()
149-
textareaElement.blur()
162+
act(() => {
163+
textareaElement.focus()
164+
textareaElement.blur()
165+
})
150166
expect(onBlur).toBeCalled()
151167
})
152168
})

‎src/components/Forms/Inputs/TextField/TextField.test.tsx

Lines changed: 40 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/* External dependencies */
22
import React from 'react'
3+
import { act } from '@testing-library/react'
34
import { fireEvent } from '@testing-library/dom'
45

56
/* Internal dependencies */
@@ -107,7 +108,9 @@ describe('TextField', () => {
107108
it('should have focused style when "input" focused', () => {
108109
const { getByTestId } = renderComponent()
109110
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
110-
rendered.getElementsByTagName('input')[0].focus()
111+
act(() => {
112+
rendered.getElementsByTagName('input')[0].focus()
113+
})
111114
expect(rendered).toHaveStyle(`background-color: ${LightFoundation.theme['bg-white-normal']}`)
112115
// eslint-disable-next-line max-len
113116
expect(rendered).toHaveStyle(`box-shadow: 0 0 0 3px ${LightFoundation.theme['bgtxt-blue-light']}, inset 0 0 0 1px ${LightFoundation.theme['bgtxt-blue-normal']}`)
@@ -119,7 +122,9 @@ describe('TextField', () => {
119122
const { getByTestId } = renderComponent({ onFocus })
120123
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
121124
const input = rendered.getElementsByTagName('input')[0]
122-
input.focus()
125+
act(() => {
126+
input.focus()
127+
})
123128
expect(onFocus).toBeCalled()
124129
})
125130

@@ -128,7 +133,9 @@ describe('TextField', () => {
128133
const { getByTestId } = renderComponent({ onChange })
129134
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
130135
const input = rendered.getElementsByTagName('input')[0]
131-
fireEvent.change(input, { target: { value: 'test' } })
136+
act(() => {
137+
fireEvent.change(input, { target: { value: 'test' } })
138+
})
132139
expect(onChange).toBeCalled()
133140
})
134141

@@ -137,7 +144,9 @@ describe('TextField', () => {
137144
const { getByTestId } = renderComponent({ onKeyDown })
138145
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
139146
const input = rendered.getElementsByTagName('input')[0]
140-
fireEvent.keyDown(input, { key: 'A', code: 'KeyA' })
147+
act(() => {
148+
fireEvent.keyDown(input, { key: 'A', code: 'KeyA' })
149+
})
141150
expect(onKeyDown).toBeCalled()
142151
})
143152

@@ -146,7 +155,9 @@ describe('TextField', () => {
146155
const { getByTestId } = renderComponent({ onKeyUp })
147156
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
148157
const input = rendered.getElementsByTagName('input')[0]
149-
fireEvent.keyUp(input, { key: 'A', code: 'KeyA' })
158+
act(() => {
159+
fireEvent.keyUp(input, { key: 'A', code: 'KeyA' })
160+
})
150161
expect(onKeyUp).toBeCalled()
151162
})
152163
})
@@ -157,7 +168,9 @@ describe('TextField', () => {
157168
const { getByTestId } = renderComponent({ onFocus, disabled: true })
158169
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
159170
const input = rendered.getElementsByTagName('input')[0]
160-
input.focus()
171+
act(() => {
172+
input.focus()
173+
})
161174
expect(onFocus).not.toBeCalled()
162175
})
163176

@@ -166,7 +179,9 @@ describe('TextField', () => {
166179
const { getByTestId } = renderComponent({ onFocus, readOnly: true })
167180
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
168181
const input = rendered.getElementsByTagName('input')[0]
169-
input.focus()
182+
act(() => {
183+
input.focus()
184+
})
170185
expect(onFocus).not.toBeCalled()
171186
})
172187

@@ -175,7 +190,9 @@ describe('TextField', () => {
175190
const { getByTestId } = renderComponent({ onChange, disabled: true })
176191
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
177192
const input = rendered.getElementsByTagName('input')[0]
178-
fireEvent.change(input, { target: { value: 'test' } })
193+
act(() => {
194+
fireEvent.change(input, { target: { value: 'test' } })
195+
})
179196
expect(onChange).not.toBeCalled()
180197
})
181198

@@ -184,7 +201,9 @@ describe('TextField', () => {
184201
const { getByTestId } = renderComponent({ onChange, readOnly: true })
185202
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
186203
const input = rendered.getElementsByTagName('input')[0]
187-
fireEvent.change(input, { target: { value: 'test' } })
204+
act(() => {
205+
fireEvent.change(input, { target: { value: 'test' } })
206+
})
188207
expect(onChange).not.toBeCalled()
189208
})
190209

@@ -193,7 +212,9 @@ describe('TextField', () => {
193212
const { getByTestId } = renderComponent({ onKeyDown, disabled: true })
194213
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
195214
const input = rendered.getElementsByTagName('input')[0]
196-
fireEvent.keyDown(input, { key: 'A', code: 'KeyA' })
215+
act(() => {
216+
fireEvent.keyDown(input, { key: 'A', code: 'KeyA' })
217+
})
197218
expect(onKeyDown).not.toBeCalled()
198219
})
199220

@@ -202,7 +223,9 @@ describe('TextField', () => {
202223
const { getByTestId } = renderComponent({ onKeyDown, readOnly: true })
203224
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
204225
const input = rendered.getElementsByTagName('input')[0]
205-
fireEvent.keyDown(input, { key: 'A', code: 'KeyA' })
226+
act(() => {
227+
fireEvent.keyDown(input, { key: 'A', code: 'KeyA' })
228+
})
206229
expect(onKeyDown).not.toBeCalled()
207230
})
208231

@@ -211,7 +234,9 @@ describe('TextField', () => {
211234
const { getByTestId } = renderComponent({ onKeyUp, disabled: true })
212235
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
213236
const input = rendered.getElementsByTagName('input')[0]
214-
fireEvent.keyUp(input, { key: 'A', code: 'KeyA' })
237+
act(() => {
238+
fireEvent.keyUp(input, { key: 'A', code: 'KeyA' })
239+
})
215240
expect(onKeyUp).not.toBeCalled()
216241
})
217242

@@ -220,7 +245,9 @@ describe('TextField', () => {
220245
const { getByTestId } = renderComponent({ onKeyUp, readOnly: true })
221246
const rendered = getByTestId(TEXT_INPUT_TEST_ID)
222247
const input = rendered.getElementsByTagName('input')[0]
223-
fireEvent.keyUp(input, { key: 'A', code: 'KeyA' })
248+
act(() => {
249+
fireEvent.keyUp(input, { key: 'A', code: 'KeyA' })
250+
})
224251
expect(onKeyUp).not.toBeCalled()
225252
})
226253
})

0 commit comments

Comments
 (0)