Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
createWrapper
✓ import { createWrapper } from 'souvlaki';
✗ const { createWrapper } = require('souvlaki');
Main utility for composing simple wrappers. Souvlaki ships TypeScript types and is primarily used with ESM imports.
createContextWrapper
✓ import { createContextWrapper } from 'souvlaki';
✗ import createContextWrapper from 'souvlaki';
Specifically designed for creating wrappers from React Contexts. Ensure named import for this utility.
ApolloWrapper
✓ import { ApolloWrapper } from 'souvlaki/lib/apollo';
✗ import { ApolloWrapper } from 'souvlaki';
Example of a specific wrapper (if available) that might be imported from a subpath. Always check documentation for specific wrapper paths.
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.
import React, { createContext, useContext } from 'react';
import { render, screen } from '@testing-library/react';
import { createWrapper, createContextWrapper } from 'souvlaki';
// 1. Define a simple context
interface ThemeContextType { theme: string; toggleTheme: () => void; }
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
// 2. Create a provider for the context
const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [theme, setTheme] = React.useState('light');
const toggleTheme = () => setTheme(prev => (prev === 'light' ? 'dark' : 'light'));
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};
// 3. Create a component that consumes the context
const ThemeDisplay: React.FC = () => {
const context = useContext(ThemeContext);
if (!context) return null; // Should not happen in a correctly wrapped test
return (
<div>
<span data-testid="current-theme">Current Theme: {context.theme}</span>
<button onClick={context.toggleTheme}>Toggle Theme</button>
</div>
);
};
// 4. Create a Souvlaki wrapper for the ThemeProvider
const themeSouvlakiWrapper = createContextWrapper(ThemeContext, ThemeProvider);
// 5. Use the wrapper in a test with React Testing Library
describe('ThemeDisplay with Souvlaki wrapper', () => {
it('displays the default theme and allows toggling', () => {
// Use the souvlaki wrapper directly in render options
render(<ThemeDisplay />, { wrapper: themeSouvlakiWrapper });
expect(screen.getByTestId('current-theme')).toHaveTextContent('Current Theme: light');
screen.getByRole('button', { name: /toggle theme/i }).click();
expect(screen.getByTestId('current-theme')).toHaveTextContent('Current Theme: dark');
});
it('can compose multiple wrappers', () => {
// Imagine another provider, e.g., for user authentication
const AuthContext = createContext<{ user: string }>({ user: 'Guest' });
const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => (
<AuthContext.Provider value={{ user: 'TestUser' }}>{children}</AuthContext.Provider>
);
const authSouvlakiWrapper = createContextWrapper(AuthContext, AuthProvider);
// Compose wrappers using createWrapper
const CombinedWrapper = createWrapper(themeSouvlakiWrapper, authSouvlakiWrapper);
render(<ThemeDisplay />, { wrapper: CombinedWrapper });
expect(screen.getByTestId('current-theme')).toHaveTextContent('Current Theme: light');
});
});
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'theme')
A component under test is trying to access context values (e.g., `theme`) but the necessary provider has not been rendered in the test environment.
fixEnsure you are wrapping your component with the correct Souvlaki wrapper (e.g., `createContextWrapper` or a composed `createWrapper`) when calling `render` from `@testing-library/react`. Pass the wrapper via the `wrapper` option in `render({ wrapper: MyWrapper })`. Invariant Violation: You should not use <Provider> outside a <BrowserRouter>.
This error typically occurs when testing a component that expects to be inside a React Router `BrowserRouter` (or similar router context), but the router wrapper is missing in the test setup.
fixUse Souvlaki's `createWrapper` to include a `BrowserRouter` (or appropriate router) wrapper in your test setup. For example, `createWrapper(routerWrapper, yourOtherWrapper)`. If Souvlaki provides specific router wrappers (e.g., `MemoryRouterWrapper`), use those.
Audit
Dependencies
reactrequiredPeer dependency for building React components.
react-domrequiredPeer dependency for rendering React components in a DOM environment, typically for testing.