Data Test ID Explainer

app.tsx

const H1 = ({ children }) => {
  return <h1>{children}</h1>;
};

const Checkbox = ({ dataTestId }) => {
  return <input type="checkbox" data-testid={dataTestId} />;
};

export default function App() {
  return (
    <div className="App">
      <h1 data-test-id="headline">Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input data-testid="checkbox" type="checkbox" />
      <Checkbox />
      <H1 data-test-id="world">Hello world</H1>
    </div>
  );
}