add some tests for etherscan link

src/components/etherscan-link/etherscan-link.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from "@testing-library/react";
+import * as React from "react";
+import { EtherscanLink } from ".";
+import { EthereumChainIds } from "../../utils/web3";
+
+test("It renders a link with the text", () => {
+  render(
+    <EtherscanLink text="foo" chainId={EthereumChainIds.Mainnet} tx="tx" />
+  );
+  expect(screen.getByText("foo")).toBeInTheDocument();
+});
+
+test("It renders a link with the tx hash if no text is provided", () => {
+  render(<EtherscanLink chainId={EthereumChainIds.Mainnet} tx="tx" />);
+  expect(screen.getByText("tx")).toBeInTheDocument();
+});
+
+test("It renders a link with the address if no text is provided", () => {
+  render(
+    <EtherscanLink chainId={EthereumChainIds.Mainnet} address="address" />
+  );
+  expect(screen.getByText("address")).toBeInTheDocument();
+});
+
+test("It links to etherscan if network is mainnet", () => {
+  render(
+    <EtherscanLink chainId={EthereumChainIds.Mainnet} address="address" />
+  );
+  expect(screen.getByTestId("etherscan-link")).toHaveAttribute(
+    "href",
+    "https://etherscan.io/address/address"
+  );
+});
+
+test("It links to ropsten etherscan if network is ropsten", () => {
+  render(
+    <EtherscanLink chainId={EthereumChainIds.Ropsten} address="address" />
+  );
+  expect(screen.getByTestId("etherscan-link")).toHaveAttribute(
+    "href",
+    "https://ropsten.etherscan.io/address/address"
+  );
+});

src/components/etherscan-link/etherscan-link.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { EthereumChainId } from "../../utils/web3";
 
 const etherscanUrls: Record<EthereumChainId, string> = {
@@ -35,7 +36,9 @@ export const EtherscanLink = ({
 }: EtherscanLinkProps) => {
   let hash: string;
   let txLink: string | null;
-  const createLink = etherscanLinkCreator(chainId);
+  const createLink = React.useMemo(() => etherscanLinkCreator(chainId), [
+    chainId,
+  ]);
 
   if ("tx" in props) {
     hash = props.tx;
@@ -54,6 +57,7 @@ export const EtherscanLink = ({
 
   return (
     <a
+      data-testid="etherscan-link"
       href={txLink}
       target="_blank"
       rel="noreferrer"

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "lib": ["dom", "dom.iterable", "ES2020"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "ES2020"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -16,8 +20,15 @@
     "jsx": "react-jsx",
     "declaration": true,
     "emitDeclarationOnly": true,
-    "declarationDir": "dist/types"
+    "declarationDir": "dist/types",
+    "noEmit": true
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "**/*.stories.tsx", "**/*.test.tsx"]
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "**/*.stories.tsx",
+    "**/*.test.tsx"
+  ]
 }