Jest로 프런트 엔드 테스트 작성

프런트엔드 테스트란?

프런트 엔드 테스트는 애플리케이션의 내부 및 외부 작업을 면밀히 조사하는 체계적인 방법입니다. 이 조치는 모든 뷰와 기능이 적절하게 목적을 수행하고 있어야 하는 것처럼 보이도록 보장합니다[기능적 맥락에서 픽셀 완벽에 대해 이야기].

프런트 엔드에는 단위 테스트, 시각적 회귀, 성능 테스트 등 다양한 유형의 테스트가 있습니다.

이 튜토리얼에서는 구성 요소 전체의 기능이 예상대로 작동하는지 확인하는 단위 테스트를 수행하고 테스트를 수행하는 도구로 Jest를 사용할 것입니다.

전제 조건

최신 node.js 소프트웨어를 설치하고 작동하는 키보드만 있으면 됩니다.

테스트 테스트 123...

이미 생성된 vite 응용 프로그램을 사용할 것입니다.
반면에 create-react-app은 여기서 해결합니다.

yarn create-react-app my-first-test

이미 프로젝트가 있는 경우 스냅샷을 표시하려면 react-test-renderer 패키지만 추가하면 됩니다.

yarn add react-test-renderer

앞으로 우리는 babel-react를 사용할 것이며 react babel은 이를 테스트 환경으로 변환하는 데 도움이 될 것입니다.

yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react

그런 다음 package.json는 다음과 같아야 합니다. 내가 언급한 것처럼 내 것이 더 많은 코드 원인일 수 있습니다. 상속[기존] 프로젝트입니다.


babel.config.json 파일을 만들고 다음을 추가합니다.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-react"
  ]
}

짜잔!

이제 스냅샷 테스트를 할 시간입니다...

재사용 가능한 버튼 구성 요소가 원하는 대로 작동하는지 테스트해 보겠습니다. 우리Button.js 구성 요소는 다음과 같아야 합니다.

import React, { useState } from "react";

const ACTIONS = {
  CLICKED: "clicked",
  HOVERED: "hovered",
  NORMAL: "normal",
};

const PrimaryButton = ({ children, variant }) => {
  const [actions, setActions] = useState(ACTIONS.CLICKED);

  const onClick = () => {
    setActions(ACTIONS.CLICKED);
  };
  const onMouseEnter = () => {
    setActions(ACTIONS.HOVERED);
  };
  const onMouseLeave = () => {
    setActions(ACTIONS.NORMAL);
  };

  return (
    <>
      <button
        onClick={onClick}
        variant={variant || "primaryButton"}
        className={actions}
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
      >
        {children}
      </button>
    </>
  );
};

export default PrimaryButton;

저녁 식사 오한, 그래?
다음으로 Labs.test.js라는 파일을 생성합니다. 이 파일에서 React 렌더러 및 Jest 스냅샷 기능을 사용하여 렌더링된 스냅샷을 출력으로 캡처하고 새 스냅샷 파일에 추가하는 구성 요소와 상호 작용합니다.

import React from "react";
import renderer from "react-test-renderer";
import PrimaryButton from "./Button";

it("it triggers the follow up functions when clicked", () => {
  const component = renderer.create(
    <PrimaryButton variant={"primaryButton"}>SignIn</PrimaryButton>
  );
  let primaryButton = component.toJSON();
  expect(primaryButton).toMatchSnapshot();

  //triggering click act
  renderer.act(() => {
    primaryButton.props.onClick();
  });
  //comparing Org
  primaryButton = component.toJSON();
  expect(primaryButton).toMatchSnapshot();

  //triggering enter act
  renderer.act(() => {
    primaryButton.props.onMouseEnter();
  });
  //comparing Org
  primaryButton = component.toJSON();
  expect(primaryButton).toMatchSnapshot();

  //triggering normal act
  renderer.act(() => {
    primaryButton.props.onMouseLeave();
  });
  //comparing Org
  primaryButton = component.toJSON();
  expect(primaryButton).toMatchSnapshot();
});

이제 CLI에서 yarn test 또는 yarn jest를 실행하고 다음 출력을 예상합니다.



따라서 앞서 언급한 파일__snapshots__/Labs.test.js.snap이 자동으로 생성되고 다음과 같은 스냅샷이 있습니다.

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`it triggers the follow up functions when clicked 1`] = `
 <button
  className="clicked"
  onClick={[Function]}
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
  variant="primaryButton"
>
  SignIn
</button>
`;

exports[`it triggers the follow up functions when clicked 2`] = `
<button
  className="clicked"
  onClick={[Function]}
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
  variant="primaryButton"
>
  SignIn
</button>
`;

exports[`it triggers the follow up functions when clicked 3`] = `
<button
  className="hovered"
  onClick={[Function]}
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
  variant="primaryButton"
>
  SignIn
</button>
`;

exports[`it triggers the follow up functions when clicked 4`] = `
<button
  className="normal"
  onClick={[Function]}
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
  variant="primaryButton"
>
  SignIn
</button>
`;

마지막으로 구성 요소를 변경하면 변경 사항을 캡처하도록 테스트 세트를 업데이트해야 합니다. 그렇지 않으면 오류가 발생합니다. 따라서 이를 해결하려면 yarn jest -u를 실행하십시오.
이 튜토리얼을 따라 주셔서 감사합니다. 누군가에게 도움이 될 수 있다고 생각하거나 발견했다면 주저하지 말고 공유하세요.
그라시아스 마초!