React Test Tagging - Basic Logic

AnyComponent.tsx

export default AnyComponent(props: AnyComponentProps) {
  const tagger = useTestTagger();

  return (
    <div data-id={tagger('search-input')}>
      Anything
    </div>
  );
};

App.tsx

export function App() {

  return (
    {/* Add other providers here... */}
    <TestProvider>
      {children}
    </TestProvider>
  );
};

Test.tsx

//modules
import type { ReactNode } from 'react';
import { createContext } from 'react';

export type TestContextProps = {
  name: string,
  prefix: stirng
};

export type TestProviderProps = {
  name?: string,
  prefix?: stirng,
  children: ReactNode
};

export const TestContext = createContext<TestContextProps>({
  name: 'data-id',
  prefix: 'action'
});
  
// (this is what to put in app.tsx)
export function TestProvider(props: TestProviderProps) {
  const { children, name = 'data-id', prefix = 'action' } = props;
  return (
    <TestContext.Provider value={{ name, prefix }}>
      {children}
    </TestContext.Provider>
  );
};
  
export function useTesting() {
  return useContext(TestContext);
};
  
export function useTestTagger() {
  const context = useTesting();
  return (tag: string) => `${context.prefix}-${tag}`;
}