Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Intial props not working when rendering a hook (or I've done something wrong.)

Aperta
  • Qualcosa non va?
#1,277 5 commenti 2 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
testing

Direzione di ricerca

Inizia dalla chiamata a renderHook e dal wrapper nella riproduzione fornita, quindi esamina come initialProps viene passato al wrapper. Esegui nuovamente il test custom-step e conferma che il wrapper riceva inizialmente step 2, riceva step 8 dopo rerender e che le asserzioni su count abbiano esito positivo.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

BREAKING CHANGE enhancement 
    "@testing-library/dom": "^8.13.0",
    "@testing-library/jest-dom": "^6.1.3",
    "@testing-library/react": "13.3.0",
    "@testing-library/react-hooks": "^8.0.1",
    "@testing-library/user-event": "^14.4.3",
     "react": "^18.2.0",
    "react-dom": "^18.2.0",   
    "react-test-renderer: 18.1.0)"
    "`node` version: 18"
    "`pnpm` (or `yarn`) version: 7"
Relevant code or config:

In the Reproduction details.
Taking the example from the docs, logged the initial props;

const CounterStepContext = createContext(1);

export const CounterStepProvider = ({
  step,
  children,
}: {
  step: number;
  children: React.ReactNode;
}) => {
  console.log({ step });
  return (
    <CounterStepContext.Provider value={step}>
      {children}
    </CounterStepContext.Provider>
  );
};

export function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  const step = useContext(CounterStepContext);
  const increment = useCallback(() => setCount((x) => x + step), [step]);
  const reset = useCallback(() => setCount(initialValue), [initialValue]);
  return { count, increment, reset };
}

test("should use custom step when incrementing", () => {
  const wrapper = ({
    children,
    step,
  }: {
    step: number;
    children: React.ReactNode;
  }) => <CounterStepProvider step={step}>{children}</CounterStepProvider>;
  const { result, rerender } = renderHook(() => useCounter(), {
    wrapper,
    initialProps: {
      step: 2,
    },
  });

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(2);

  /**
   * Change the step value
   */
  rerender({ step: 8 });

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(10);
});

  console.log
    { step: undefined }
What you did:

Trying to use initialProps with the renderHook

What happened:

Initial props are not being passed.
No obvious error message, component just isn't receiving the props.

Reproduction:
Problem description:
Suggested solution:
Lingua principale
JavaScript
Stelle
19.7k
Fork
1.2k
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di testing-library/react-testing-library

Tutte le issue di testing-library/react-testing-library

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.