ReactJS 컨텍스트 테스트 - 테스트 더블 가이드

이번 게시물에서는 테스트 라이브러리를 사용하여 컨텍스트에 의존하는 React 구성 요소를 테스트하는 사고 과정을 살펴보겠습니다. 내 목표는 이러한 구성 요소를 테스트하는 다른 접근 방식을 탐색하고, 컨텍스트를 조롱하지 않고 테스트하는 것과 모의를 사용하는 것의 장단점을 검토하는 것입니다. 각 접근 방식이 테스트의 신뢰성에 어떤 영향을 미치는지 살펴보고 실제 응용 프로그램에서 한 가지 방법이 다른 방법보다 더 유익할 수 있는 시기와 이유에 대한 통찰력을 공유하겠습니다.

당신이 알아야 할 것

• reactjs의 용도(아마도 이미 일부 앱을 작성해 보셨을 것입니다)
• 비테스트란 무엇인가요?

반응 컨텍스트 란 무엇입니까?

ReactJS 컨텍스트는 ReactJS 구성 요소 구조의 일반적인 문제인 prop 드릴링에 대한 솔루션으로 등장했습니다. Prop 드릴링은 동일한 데이터 세트에 액세스해야 하는 구성 요소 체인이 있을 때 발생합니다. 컨텍스트 메커니즘을 사용하면 컨텍스트 자체가 첫 번째 하위 항목인 한 구성 요소가 동일한 데이터 세트를 공유할 수 있습니다.

reactjs 문서에서는 테마를 유지하기 위한 컨텍스트가 사용됩니다. 다른 구성 요소에 이 정보가 필요할 수 있으므로 문서는 props를 통해 값을 전달하는 대신 컨텍스트를 사용하여 이를 처리합니다. 또 다른 예는 애플리케이션의 레이아웃을 유지하기 위해 컨텍스트를 사용하는 것입니다. json-tool 예에서 App.tsx는 모든 애플리케이션에 사용할 수 있는 DefaultLayout 컨텍스트로 애플리케이션을 래핑합니다.

이 예에 대한 앱

다음 예시에서는 테마 앱을 사용하겠습니다. 사용자가 밝은 테마와 어두운 테마를 전환할 수 있는 애플리케이션입니다. 이 앱은 Reactjs 공식 문서에서도 사용됩니다. 이 애플리케이션은 밝은 테마 모드와 어두운 테마 모드 사이를 전환하는 간단한 토글로 구성됩니다. 응용프로그램은 매우 간단하며 단일 파일에 모든 내용을 표시할 수 있습니다.

import { createContext, useContext, useState } from 'react'
const ThemeContext = createContext('light')

function Page() {
  const theme = useContext(ThemeContext)
  return (
    <div>
      <p>current theme: {theme}</p>
    </div>
  )
}

function App() {
  const [theme, setTheme] = useState('light')
  return (
    <ThemeContext.Provider value={theme}>
      <button
        className={theme}
        onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      >
        Toggle
      </button>
      <Page />
    </ThemeContext.Provider>
  )
}

export default App

이 애플리케이션에는 앱과 페이지라는 두 가지 주요 구성 요소가 있습니다. App 구성 요소는 기본 구성 요소 역할을 하며 현재 테마의 상태("밝음" 또는 "어두움")를 포함합니다. 또한 밝은 모드와 어두운 모드 간에 테마를 전환하는 버튼도 포함되어 있습니다. 페이지 구성 요소는 App의 하위 구성 요소이며 테마 컨텍스트를 사용하여 현재 테마를 표시합니다. 앱 구성 요소의 버튼은 클릭하면 테마가 전환되고 이에 따라 컨텍스트 값이 업데이트되는 간단한 토글 버튼입니다.

다음 섹션에서는 테스트를 위해 구성 요소를 분할하는 방법에 대해 설명합니다.

테스트용 점화

일반적으로 모든 애플리케이션에서 우리는 어떤 종류의 테스트를 수행하고 싶은지, 어떤 부분을 다루고 싶은지에 집중해야 합니다. 예를 들어 전체 애플리케이션 대신 단일 구성 요소를 대상으로 할 수 있습니다. 이 예에서는 페이지 구성 요소부터 시작하겠습니다. 이를 테스트하려면 테스트 더블을 사용해야 합니다.

테스트 더블은 앱 구조 자체에서 비롯됩니다. 컨텍스트에 따라 달라지므로 이를 변경하려면 컨텍스트의 값도 변경되어야 합니다.

테스트더블

reactjs의 컨텍스트를 사용하여 테스트 접근 방식을 시작하기 위해 첫 번째 테스트 작성을 시작합니다.

import { createContext, useContext, useState } from 'react'
const ThemeContext = createContext('light')

function Page() {
  const theme = useContext(ThemeContext)
  return (
    <div>
      <p>current theme: {theme}</p>
    </div>
  )
}

function App() {
  const [theme, setTheme] = useState('light')
  return (
    <ThemeContext.Provider value={theme}>
      <button
        className={theme}
        onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      >
        Toggle
      </button>
      <Page />
    </ThemeContext.Provider>
  )
}

export default App

ThemeContext에서 밝은 테마가 기본 테마로 설정되어 있다는 점을 고려하면 이 테스트는 예상대로 통과할 것입니다. 이 첫 번째 예제도 테스트해 볼 수도 있지만 어두운 테마에 관심이 있는 두 번째 테스트에서는 상황이 흥미로워집니다. 어두운 테마로 들어가려면, 우리가 이를 수행하기 위해 Reactjs 컨텍스트에 의존한다는 점을 고려하여 테스트 더블을 사용하기 시작해야 합니다. 두 번째 테스트에서는 vi.mock과 vi.mock을 믹스에 추가합니다. 두 번째 테스트를 작성하려면 첫 번째 테스트도 변경해야 합니다.

