React Native : 애플리케이션에 대한 테스트 자동화

테스트 자동화를 통해 소프트웨어 개발 팀의 시간과 리소스를 절약하고 ROI를 향상하며 코드 결함을 방지하는 방법에 대해 알아보십시오.

20년 넘게 테스트 자동화는 소프트웨어 개발 팀이 작업량을 줄일 수 있도록 도와주었으며, 이에 따라 팀이 특히 릴리스 광풍 속에서 경험하는 시간과 리소스에 대한 부담을 줄여 왔습니다. 자동화된 테스트는 테스트 및 피드백 루프의 속도를 높일 뿐만 아니라 테스트를 통해 ROI를 향상시켜 회사의 비용을 절감할 수 있습니다.

인터넷 설문 조사 응답자의 24%는 첫 6개월 이내에 테스트 자동화에 대한 투자 수익을 얻었다고 주장합니다. 테스트 자동화는 디지털 전환/현대화 작업을 진행 중인 비즈니스의 출발점입니다.

자동화된 테스트는 코드 수정이 회귀 또는 새로운 결함을 초래하지 않도록 보장하기 때문에 소프트웨어 개발 과정에서 중요한 단계입니다. 이 글에서는 리액트 네이티브 앱에 적용될 수 있는 다양한 자동화된 테스트 기술을 다룰 것입니다.

 

 

React Native : 애플리케이션에 대한 테스트 자동화

 

 

단위 테스트

코드의 특정 시나리오를 재생하기 위해 간략하고 격리된 테스트를 작성하는 것은 유닛 테스트("유닛"이라고 함)라고 합니다. 이러한 테스트를 자동화하여 각 유닛이 올바르게 작동하는지 확인할 수 있습니다.

제스트와 같은 테스트 프레임워크를 사용하여 리액트 네이티브 앱에 대한 단위 테스트를 만들 수 있습니다. 제스트는 빠르고 간단하며 풍부한 조롱 라이브러리를 가지고 있기 때문에 리액트 애플리케이션에 대한 인기 있는 옵션입니다.

다음은 두 개의 숫자를 추가하는 함수에 대한 단순 단위 검정의 예입니다:

import { add } from './math';
 
test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

 

 

jest 명령을 사용하여 이 테스트를 실행합니다. jest는 테스트 파일(즉, 이름이 *.test.js 또는 *.spec.js와 일치하는 파일)을 자동으로 찾고 발견된 테스트를 실행합니다.

단위 테스트는 서로 다른 코드 조각을 테스트하는 데 도움이 되지만 서로 다른 코드 조각이 어떻게 상호 작용하는지 평가할 수 없습니다. 이에 대해 통합 테스트를 활용하는 것이 가장 좋을 것입니다.

 

 

통합 테스트

통합 테스트는 다양한 코드 조각들이 서로 어떻게 상호작용하는지 검사합니다. 데이터 흐름, API 호출 및 UI 상호작용과 같은 것들을 테스트하는 것은 이러한 접근 방식의 이점을 얻을 수 있습니다.

React Native의 통합 테스트에는 React-test-renderer 또는 효소와 같은 라이브러리를 사용하여 React Native 구성 요소를 렌더링하고 출력에 대해 주장하는 것이 포함됩니다.

다음은 react-test-render를 사용하여 간단한 Button 구성 요소에 대한 통합 테스트를 작성하는 방법은 다음과 같습니다:

import React from 'react'; 
import renderer from 'react-test-renderer';
import Button from './Button'; 

it('renders correctly', () => { 
  const tree = renderer.create(<Button>Click me</Button>).toJSON(); expect(tree).toMatchSnapshot(); 
});

 

 

이 테스트는 버튼 구성 요소를 렌더링하고 출력 스냅샷을 캡처합니다. 스냅샷은 파일에 저장되어 향후 테스트 실행 결과를 비교하는 데 사용됩니다. 이 방법을 사용하면 다음 릴리스 이후에 구성 요소가 예기치 않게 변경되지 않습니다.

