{"id":15773,"library":"ra-test","title":"React-Admin Test Utilities","description":"The `ra-test` package provides specialized utilities for efficiently testing applications built upon `react-admin`, a widely adopted frontend framework for developing administrative interfaces with React. As of early 2026, the current stable version of `react-admin` (and consequently `ra-test`, which is part of the same monorepo) is 5.14.6, characterized by a continuous release cadence with frequent minor updates and bug fixes. This library is specifically tailored to address the complexities of testing `react-admin` components, particularly custom views or logic that depend on the framework's intricate Redux store and React Router context. Unlike general React testing libraries, `ra-test` offers pre-configured wrappers like `TestContext` and helpers such as `renderWithRedux` that seamlessly provide the necessary `react-admin` environment, enabling developers to focus on the specific logic of their custom components rather than boilerplate setup. It differentiates itself by providing a robust, opinionated testing environment integrated deeply with `react-admin`'s architecture, making it easier to mock the `react-admin` state and dispatch actions for focused unit or integration tests within the ecosystem.","status":"active","version":"3.19.12","language":"javascript","source_language":"en","source_url":"https://github.com/marmelab/react-admin","tags":["javascript","typescript"],"install":[{"cmd":"npm install ra-test","lang":"bash","label":"npm"},{"cmd":"yarn add ra-test","lang":"bash","label":"yarn"},{"cmd":"pnpm add ra-test","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for all React components.","package":"react","optional":false},{"reason":"Underlying state management library for react-admin.","package":"redux","optional":false},{"reason":"The foundational react-admin package, providing core hooks and context.","package":"ra-core","optional":false},{"reason":"Used for rendering React components into the DOM, essential for testing utilities like @testing-library/react.","package":"react-dom","optional":false},{"reason":"Connects React components to the Redux store provided by react-admin.","package":"react-redux","optional":false},{"reason":"Core routing library, used internally by react-admin.","package":"react-router","optional":false},{"reason":"DOM-specific bindings for React Router, used by react-admin for browser routing.","package":"react-router-dom","optional":false}],"imports":[{"note":"The primary component for wrapping react-admin components to provide necessary context for testing. ESM imports are standard.","wrong":"const { TestContext } = require('ra-test');","symbol":"TestContext","correct":"import { TestContext } from 'ra-test';"},{"note":"A helper function that combines TestContext setup with @testing-library/react's render, exported as a named import.","wrong":"import renderWithRedux from 'ra-test';","symbol":"renderWithRedux","correct":"import { renderWithRedux } from 'ra-test';"},{"note":"Provides a default Redux store configuration that can be used or extended for tests, useful with enableReducers.","symbol":"defaultStore","correct":"import { defaultStore } from 'ra-test';"}],"quickstart":{"code":"import * as React from \"react\";\nimport { TestContext } from 'ra-test';\nimport { render, fireEvent, screen } from '@testing-library/react';\n\n// Imagine this is your custom react-admin Edit view component\nconst MyCustomEditView = ({ basePath, id, resource }) => {\n    const handleClick = () => {\n        // In a real app, this might dispatch an action or navigate\n        console.log(`Action for resource ${resource} with ID ${id} at ${basePath}`);\n    };\n    return (\n        <div data-testid=\"my-custom-edit-view\">\n            <h1>Edit {resource} #{id}</h1>\n            <p>Base Path: {basePath}</p>\n            <button onClick={handleClick}>Perform Action</button>\n        </div>\n    );\n};\n\ndescribe('MyCustomEditView', () => {\n    const defaultEditProps = {\n        basePath: '/posts',\n        id: '123',\n        resource: 'posts',\n    };\n\n    it('should render the custom edit view with provided props', () => {\n        render(\n            <TestContext enableReducers>\n                <MyCustomEditView {...defaultEditProps} />\n            </TestContext>\n        );\n        expect(screen.getByText('Edit posts #123')).toBeInTheDocument();\n        expect(screen.getByText('Base Path: /posts')).toBeInTheDocument();\n    });\n\n    it('should simulate a button click', () => {\n        const consoleSpy = jest.spyOn(console, 'log');\n        render(\n            <TestContext enableReducers>\n                <MyCustomEditView {...defaultEditProps} />\n            </TestContext>\n        );\n        fireEvent.click(screen.getByText('Perform Action'));\n        expect(consoleSpy).toHaveBeenCalledWith('Action for resource posts with ID 123 at /posts');\n        consoleSpy.mockRestore();\n    });\n});","lang":"typescript","description":"This quickstart demonstrates how to use `TestContext` to wrap a custom `react-admin` component, providing the necessary Redux and routing contexts for unit testing with `@testing-library/react`. It shows how to pass default props and simulate user interactions."},"warnings":[{"fix":"Ensure your `ra-test` package version matches the major version of your `react-admin` installation (e.g., `react-admin@5.x.x` requires `ra-test@5.x.x`). Upgrade both packages concurrently.","message":"The `ra-test` package versions are tightly coupled with the major versions of `react-admin`. Using `ra-test@3.x.x` with `react-admin@4.x.x` or `5.x.x` will lead to incompatible APIs and runtime errors due to significant changes in `react-admin`'s internal structure and context providers.","severity":"breaking","affected_versions":"<5.0.0"},{"fix":"Focus your testing efforts on end-to-end scenarios for core application flows and on unit/integration testing your *custom* React components, mocking `react-admin`'s data providers or using `TestContext` for dependencies.","message":"Direct unit testing of most `react-admin`'s built-in components is generally discouraged by the framework maintainers. `ra-test` is primarily for custom components that integrate with `react-admin`'s context, rather than testing react-admin's internals.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Always wrap your `react-admin` dependent components with `TestContext` or use the `renderWithRedux` helper. Remember to enable reducers if your component relies on Redux state changes (`<TestContext enableReducers />`).","message":"`react-admin` components heavily rely on React Context for Redux, React Router, and internal framework state. Without wrapping components under test in `TestContext` (or `renderWithRedux`), they will fail to initialize or function correctly.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"If your component dispatches Redux actions or relies on Redux state updates, always pass the `enableReducers` prop to `TestContext`: `<TestContext enableReducers>{...}</TestContext>`.","message":"The use of `TestContext` without `enableReducers` will prevent Redux actions from being processed, making tests for components that dispatch actions ineffective. While not strictly deprecated, it's a common oversight.","severity":"deprecated","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure the component under test is wrapped within `<TestContext>` or rendered using `renderWithRedux`. For example: `render(<TestContext><MyComponent /></TestContext>)`","cause":"`react-admin` components require a Redux store context, which `TestContext` provides, but this error indicates it's missing.","error":"Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>"},{"fix":"The component depending on `react-router` hooks or components must be rendered inside `TestContext`, which sets up the necessary `react-router` context. For example: `render(<TestContext><MyComponentThatUsesRouter /></TestContext>)`","cause":"`react-admin` components often use React Router hooks, requiring a Router context that `TestContext` provides.","error":"Error: useLocation() may be used only in the context of a <Router> component."},{"fix":"If spying on `dispatch`, ensure you use the render prop pattern for `TestContext` to access the `store` object: `<TestContext>{({ store }) => { dispatchSpy = jest.spyOn(store, 'dispatch'); return <MyComponent />; }}</TestContext>`. Also, ensure `enableReducers` is set if state changes are expected.","cause":"Attempting to spy on `store.dispatch` or interact with the Redux store when `TestContext` has not yet exposed it or when `enableReducers` is not set.","error":"TypeError: Cannot read properties of undefined (reading 'dispatch') or TypeError: Cannot read property 'dispatch' of undefined"}],"ecosystem":"npm"}