← Wszystkie zadaniaReact · Middle

Motyw przez Context

Napisz ThemeProvider i hook useTheme. Provider przechowuje motyw - "light" (domyślnie) albo "dark" - i udostępnia go wszystkim komponentom wewnątrz. useTheme() zwraca { theme, toggleTheme }, gdzie toggleTheme przełącza motyw.

Wszystkie komponenty pod jednym providerem widzą ten sam motyw. Wywołanie useTheme poza providerem musi rzucić błąd, w którego treści jest ThemeProvider.

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

function useTheme() {
  // ...
}

Ctrl+Enter uruchamia testy. Tab robi wcięcie; aby wyjść z edytora klawiaturą, naciśnij Esc, a potem Tab. Kod zapisuje się w tej przeglądarce.

Testy (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');