反応テストライブラリによる実現詳細のテスト方法

あなたの反応成分をテストするために酵素を使用している場合は、できるだけ早く反応テストライブラリへの切り替えを考慮する必要があります、そのAPIは直感的で使いやすいです、そしてそれはあなたのエンドユーザーがアプリケーションを使用する方法でテストを書くことを奨励しています.
それが言われていると、反応テストライブラリを使用してテストを記述すると、コンポーネントの実装詳細をテストする方法を直接公開しません.酵素で、実装の詳細をテストするのは簡単です.実装の詳細.
私は実装の詳細をテストするのに意味がある奇妙なシナリオを持っていました、しかし、私は酵素でそうする方法を知っていたので、私はテストライブラリの著者、ケントC .ドッズに反応するために、私の懸念を記載しているつぶやきを作りました.ここで利用できるつぶやき
それで、私はこれを成し遂げる方法を見つけるために出発しました!
私が使用していた特定のユースケースは、Agグリッドでしたので、ここでも再現したかったです.次のコードで簡単なグリッドを作ろう

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;

ここでは、ローカルの状態値に初期のプロップ値とSYNCを取るローカル状態値を設定していることに注意してください.閉じるこの動画はお気に入りから削除されています.getValue 完全に不要ですが、それは任意の値を提供していません!編集を開始するときに、現在、どのようなAGグリッドを見てみましょうgetValue 削除:

編集が完了したら、値が消えます!これは、Ag GridがGetValueを呼び出して編集したら最終値を取得するため、値が状態に格納されていることを知りません.したがって、このコードが動作することを保証するためには3つのことがあります.

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その単体テストを書きましょう!

あなたがつぶやきを読むならば、あなたはケントが言ったことに気がつきました、「あなたは、あなたがテストで何を書くかについて、REFを使っている反応テストライブラリでそれをすることができます.」ではそれをしましょう.
カスタムセルで.テスト.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 何らかの理由で、それは失敗し、保護されます.
再び、あなたがこれをする必要がある非常にまれなケースがあるので、あなたがこれをするべきであるかどうかに関係なく、2回、多分thriceを考えてください.
ここで利用できるソースコードhttps://github.com/mcrowder65/rtl-testing-implementation-details