UI 테스트를 생성하는 방법

이 기사는 Solidjs를 대상으로 하지만 React 또는 Preact 개발자에게도 유용해야 합니다.

dev.to를 개발 중이고 위의 프레임워크 중 하나로 작성되었다고 상상해 보세요. Chrome DevTools 콘솔로 이동합니다. 다음 두 명령을 입력하십시오.

$str.describe = 'dev.to'
$str.it = 'should render logo'

그런 다음 요소 검사기로 Devto의 로고를 선택합니다. 다음 메시지가 표시됩니다.

can be selected by:
screen.getByAltText("DEV Community \uD83D\uDC69\u200D\uD83D\uDCBB\uD83D\uDC68\u200D\uD83D\uDCBB")

이제 다음을 입력하십시오.

$str.expect.toBeInTheDocument = true
$str.seeResult

코드 편집기는 다음과 같이 표시됩니다.

import { describe, expect, test as it, vi } from 'vitest'
import { fireEvent, render, screen, waitFor } from 'solid-testing-library'
import { getRequestSpy } from 'rootPath/setupVitest'
import { SomeComponent } from './some-component'

describe('dev.to', () => {
  const waitForInitialRequests = async () => {}

  it('should render logo', async () => {
    const initialProps = {}
    const { unmount } = render(() => <SomeComponent {...initialProps} />)

    await waitForInitialRequests()
    expect(
      screen.getByAltText('DEV Community \uD83D\uDC69\u200D\uD83D\uDCBB\uD83D\uDC68\u200D\uD83D\uDCBB')
    ).toBeInTheDocument()
    unmount()
  })
})

Copy-paste the test to your IDE and job done!

좋습니다... Chrome DevTools가 마법처럼 테스트를 생성하지 않기 때문에 완전한 이야기는 아닙니다. 그러나 이 오픈 소스 확장 프로그램Solid Test Recorder을 사용하면 이 외에도 많은 것이 가능합니다!

간단히 말해서 이 나쁜 소년 확장 프로그램은 다음과 같습니다.

solidjs 지침을 따르는 vitest 및 msw을 릴레이하는 UI 테스트를 생성합니다.

훌륭한 기록 제어 기능을 제공하는 Chrome DevTools 요소 검사기와 콘솔의 조합을 사용합니다. 터미널과 같은 자동 완성.

검사된 요소에 대해 가장 구체적인 선택기를 자동으로 생성합니다.

네트워크 요청을 기록하고 이에 대한 모의 객체와 스파이를 생성합니다.

사용 가능한 명령 목록은 다음과 같습니다.





구성:
$str.config.codeTemplates테스트 파일을 생성할 때 사용되는 코드 템플릿을 편집할 수 있습니다.
$str.config.excludedRequests요청을 캡처할 때 무시할 URL 목록을 지정할 수 있습니다.

테스트:
$str.describe주어진 설명으로 새 테스트 파일을 생성합니다.
$str.it주어진 설명으로 새로운 테스트 케이스를 생성합니다.
$str.expect.*현재 선택된 요소에 새 어설션을 추가합니다.
$str.capture.*이벤트 캡처 시작, 즉 자동 생성 사용자 이벤트 및 후속 요청
$str.stopCapturing이벤트 캡처 중지
$str.seeResult생성된 테스트 파일 및 요청 모의와 함께 편집기를 엽니다.
$str.editTest테스트 사례 및 테스트 단계를 재배치하거나 제거하고 활성 커서를 설정할 수 있습니다.

현재 테스트 파일/케이스 변경:
$str.use.file주어진 테스트 파일로 전환할 수 있습니다.
$str.use.case주어진 테스트 케이스로 전환 가능

제어 편집기:
$str.applyChanges변경 사항을 저장하고 편집기를 닫습니다.
$str.closeEditor모든 변경 사항을 취소하고 편집기를 닫습니다.

데이터 수집:
$str.$requests캡처된 HTTP 요청
$str.$files테스트 파일
$str.$cases테스트 케이스

Dangerous: $str.clear - removes all the test data

More info in the repo

작성하는 것이 아니라 테스트 생성을 즐기십시오!

Github 별은 대단히 감사합니다. 😃