또한 react-test-render 라이브러리를 사용하여 렌더링된 구성 요소를 조작하고 해당 구성 요소의 상태와 동작에 대해 주장할 수 있습니다. 예를 들어 버튼 누름을 시뮬레이션하여 올바른 작업이 실행되는지 확인할 수 있습니다:

import React from 'react';
import renderer from 'react-test-renderer';
import Button from './Button';

it('dispatches action on press', () => {
  const mockPressAction = jest.fn();
  const component = renderer.create(<Button onPress={mockPressAction}>Click me</Button>);
  component.root.findByType(Button).props.onPress();
  expect(mockPressAction).toHaveBeenCalled();
});

 

 

이 테스트는 onPress 소품을 호출하여 Button 구성 요소를 렌더링하고 프레스 이벤트를 시뮬레이션합니다. 그런 다음 jest.fn()을 사용하여 호출되었는지 여부를 추적하고 호출되었다고 주장하는 모의 함수를 만듭니다.

라이브러리를 사용하여 렌더링된 구성 요소를 조작하고 그 동작에 대해 주장할 수도 있습니다.

 

 

엔드 투 엔드 테스트

엔드 투 엔드 테스트는 사용자가 처음부터 끝까지 전체 소프트웨어 제품 단위를 평가하는 것을 수반합니다. 이 접근 방식은 성능, 오류 처리 및 전체 앱 흐름을 평가하는 데 도움이 될 수 있습니다.

디톡스와 같은 라이브러리를 사용하여 리액트 네이티브 프로젝트에 대한 엔드 투 엔드 테스트를 만들 수 있습니다. 그레이박스 테스트 도구 디톡스의 도움을 받아 사용자와 동일하게 앱과 상호 작용하는 테스트를 만들 수 있습니다. 앱의 상태를 검사하고 리액트 네이티브 디버거를 사용하여 예상된 작업이 실행되었는지 확인합니다.

로그인 흐름을 확인하는 엔드 투 엔드 테스트의 예는 다음과 같습니다:

describe('Login flow', () => {
  beforeEach(async () => {
    await device.reloadReactNative();
  });
 
  it('should allow the user to login', async () => {
    await expect(element(by.id('username'))).toBeVisible();
    await element(by.id('username')).typeText('user1');
    await element(by.id('password')).typeText('pass1');
    await element(by.id('login-button')).tap();
    await expect(element(by.text('Welcome!'))).toBeVisible();
  });
});

 

 

이 테스트를 실행하려면 리액트 네이티브 디버거를 실행하고 디톡스 테스트 명령을 실행해야 합니다. 앱을 실행하고 테스트를 실행하며 예상된 단계가 수행되었는지 확인하는 것은 모두 디톡스에 의해 수행됩니다.

엔드투엔드 테스트는 전체 앱이 완성품으로 작용하는 방식을 확인하는 데는 도움이 되지만 실행에 시간이 많이 걸리고 관리에 어려움이 있을 수 있습니다. 일반적으로 전체 엔드투엔드 테스트 스위트를 구축하거나 필요한 경우에만 사용하는 것보다 통합 테스트와 단위 테스트를 혼합하여 사용하는 것이 좋습니다. 예를 들어 사용자 상호 작용에 대한 응답 시간이 빨라야 하는 경우의 성능을 검사하고자 할 때입니다.

 

 

결론

단위 테스트, 통합 테스트 및 종단 간 테스트를 포함한 리액트 네이티브 프로젝트에 대한 몇 가지 자동 테스트 방법을 다루었습니다. 각 방법에는 장점과 단점이 있으며 사용자의 구체적인 요구 사항에 따라 최적의 접근 방식이 결정됩니다.

이러한 테스트 방법을 결합하면 코드가 올바르게 작동하고 앱이 안정적이고 안정적인지 확인할 수 있습니다. 장기적으로 이를 통해 시간과 노력을 절약하는 동시에 앱의 품질을 높일 수 있습니다.