>source

Jest와 React를 모두 배우고 Material-UI를 실험하고 있습니다. 어떻게 작동하는지 확인하기 위해이 간단한 테스트를 작성했습니다.

import React from 'react';
import { render, fireEvent, configure} from '@testing-library/react';
import { TextField } from '@material-ui/core';
configure({ testIdAddribute: 'id' });
describe('Testing events', () => {
  test('onChange', () => {
    const onChangeMock = jest.fn();
    
    const { getByTestId } = render(
      <TextField id="test" onChange={onChangeMock} type="text" />
    );
    
    fireEvent.change(getByTestId('test', { target: { value: 'foo' } }));
    expect(onChangeMock.mock.calls.length).toBe(1);
  });
});

그러나이 테스트는 실패합니다.

expect(received).toBe(expected) // Object.is equality
    Expected: 1
    Received: 0

내가 여기서 이해하지 못하는 것은 무엇입니까?

  • 답변 # 1

    getByTestId() 찾을 것이다 data-testid 속성이 아니라 id . 다음에서 코드를 변경해보십시오.

    <TextField id="test" onChange={onChangeMock} type="text" />
    
    

    <TextField data-testid="test" onChange={onChangeMock} type="text" />
    
    

    이제 코드에서

    fireEvent.change(getByTestId('test', { target: { value: 'foo' }}));
    expect(onChangeMock.mock.calls.length).toBe(1);
    
    

    사용자의 키 누름을 시뮬레이션 할 때 다음을 사용해야합니다. @testing-library/user-event 그리고 전화 user.type() 발사하는 대신 onChange 수동으로 이벤트.

    당신은 또한 사용할 수 있습니다 .toHaveBeenCalledTimes(number) 함수가 호출 된 횟수를 주장하는 matcher.

    그리고 마지막으로 getByRole() 대신에 getByTestId() 사용자는 TextField ( getByRole('textbox') ) 대신에 data-testid 요소를 검사 할 때만 볼 수있는 요소의 속성입니다.

    어떤 쿼리를 사용해야합니까?를 참조하십시오. RTL의 철학에 대해 더 알고 싶습니다.

    합치면 다음과 같이됩니다.

    import { screen } from '@testing-library/dom'
    import user from '@testing-library/user-event'
    ...
    const onChangeMock = jest.fn();
        
    render(<TextField onChange={onChangeMock} />);
    const input = screen.getByRole('textbox')
    user.type(input, 'foo')
    expect(onChangeMock).toHaveBeenCalledTimes(3);
    
    

  • 이전 python - 다양한 데이터 유형을 사용하여 데이터 프레임 열의 문자열에서 숫자 찾기
  • 다음 IntelliJ - intellij - 기본적으로 "모두 확장"이있는 코드