2

を使用して、React でコンポーネントのスナップショットを作成したいと考えていますreact-test-renderer。テストしたいコンポーネントはref、別のコンポーネントから を受け取ります。私がテストしているコンポーネントは、参照を小道具として渡すコンポーネントによって実装された関数に依存しています。

import React from "react";
import { makeStyles, Paper, Typography } from "@material-ui/core";
import { INodeInfoProps } from "./interfaces";

const useStyles = makeStyles({
  container: {
    position: "absolute",
    padding: 10,
    maxHeight: 600,
    width: 400,
    overflowWrap: "break-word",
    "& p": {
      fontSize: 12,
    },
  },
  channels: {
    display: "flex",
  },
  channelsComponent: {
    marginLeft: 5,
  },
});

export const NodeInfo: React.FC<INodeInfoProps> = ({ graphRef, info }) => {
  const classes = useStyles();

  const getDivCoords = () => {
    if (graphRef.current) {
      const nodeCoordinates = graphRef.current.graph2ScreenCoords(
        info?.x || 0,
        info?.y || 0,
        info?.z || 0
      );

      return {
        top: nodeCoordinates.y + 20,
        left: nodeCoordinates.x,
      };
    }
    return { top: 0, left: 0 };
  };

  if (info && graphRef.current) {
    return (
      <Paper
        className={classes.container}
        style={{
          top: getDivCoords().top,
          left: getDivCoords().left,
        }}
      >
        <Typography>Pubkey: {info.publicKey}</Typography>
        <Typography>Alias: {info.alias}</Typography>
      </Paper>
    );
  }

  return null;
};

そのため、関数graph2ScreenCoordsは、参照がコンポーネントによって小道具によって受信されるコンポーネントに実装されます。

テスト コンポーネントは次のようになります。

import React from "react";
import renderer from "react-test-renderer"
import {NodeInfo} from "../index";

it('should render each node info', () => {
    const info = {
        publicKey: "test123",
        alias: "test",
        color: "#fff",
        visible: true,
        links: [
            {
                channelId: "123",
                node1: "test123",
                node2: "test345",
                capacity: "10000",
                color: "#fff"
            }
        ]
    }
    const tree = renderer.create(<NodeInfo graphRef={} info={info}/>).toJSON()
    expect(tree).toMatchSnapshot();
})

しかし、関数にアクセスできるように、参照をテスト コンポーネントに渡す必要がありますgraph2ScreenCoords

どのように正しい方法にすればよいですか?テストでコンポーネントをレンダリングし、ref を作成して props として渡す必要がありますか? 参照を嘲笑する必要がありますか?どのように?

前もって感謝します

4

0 に答える 0