react-testing-library로 구현 세부 사항을 테스트하는 방법

효소를 사용하여 반응 구성 요소를 테스트하는 경우 가능한 한 빨리 react-testing-library로 전환하는 것을 고려해야 합니다. 해당 API는 직관적이고 사용하기 쉬우며 최종 사용자가 애플리케이션을 사용하는 방식으로 테스트 작성을 권장합니다. .

즉, react-testing-library로 테스트를 작성할 때 구성 요소의 구현 세부 사항을 테스트하는 방법을 직접 노출하지 않습니다. 기능적 구성 요소(후크가 있는 구성 요소) 또는 클래스 구성 요소. 효소를 사용하면 구현 세부 사항을 쉽게 테스트할 수 있으므로 엔지니어는 구현 세부 사항을 테스트할 수 있습니다.

구현 세부 사항을 테스트하는 것이 이치에 맞는 이상한 시나리오가 있었지만 효소로만 테스트하는 방법을 알고 있었기 때문에 반응 테스트 라이브러리의 작성자인 Kent C. Dodds가 신속하게 답변한 내 우려 사항을 트윗했습니다. 심판을 사용하여 구현 세부 사항을 테스트할 수 있다고 말합니다. 여기에서 볼 수 있는 트윗:

그래서 나는 이것을 달성하는 방법을 찾기 시작했습니다!

직장에서 특정 사용 사례는 ag-grid를 사용했기 때문에 여기에서도 재현하고 싶었습니다. 다음 코드를 사용하여 간단한 그리드를 렌더링해 보겠습니다.

import React from "react";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";
import CellEditor from "./custom-cell";

function App() {
  const columnDefs = [
    {
      headerName: "Make",
      field: "make",
      cellEditorFramework: CellEditor,
      editable: true
    },
    {
      headerName: "Model",
      field: "model",
      cellEditorFramework: CellEditor,
      editable: true
    },
    {
      headerName: "Price",
      field: "price",
      cellEditorFramework: CellEditor,
      editable: true
    }
  ];
  const rowData = [
    {
      make: "Toyota",
      model: "Celica",
      price: 35000
    },
    {
      make: "Ford",
      model: "Mondeo",
      price: 32000
    },
    {
      make: "Porsche",
      model: "Boxter",
      price: 72000
    }
  ];

  return (
    <div
      className="ag-theme-balham"
      style={{
        height: "130px",
        width: "600px"
      }}
    >
      <AgGridReact columnDefs={columnDefs} rowData={rowData} />
    </div>
  );
}

export default App;

이는 다음을 생성합니다.

columnDefs 를 보면 내가 cellEditorFramework 를 추가했음을 알 수 있습니다. 이렇게 하면 여기에 나만의 사용자 지정 셀 편집기를 추가할 수 있습니다. 사용자 지정 셀 편집기를 살펴보겠습니다.

import React from "react";
import { TextField } from "@material-ui/core";

class CellEditor extends React.Component {
  state = {
    value: this.props.value
  };
  getValue() {
    return this.state.value;
  }

  handleChange = event => {
    this.setState({ value: event.target.value });
  };

  render() {
    return <TextField value={this.state.value} onChange={this.handleChange} />;
  }
}

export default CellEditor;

여기에서 초기 prop 값을 가져오고 로컬 상태와 동기화하는 로컬 상태 값을 설정하고 있음을 알 수 있습니다. 그러나 여기서 자세히 살펴보면 getValue가 완전히 불필요하다는 것을 알 수 있습니다. 이는 어떤 가치도 제공하지 않습니다! getValue가 제거된 상태에서 편집을 시작하면 이제 ag-grid가 수행하는 작업을 살펴보겠습니다.



편집이 완료되면 값이 사라집니다! 편집이 완료되면 ag-grid가 getValue를 호출하여 최종 값을 가져오기 때문에 값이 상태에 저장되어 있다는 사실을 알지 못합니다. 따라서 이 코드가 제대로 작동하려면 세 가지 작업을 수행해야 합니다.

getValue를 다시 추가합니다.

다음과 같이 jsdoc를 추가합니다.

   /**
   * Ag-grid calls this function to get the final value once everything is updated.
   * DO NOT DELETE
   * @returns {String|Number} this.state.value
   */
  getValue() {
    return this.state.value;
  }

getValue()가 this.state.value를 반환하는 것을 테스트하는 단위 테스트를 만듭니다.
단위 테스트를 작성해 봅시다!

트윗을 읽으면 Kent가 "테스트에서 렌더링하는 항목의 ref를 사용하여 react-testing-library로 그렇게 할 수 있습니다."라고 말한 것을 알았습니다.

custom-cell.test.js에서:

import React from "react";
import { render } from "react-testing-library";
import CustomCell from "../custom-cell";

test("that getData returns this.state.data", () => {
  const ref = React.createRef();
  render(<CustomCell ref={ref} />);
  expect(ref.current.getValue()).toEqual(ref.current.state.value);
});

이제 우리는 누군가가 어떤 이유로든 getValue를 제거하면 실패하고 귀하는 보호된다는 것을 알고 있습니다.

다시 말하지만, 이 작업을 수행해야 하는 매우 드문 경우가 있으므로 이 작업을 수행해야 하는지 여부를 두 번, 어쩌면 세 번까지 생각하십시오.

여기에서 사용 가능한 소스 코드: https://github.com/mcrowder65/rtl-testing-implementation-details