import { render, screen } from '@testing-library/react'
import { Page } from './Page'

describe('<Page />', () => {
  it('should render light as default theme', () => {
    render(<Page />)
    expect(screen.getByText('current theme: light')).toBeInTheDocument()
  })
})

현재 두 테스트 사례 모두 가짜를 사용하여 애플리케이션을 테스트하고 있습니다. 컨텍스트에서 반환 데이터를 변경하면 테스트도 변경됩니다. 여기서 주의할 점은 다음과 같습니다.

• 우리는 "원칙이 없는 것을 조롱하지 마세요"를 방해하는 Reactjs 컨텍스트를 조롱하고 있습니다.
• 이를 수행하려면 조롱을 사용해야 하므로 테스트가 더욱 장황해집니다.
• 우리가 작성한 두 가지 테스트는 사용자와 애플리케이션의 상호 작용을 반영하지 않습니다. 토글 버튼을 누르면 테마가 변경되는 것으로 알고 있습니다.

이 섹션에 사용된 완성된 코드는 GitHub에서 확인할 수 있습니다

테스트더블 없이

다음 접근 방식은 애플리케이션을 분리하거나 테스트 더블을 사용하지 않고 애플리케이션에 포함된 컨텍스트를 사용하는 것입니다. TDD에서 이 접근 방식을 취하면 사용자가 어떻게 행동할지 시뮬레이션하는 매우 간단한 테스트로 시작할 수 있습니다.

import { render, screen } from '@testing-library/react'
import { Page } from './Page'
import { useContext } from 'react'

vi.mock('react', () => {
  return {
    ...vi.importActual('react'),
    useContext: vi.fn(),
    createContext: vi.fn()
  }
})

describe('<Page />', () => {
  it('should render light as default theme', () => {
    vi.mocked(useContext).mockReturnValue('light')
    render(<Page />)
    expect(screen.getByText('current theme: light')).toBeInTheDocument()
  })

  it('should render dark theme', () => {
    vi.mocked(useContext).mockReturnValue('dark')
    render(<Page />)
    expect(screen.getByText('current theme: dark')).toBeInTheDocument()
  })
})

두 번째 테스트에 이어 기본적으로 밝은 테마를 설정하려고 합니다.

import { render, screen } from '@testing-library/react'
import App from './App'
import userEvent from '@testing-library/user-event'

describe('<App />', () => {
  it('should render toggle button', () => {
    render(<App />)
    expect(screen.getByText('Toggle')).toBeInTheDocument()
  })
})

마지막으로 중요한 테마 전환:

import { render, screen } from '@testing-library/react'
import App from './App'
import userEvent from '@testing-library/user-event'

describe('<App />', () => {
  it('should render toggle button', () => {
    render(<App />)
    expect(screen.getByText('Toggle')).toBeInTheDocument()
  })

  it('should render light as default theme', () => {
    render(<App />)
    expect(screen.getByText('current theme: light')).toBeInTheDocument()
  })
})

이 전략의 주의사항:

• 테스트 더블이 필요하지 않으며 더 적은 코드로 테스트를 수행합니다
• 테스트 동작은 사용자가 실제 애플리케이션에서 수행하는 동작과 일치합니다

이 섹션에 사용된 완성된 코드는 GitHub에서 확인할 수 있습니다

각 접근 방식의 장단점

이 섹션에서는 다양한 속성과 관련하여 각 접근 방식의 장단점을 살펴보겠습니다.

소품으로 리팩토링

컨텍스트에 테스트 더블을 사용하면 이러한 종류의 변화에 ​​테스트가 취약해집니다. props를 사용하여 useContext의 사용을 리팩토링하면 동작이 실패하더라도 자동으로 테스트가 실패하게 됩니다. 테스트더블을 사용하지 않는 옵션을 사용하면 그런 의미에서 리팩토링이 지원됩니다.

사용자 정의 컨텍스트 만들기

reactjs의 컨텍스트 제공자에 직접 의존하는 대신 맞춤 컨텍스트를 사용하는 경우에도 마찬가지입니다. 테스트더블 없이 옵션을 사용하면 리팩토링이 가능해집니다.

결론

이 가이드에서는 테스트 더블 없이 컨텍스트에 의존하는 구성 요소를 테스트하여 테스트를 더욱 간단하고 실제 사용자 상호 작용에 더 가깝게 만들고 각 접근 방식의 장단점을 대조하는 방법을 살펴보았습니다. 가능하다면 사용자 상호작용을 반영하는 단순한 접근 방식을 따라야 합니다. 그러나 테스트 더블이 필요한 경우 테스트 코드의 유지 관리성을 목표로 사용해야 합니다. 간단한 테스트를 통해 프로덕션 코드에서 자신 있게 리팩토링할 수 있습니다.

자원

• 사용자 정의 컨텍스트 만들기
• 리팩토링 카탈로그
• vitest를 사용하여 모듈의 특정 부분을 모의하는 방법을 찾는 데 사용됩니다
• 유형 문제를 해결하는 방법을 찾는 데 사용됩니다
• 테스트 라이브러리 userEvent

다음 단계

• 여러 컨텍스트나 중첩된 공급자를 포함하는 더 복잡한 시나리오를 테스트해 보세요.
• 이 가이드에서는 모의를 피했지만 모의가 필요한 경우가 있습니다. 해당 시나리오에 대한 고급 모의 기술을 살펴보세요.

이러한 단계를 따르면 계속해서 테스트 기술을 향상하고 React 애플리케이션이 리팩토링에 개방되도록 할 수 있습니다.

위 내용은 ReactJS 컨텍스트 테스트 - 테스트 더블 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!