← Усі задачіReact · Middle

Тема через Context

Напишіть ThemeProvider і хук useTheme. Провайдер зберігає тему - "light" (за замовчуванням) або "dark" - і дає її всім компонентам усередині. useTheme() повертає { theme, toggleTheme }, де toggleTheme перемикає тему.

Усі компоненти під одним провайдером бачать ту саму тему. Виклик useTheme поза провайдером має кидати помилку, у тексті якої є ThemeProvider.

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

function useTheme() {
  // ...
}

Ctrl+Enter - запустити тести. Tab - відступ; щоб вийти з редактора клавіатурою, натисніть Esc, а потім Tab. Код зберігається в цьому браузері.

Тести (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');