재스트 반응 테스트:지연 후 상태 확인

재스트 반응 테스트:지연 후 상태 확인

Jest 문서 https://facebook.github.io/jest/docs/timer-mocks.html#content를 사용하여 테스트를 작성하려고 하는데 매우 혼란스럽습니다.

컨테이너가 마운트될 때 상태를 확인하고 몇 초 후에 수동으로 (setTimeout()을 사용하여) 값을 설정한 후 상태를 확인하려고 합니다.

Main의 componentDidMount 내부에 다음과 같은 기능이 있습니다.

componentDidMount() {
    this.setStateAfterDelay();
}

이 기능은 다음과 같은 기능을 수행합니다.

setStateAfterDelay = () => {
    setTimeout(() => {
        this.setState({ fruits: ['banana', 'apple', 'orange', 'vodka', 'kiwi'] });
    }, 1500);
}

첫 번째 부분은 다음과 같이 완성했습니다.

const component = mount(<Main />);
expect(component.state().fruits).toEqual(null);

하지만 2000ms 이후에 상태를 어떻게 다시 확인해야 할지 모르겠어요.

어떤 도움이라도 감사합니다:)

jeast는 비동기 코드를 쉽게 실행할 수 있지만 promise와 set Timeout의 조합을 사용하여 잠시 기다릴 수 있습니다.예를 들어, 이 코드는 2초간 대기합니다.

await new Promise((r) => setTimeout(r, 2000));

전체 샘플 테스트추가되는 것을 잊지 마세요.async콜백 함수 앞에 플래그를 설정합니다.

test('some test title', async () => {
  const foo = true;
  await new Promise((r) => setTimeout(r, 2000));
  expect(foo).toBeDefined();
});

또, 디폴트의 「타임 아웃」은 5 초(5000 밀리초)인 것에 주의해 주세요.테스트 실행 시간이 길어질 경우 다음을 추가할 수 있습니다.jest.setTimeout(30000);보다 위에test(). 30000은 30초 동안 타임아웃되지 않도록 합니다.필요한 숫자를 추가할 수 있습니다.set Timeout의 완전한 예:

jest.setTimeout(30000);

test('some test title', async () => {
  const foo = true;
  await new Promise((r) => setTimeout(r, 2000));
  expect(foo).toBeDefined();
});

이 코드는 테스트해 본 적이 없습니다.근데 이것과 비슷한 게 효과가 있을 것 같아요.

const fruits = ['banana', 'apple', 'orange', 'vodka', 'kiwi'];

it('mock setTimeout test', () => {
 jest.useFakeTimers();
 setTimeout(() => {
   expect(component.state().fruits).toEqual(fruits);
 }, 1500);
 jest.runAllTimers();
});

테스트를 연기할 필요는 없습니다.전화만 주시면 됩니다.jest.runAllTimers()단언하기 전에 효과가 있습니다.

const fruits = ['banana', 'apple', 'orange', 'vodka', 'kiwi'];

it('initializes the fruits state', () => {
 jest.useFakeTimers();
 jest.runAllTimers();
 expect(component.state().fruits).toEqual(fruits);
});

전화하실 수도 있습니다.useFakeTimers()에 있어서beforeEach여러 번 테스트하는 경우runAllTimers()다른 안에 있을 수 있다beforeEach같은 말을 반복하지 않도록.

20초 후에 확인하는 방법인 거 알아요.그러나 20초 동안 테스트하고 싶지 않은 지표일 수도 있습니다.때로는 중요한 것은 올바른 입력으로 특정 액션이 수행되었는지 여부입니다.이 경우 디스패치 기능을 전달할 수 있도록 코드를 조금 재구성할 수 있습니다.예를 들어.

    function abc() {
        return dispatch => {
            return Promise.then(res => {})  // this would take 20 seconds
        }
    }

왜냐면dispatch전달되기 때문에 테스트 코드에서 다음 항목을 쉽게 사용할 수 있습니다.

    const dispatch = Jest.fn()
    abc(dispatch)
    expect(dispatch).toBeCalled()

물론 20초라도 상관하지 않고 워크플로우 프로세스에 더 신경을 쓴다고 가정합니다.

언급URL : https://stackoverflow.com/questions/45478730/jest-react-testing-check-state-after-delay