Steve Galili
2f4568a29b
* create a Jotai examples dir in cookbook with related utils, add state management recipes dir * add docs with examples * extract state from component to state, utils, simplify types and custom render func. * refactor: tweaks & cleanup * make cookbook app runnable * update yarn.lock file * fix TS issue and spelling * remove duplicate files and adjust testMatch in config to ensure no utils test run --------- Co-authored-by: stevegalili <steve.galili@mywheels.nl> refactor: tweak cookbook (#1636) * refactor: move files around * refactor: simplify * chore: remove custom fonts * chore: tweak eslint * chore: update yarn.lock
2.3 KiB
Custom render function
Summary
RNTL exposes the render function as the primary entry point for tests. If you make complex, repeating setups for your tests, consider creating a custom render function. The idea is to encapsulate common setup steps and test wiring inside a render function suitable for your tests.
Example
// ...
interface RenderWithProvidersProps {
user?: User | null;
theme?: Theme;
}
export function renderWithProviders<T>(
ui: React.ReactElement<T>,
options?: RenderWithProvidersProps
) {
return render(
<UserProvider.Provider value={options?.user ?? null}>
<ThemeProvider.Provider value={options?.theme ?? 'light'}>{ui}</ThemeProvider.Provider>
</UserProvider.Provider>
);
}
import { screen } from '@testing-library/react-native';
import { renderWithProviders } from '../test-utils';
// ...
test('renders WelcomeScreen with user', () => {
renderWithProviders(<WelcomeScreen />, { user: { name: 'Jar-Jar' } });
expect(screen.getByText(/hello Jar-Jar/i)).toBeOnTheScreen();
});
test('renders WelcomeScreen without user', () => {
renderWithProviders(<WelcomeScreen />, { user: null });
expect(screen.getByText(/hello stranger/i)).toBeOnTheScreen();
});
Example full source code.
More info
Additional params
A custom render function might accept additional parameters to allow for setting up different start conditions for a test, e.g., the initial state for global state management.
test('renders SomeScreen for logged in user', () => {
renderScreen(<SomeScreen />, { state: loggedInState });
// ...
});
Multiple functions
Depending on the situation, you may declare more than one custom render function. For example, you have one function for testing application flows and a second for testing individual screens.
function renderNavigator(ui, options);
function renderScreen(ui, options);
Async function
Make it async if you want to put some async setup in your custom render function.
test('renders SomeScreen', async () => {
await renderWithAsync(<SomeScreen />);
// ...
});