{"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.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install ra-test"],"cli":null},"imports":["import { TestContext } from 'ra-test';","import { renderWithRedux } from 'ra-test';","import { defaultStore } from 'ra-test';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}