testing

15 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Testing Expo Router with renderRouter

Expo Router provides a testing utility called renderRouter through the expo-router/testing-library submodule. It is built on top of @testing-library/react-native and allows you to create in-memory Expo Router apps pre-configured for testing. renderRouter extends the functionality of the standard render function and returns the same query object, making it compatible with screen and the standard query API to locate components.

Testing setup requirements for Expo Router

Before using expo-router/testing-library, ensure jest-expo is set up according to the Unit testing with Jest documentation and @testing-library/react-native is installed and configured in your project.

Test file location requirement

Do not put test files inside the app directory when using Expo Router. All files inside the app directory must be either routes or layout files. Instead, use the __tests__ directory or a separate directory for test files.

renderRouter with inline mock filesystem object

renderRouter(mock: Record<string, ReactComponent>, options: RenderOptions) accepts an object where keys are mock filesystem paths. Do not use leading relative (./) or absolute (/) notation when defining these paths and exclude file extensions. The function accepts options including initialUrl to set an initial route for simulating deep-linking.

renderRouter with inline mock filesystem array

renderRouter(mock: string[], options: RenderOptions) accepts an array of strings to create an inline mock filesystem with null components ({ default: () => null }). This is useful for testing scenarios where you do not need to test the output of a route.

renderRouter with fixture directory path

renderRouter(fixturePath: string, options: RenderOptions) accepts a directory path to mock an existing fixture. The provided path must be relative to the current test file.

renderRouter with fixture directory and overrides

renderRouter({ appDir: string, overrides: Record<string, ReactComponent>}, options: RenderOptions) allows combining directory path and inline-mocking methods simultaneously. The appDir parameter takes a string representing a pathname to a directory, and the overrides parameter is an inline mock that can override specific paths within the appDir. This combination allows fine-tuned control over the mock environment.

Jest matcher toHavePathname

expect(screen).toHavePathname(pathname: string) asserts the current pathname against a given string. The matcher uses the value of the usePathname hook on the current screen.

Jest matcher toHavePathnameWithParams

expect(screen).toHavePathnameWithParams(pathname: string) asserts the current pathname including URL parameters against a given string. This is useful to assert the appearance of URL in a web browser.

Jest matcher toHaveSegments

expect(screen).toHaveSegments(segments: string[]) asserts the current segments against an array of strings. The matcher uses the value of the useSegments hook on the current screen.

Jest matcher useGlobalSearchParams

expect(screen).useGlobalSearchParams(params: object) asserts the current global URL parameters against an object. The matcher uses the value of the useGlobalSearchParams hook on the current screen.

Jest matcher toHaveRouterState

expect(screen).toHaveRouterState(state: object) is an advanced matcher that asserts the current router state against an object. It can be used to verify router state properties such as routes and their associated paths.

renderRouter with array mock example

Example: renderRouter(['index', 'directory/a', '(group)/b'], { initialUrl: '/directory/a' }); expect(screen).toHavePathname('/directory/a');

renderRouter with fixture directory example

Example: renderRouter('./my-test-fixture');

renderRouter with fixture directory and overrides example

Example: const MockAuthLayout = jest.fn(() => <View />); renderRouter({ appDir: './my-test-fixture', overrides: { 'directory/(auth)/_layout': MockAuthLayout } });

Give your agent this brain