React 컨텍스트 제공자 테스트

빠른 컨텍스트: 이름이 <AuthProvider />인 기존 Context Provider 및 관련 컨텍스트(AuthContext)를 수정하라는 요청을 받았습니다.
테스트가 없습니다. 그래서 아무것도 만지기 전에 물건을 덮기로 결정했습니다.

그리고 저는 Context Provider 🤔를 테스트하는 방법과 같았습니다.

화이트보드를 작성해 보겠습니다.

컨텍스트 공급자는 구성 요소입니다...

    render(
      <MyContextProvider />
    );

...하위 요소 포함...

    render(
      <MyContextProvider>
        <Child />
      </MyContextProvider>
    );

...컨텍스트 제공자가 제공한 값에 액세스할 수 있습니다.

    render(
      <MyContextProvider>
        <Child /> /* test that Child may access the expected value */
      </MyContextProvider>,
    );

시원한! 보다 현실적인 코드로 바꿀 수 있습니다!

$> touch src/contexts/auth-context.test.js

import { render } from '@testing-library/react';
import AuthContext, { AuthProvider } from './auth-context';

describe('<AuthProvider />', () => {
  test('provides expected AuthContext obj to child elements', () => {
    render(
      <AuthContext>
        < ?? />
      </AuthContext>,
    );
    // expect()
  }
})

우리는 여기서 진전을 이루고 있습니다 👩‍⚕️.


다음. 테스트할 컨텍스트 및 공급자 구성 요소입니다(프로젝트의 세부 사항은 생략했습니다).

const AuthContext = createContext<{
  user?: AuthUser | undefined;
  isAdmin?: boolean;
}>({});

export function AuthProvider({ children }: Props): JSX.Element {
  const [user, setUser] = useState<AuthUser | undefined>();

  useEffect(() => {
    /* API calls */ 
    setUser( ... )
  }, []);

  const isAdmin = () => /* some logic */

  return (
    <AuthContext.Provider value={{ user, isAdmin: isAdmin() }}>
      {children}
    </AuthContext.Provider>
  );
}

export default AuthContext;

OOOOok, 우리는 하위 요소가 {user, isAdmin} 을 사용하여 이러한 React.useContext() 값에 액세스할 수 있는지 테스트하고 싶습니다. 다음과 같은 것:

const TestingComponent = () => {
  const { user, isAdmin } = useContext(AuthContext);
  return (
    <>
      <p>{user?.name}</p>
      <p>{isAdmin?.toString()}</p>
    </>
  );
};

누락 된 부분 인 것 같습니다.

import { render } from '@testing-library/react';
import AuthContext, { AuthProvider } from './auth-context';

+
+ const TestingComponent = () => {
+  const { user, isAdmin } = useContext(AuthContext);
+  return (
+    <>
+      <p>{user?.name}</p>
+      <p>{isAdmin?.toString()}</p>
+    </>
+  );
+};
+
describe('<AuthProvider />', () => {
  test('provides expected AuthContext to child elements', () => {
    render(
      <AuthContext>
-        < ?? />
+        <TestingComponent />
      </AuthContext>,
    );
-    // expect()
+    // expected name
+    // expected isAdmin
  }
})

이제 모든 조각이 있습니다. AuthContext는 일부 HTTP 요청을 수행하는 사용자를 가져온 다음 사용자 + 하나의 처리된 속성( isAdmin )을 노출합니다.

이 React 컨텍스트 제공자에 대한 최종 단위 테스트는 다음과 같습니다. (저는 API 조롱과 관련된 줄을 생략했습니다. 사용 중인 요청 라이브러리에 따라 다릅니다.)

import { render } from '@testing-library/react';
import AuthContext, { AuthProvider } from './auth-context';

const TestingComponent = () => {
  const { user, isAdmin } = useContext(AuthContext);
  return (
    <>
      <p>{user?.name}</p>
      <p>{isAdmin?.toString()}</p>
    </>
  );
};

const regularUser = {
  name: 'Jhon Doe',
  /* fields that resolve as not admin */
};

const adminUser = {
  name: 'Jane Doe',
  /* fields that resolve as admin user */
};

describe('<AuthProvider />', () => {
  test('provides expected AuthContext to child elements', () => {
   [
     {
       scenario: 'regular user',
       user: regularUser,
       expectedName: 'Jhon Doe',
       expectedAdmin: 'false',
     },
     {
       scenario: 'admin user',
       user: adminUser,
       expectedName: 'Jane Doe',
       expectedAdmin: 'true',
     }
   ].forEach(({ scenario, user, expectedName, expectedAdmin }) => {

    test(scenario, () => {
      /* mock the HTTP request */

      const { getByTestId } = render(
        <AuthProvider>
          <TestingComponent />
        </AuthProvider>,
      );

      const userName = getByTestId('user-name');
      const isAdminValue = getByTestId('is-admin');
      expect(userName.textContent).toEqual(expectedName);
      expect(isAdminValue.textContent).toEqual(expectedAdmin);
    });

  });
});

Banner image: Education illustrations by Storyset

읽어주셔서 감사합니다 💚.