を使用して、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 として渡す必要がありますか? 参照を嘲笑する必要がありますか?どのように?
前もって感謝します