{"library":"souvlaki","title":"Souvlaki: Composable React Test Wrappers","type":"library","description":"Souvlaki is a TypeScript-first library designed to simplify testing React components that rely heavily on context or multiple providers. It offers composable utilities to create and combine test wrappers, abstracting away the boilerplate often associated with setting up complex testing environments for components using Redux, React Router, Apollo, or custom contexts. The package is currently at version 0.3.1. While the author notes it's 'more or less finished' and doesn't receive regular updates, it is actively used and considered maintained, implying a stable but slow release cadence. Its key differentiator is simplifying the management of multiple providers in tests, offering a cleaner alternative to manually creating custom `render` functions or nesting providers directly in every test, thereby promoting more maintainable and readable test suites when used with React Testing Library.","language":"javascript","status":"maintenance","last_verified":"Sun Apr 19","install":{"commands":["npm install souvlaki"],"cli":null},"imports":["import { createWrapper } from 'souvlaki';","import { createContextWrapper } from 'souvlaki';","import { ApolloWrapper } from 'souvlaki/lib/apollo';"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/souvlaki","openapi_spec":null,"status_page":null,"smithery":null},"quickstart":{"code":"import React, { createContext, useContext } from 'react';\nimport { render, screen } from '@testing-library/react';\nimport { createWrapper, createContextWrapper } from 'souvlaki';\n\n// 1. Define a simple context\ninterface ThemeContextType { theme: string; toggleTheme: () => void; }\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\n\n// 2. Create a provider for the context\nconst ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const [theme, setTheme] = React.useState('light');\n  const toggleTheme = () => setTheme(prev => (prev === 'light' ? 'dark' : 'light'));\n  return (\n    <ThemeContext.Provider value={{ theme, toggleTheme }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n};\n\n// 3. Create a component that consumes the context\nconst ThemeDisplay: React.FC = () => {\n  const context = useContext(ThemeContext);\n  if (!context) return null; // Should not happen in a correctly wrapped test\n  return (\n    <div>\n      <span data-testid=\"current-theme\">Current Theme: {context.theme}</span>\n      <button onClick={context.toggleTheme}>Toggle Theme</button>\n    </div>\n  );\n};\n\n// 4. Create a Souvlaki wrapper for the ThemeProvider\nconst themeSouvlakiWrapper = createContextWrapper(ThemeContext, ThemeProvider);\n\n// 5. Use the wrapper in a test with React Testing Library\ndescribe('ThemeDisplay with Souvlaki wrapper', () => {\n  it('displays the default theme and allows toggling', () => {\n    // Use the souvlaki wrapper directly in render options\n    render(<ThemeDisplay />, { wrapper: themeSouvlakiWrapper });\n\n    expect(screen.getByTestId('current-theme')).toHaveTextContent('Current Theme: light');\n\n    screen.getByRole('button', { name: /toggle theme/i }).click();\n\n    expect(screen.getByTestId('current-theme')).toHaveTextContent('Current Theme: dark');\n  });\n\n  it('can compose multiple wrappers', () => {\n    // Imagine another provider, e.g., for user authentication\n    const AuthContext = createContext<{ user: string }>({ user: 'Guest' });\n    const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n      <AuthContext.Provider value={{ user: 'TestUser' }}>{children}</AuthContext.Provider>\n    );\n    const authSouvlakiWrapper = createContextWrapper(AuthContext, AuthProvider);\n\n    // Compose wrappers using createWrapper\n    const CombinedWrapper = createWrapper(themeSouvlakiWrapper, authSouvlakiWrapper);\n\n    render(<ThemeDisplay />, { wrapper: CombinedWrapper });\n    expect(screen.getByTestId('current-theme')).toHaveTextContent('Current Theme: light');\n  });\n});","lang":"typescript","description":"Demonstrates how to use `createContextWrapper` to provide a React context to a component under test, and how to compose multiple wrappers with `createWrapper` for complex setups.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}