diff --git a/src/components/Forms/Inputs/TextArea/TextArea.test.tsx b/src/components/Forms/Inputs/TextArea/TextArea.test.tsx index 37393919be..8f82987d13 100644 --- a/src/components/Forms/Inputs/TextArea/TextArea.test.tsx +++ b/src/components/Forms/Inputs/TextArea/TextArea.test.tsx @@ -1,4 +1,5 @@ /* External dependencies */ +import { act } from '@testing-library/react' import { fireEvent } from '@testing-library/dom' import React from 'react' @@ -68,7 +69,9 @@ describe('TextArea 테스트 >', () => { const { getByTestId } = renderComponent({ onFocus }) const rendered = getByTestId(TEXT_AREA_TEST_ID) const textareaElement = rendered.getElementsByTagName('textarea')[0] - textareaElement.focus() + act(() => { + textareaElement.focus() + }) jest.advanceTimersByTime(1000) // eslint-disable-next-line max-len @@ -91,7 +94,9 @@ describe('TextArea 테스트 >', () => { const { getByTestId } = renderComponent({ onFocus, readOnly: true }) const rendered = getByTestId(TEXT_AREA_TEST_ID) const textareaElement = rendered.getElementsByTagName('textarea')[0] - textareaElement.focus() + act(() => { + textareaElement.focus() + }) expect(onFocus).not.toBeCalled() }) @@ -101,7 +106,9 @@ describe('TextArea 테스트 >', () => { const { getByTestId } = renderComponent({ onFocus, disabled: true }) const rendered = getByTestId(TEXT_AREA_TEST_ID) const textareaElement = rendered.getElementsByTagName('textarea')[0] - textareaElement.focus() + act(() => { + textareaElement.focus() + }) expect(onFocus).not.toBeCalled() }) @@ -111,7 +118,9 @@ describe('TextArea 테스트 >', () => { const { getByTestId } = renderComponent({ onFocus, disabled: true, readOnly: true }) const rendered = getByTestId(TEXT_AREA_TEST_ID) const textareaElement = rendered.getElementsByTagName('textarea')[0] - textareaElement.focus() + act(() => { + textareaElement.focus() + }) expect(onFocus).not.toBeCalled() }) @@ -121,7 +130,9 @@ describe('TextArea 테스트 >', () => { const { getByTestId } = renderComponent({ onFocus }) const rendered = getByTestId(TEXT_AREA_TEST_ID) const textareaElement = rendered.getElementsByTagName('textarea')[0] - textareaElement.focus() + act(() => { + textareaElement.focus() + }) expect(onFocus).toBeCalled() }) @@ -134,7 +145,10 @@ describe('TextArea 테스트 >', () => { const rendered = getByTestId(TEXT_AREA_TEST_ID) const textareaElement = rendered.getElementsByTagName('textarea')[0] - fireEvent.change(textareaElement, { target: { value: 'test' } }) + act(() => { + fireEvent.change(textareaElement, { target: { value: 'test' } }) + }) + expect(onChange).toBeCalled() }) }) @@ -145,8 +159,10 @@ describe('TextArea 테스트 >', () => { const { getByTestId } = renderComponent({ onBlur }) const rendered = getByTestId(TEXT_AREA_TEST_ID) const textareaElement = rendered.getElementsByTagName('textarea')[0] - textareaElement.focus() - textareaElement.blur() + act(() => { + textareaElement.focus() + textareaElement.blur() + }) expect(onBlur).toBeCalled() }) }) diff --git a/src/components/Forms/Inputs/TextField/TextField.test.tsx b/src/components/Forms/Inputs/TextField/TextField.test.tsx index 97b6917b1e..ae7587ab8e 100644 --- a/src/components/Forms/Inputs/TextField/TextField.test.tsx +++ b/src/components/Forms/Inputs/TextField/TextField.test.tsx @@ -1,5 +1,6 @@ /* External dependencies */ import React from 'react' +import { act } from '@testing-library/react' import { fireEvent } from '@testing-library/dom' /* Internal dependencies */ @@ -107,7 +108,9 @@ describe('TextField', () => { it('should have focused style when "input" focused', () => { const { getByTestId } = renderComponent() const rendered = getByTestId(TEXT_INPUT_TEST_ID) - rendered.getElementsByTagName('input')[0].focus() + act(() => { + rendered.getElementsByTagName('input')[0].focus() + }) expect(rendered).toHaveStyle(`background-color: ${LightFoundation.theme['bg-white-normal']}`) // eslint-disable-next-line max-len 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', () => { const { getByTestId } = renderComponent({ onFocus }) const rendered = getByTestId(TEXT_INPUT_TEST_ID) const input = rendered.getElementsByTagName('input')[0] - input.focus() + act(() => { + input.focus() + }) expect(onFocus).toBeCalled() }) @@ -128,7 +133,9 @@ describe('TextField', () => { const { getByTestId } = renderComponent({ onChange }) const rendered = getByTestId(TEXT_INPUT_TEST_ID) const input = rendered.getElementsByTagName('input')[0] - fireEvent.change(input, { target: { value: 'test' } }) + act(() => { + fireEvent.change(input, { target: { value: 'test' } }) + }) expect(onChange).toBeCalled() }) @@ -137,7 +144,9 @@ describe('TextField', () => { const { getByTestId } = renderComponent({ onKeyDown }) const rendered = getByTestId(TEXT_INPUT_TEST_ID) const input = rendered.getElementsByTagName('input')[0] - fireEvent.keyDown(input, { key: 'A', code: 'KeyA' }) + act(() => { + fireEvent.keyDown(input, { key: 'A', code: 'KeyA' }) + }) expect(onKeyDown).toBeCalled() }) @@ -146,7 +155,9 @@ describe('TextField', () => { const { getByTestId } = renderComponent({ onKeyUp }) const rendered = getByTestId(TEXT_INPUT_TEST_ID) const input = rendered.getElementsByTagName('input')[0] - fireEvent.keyUp(input, { key: 'A', code: 'KeyA' }) + act(() => { + fireEvent.keyUp(input, { key: 'A', code: 'KeyA' }) + }) expect(onKeyUp).toBeCalled() }) }) @@ -157,7 +168,9 @@ describe('TextField', () => { const { getByTestId } = renderComponent({ onFocus, disabled: true }) const rendered = getByTestId(TEXT_INPUT_TEST_ID) const input = rendered.getElementsByTagName('input')[0] - input.focus() + act(() => { + input.focus() + }) expect(onFocus).not.toBeCalled() }) @@ -166,7 +179,9 @@ describe('TextField', () => { const { getByTestId } = renderComponent({ onFocus, readOnly: true }) const rendered = getByTestId(TEXT_INPUT_TEST_ID) const input = rendered.getElementsByTagName('input')[0] - input.focus() + act(() => { + input.focus() + }) expect(onFocus).not.toBeCalled() }) @@ -175,7 +190,9 @@ describe('TextField', () => { const { getByTestId } = renderComponent({ onChange, disabled: true }) const rendered = getByTestId(TEXT_INPUT_TEST_ID) const input = rendered.getElementsByTagName('input')[0] - fireEvent.change(input, { target: { value: 'test' } }) + act(() => { + fireEvent.change(input, { target: { value: 'test' } }) + }) expect(onChange).not.toBeCalled() }) @@ -184,7 +201,9 @@ describe('TextField', () => { const { getByTestId } = renderComponent({ onChange, readOnly: true }) const rendered = getByTestId(TEXT_INPUT_TEST_ID) const input = rendered.getElementsByTagName('input')[0] - fireEvent.change(input, { target: { value: 'test' } }) + act(() => { + fireEvent.change(input, { target: { value: 'test' } }) + }) expect(onChange).not.toBeCalled() }) @@ -193,7 +212,9 @@ describe('TextField', () => { const { getByTestId } = renderComponent({ onKeyDown, disabled: true }) const rendered = getByTestId(TEXT_INPUT_TEST_ID) const input = rendered.getElementsByTagName('input')[0] - fireEvent.keyDown(input, { key: 'A', code: 'KeyA' }) + act(() => { + fireEvent.keyDown(input, { key: 'A', code: 'KeyA' }) + }) expect(onKeyDown).not.toBeCalled() }) @@ -202,7 +223,9 @@ describe('TextField', () => { const { getByTestId } = renderComponent({ onKeyDown, readOnly: true }) const rendered = getByTestId(TEXT_INPUT_TEST_ID) const input = rendered.getElementsByTagName('input')[0] - fireEvent.keyDown(input, { key: 'A', code: 'KeyA' }) + act(() => { + fireEvent.keyDown(input, { key: 'A', code: 'KeyA' }) + }) expect(onKeyDown).not.toBeCalled() }) @@ -211,7 +234,9 @@ describe('TextField', () => { const { getByTestId } = renderComponent({ onKeyUp, disabled: true }) const rendered = getByTestId(TEXT_INPUT_TEST_ID) const input = rendered.getElementsByTagName('input')[0] - fireEvent.keyUp(input, { key: 'A', code: 'KeyA' }) + act(() => { + fireEvent.keyUp(input, { key: 'A', code: 'KeyA' }) + }) expect(onKeyUp).not.toBeCalled() }) @@ -220,7 +245,9 @@ describe('TextField', () => { const { getByTestId } = renderComponent({ onKeyUp, readOnly: true }) const rendered = getByTestId(TEXT_INPUT_TEST_ID) const input = rendered.getElementsByTagName('input')[0] - fireEvent.keyUp(input, { key: 'A', code: 'KeyA' }) + act(() => { + fireEvent.keyUp(input, { key: 'A', code: 'KeyA' }) + }) expect(onKeyUp).not.toBeCalled() }) })