← Alle AufgabenReact · Middle

Design mit Context

Schreib einen ThemeProvider und einen Hook useTheme. Der Provider speichert das Design, "light" (Standard) oder "dark", und stellt es jeder Komponente darin bereit. useTheme() liefert { theme, toggleTheme }, wobei toggleTheme das Design umschaltet.

Alle Komponenten unter einem Provider sehen dasselbe Design. Ein Aufruf von useTheme außerhalb des Providers muss einen Fehler werfen, dessen Meldung ThemeProvider enthält.

function ThemeProvider({ children }) {
  // ...
  return children;
}

function useTheme() {
  // ...
}

Strg+Enter führt die Tests aus. Tab rückt ein; um den Editor per Tastatur zu verlassen, drücke Esc und dann Tab. Der Code wird in diesem Browser gespeichert.

Tests (3)

function Probe() {
  const { theme, toggleTheme } = useTheme();
  return <button onClick={toggleTheme}>{theme}</button>;
}
render(<ThemeProvider><Probe /></ThemeProvider>);
expect(screen.getByRole('button').textContent).toBe('light');
fireEvent.click(screen.getByRole('button'));
expect(screen.getByRole('button').textContent).toBe('dark');
fireEvent.click(screen.getByRole('button'));
expect(screen.getByRole('button').textContent).toBe('light');

function Probe() {
  const { theme, toggleTheme } = useTheme();
  return <button onClick={toggleTheme}>{theme}</button>;
}
render(<ThemeProvider><Probe /><Probe /></ThemeProvider>);
fireEvent.click(screen.getAllByRole('button')[0]);
expect(screen.getAllByRole('button').map((b) => b.textContent)).toEqual(['dark', 'dark']);

expect(() => renderHook(() => useTheme())).toThrow('ThemeProvider');