{"id":12985,"library":"component-test-setup","title":"Standardized React Component Test Setup","description":"component-test-setup is a utility library designed to standardize boilerplate code for setting up React component tests. It serves as a thin wrapper over popular testing libraries like React Testing Library (RTL) and Enzyme, abstracting away common patterns for initializing components with default props. The current stable version is 0.3.3, indicating it's in pre-1.0 development, but actively maintained by Codecademy. Its primary differentiator is providing a consistent API (`setupRtl`, `setupEnzyme`) that returns a render function (`renderView`, `renderWrapper`) and an `update` method, reducing redundancy across test files. It simplifies managing initial and updated props for both Enzyme and RTL-based tests, allowing developers to focus on component logic rather than test setup specifics.","status":"active","version":"0.3.3","language":"javascript","source_language":"en","source_url":"https://github.com/Codecademy/component-test-setup","tags":["javascript","component","enzyme","react","rtl","test","typescript"],"install":[{"cmd":"npm install component-test-setup","lang":"bash","label":"npm"},{"cmd":"yarn add component-test-setup","lang":"bash","label":"yarn"},{"cmd":"pnpm add component-test-setup","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This library is for testing React components and requires React to be a peer dependency of your project.","package":"react","optional":false},{"reason":"One of the two primary testing libraries this package wraps. Required if using `setupRtl`.","package":"@testing-library/react","optional":true},{"reason":"One of the two primary testing libraries this package wraps. Required if using `setupEnzyme`.","package":"enzyme","optional":true},{"reason":"Enzyme requires a corresponding adapter for your React version (e.g., react-18, react-17, react-16) to function correctly.","package":"enzyme-adapter-react-18","optional":true}],"imports":[{"note":"The library ships with TypeScript types and is primarily consumed via ES Modules.","wrong":"const setupRtl = require('component-test-setup').setupRtl;","symbol":"setupRtl","correct":"import { setupRtl } from 'component-test-setup';"},{"note":"Both setup functions are named exports from the root package.","wrong":"import setupEnzyme from 'component-test-setup/enzyme';","symbol":"setupEnzyme","correct":"import { setupEnzyme } from 'component-test-setup';"},{"note":"While `component-test-setup` provides an `.options` method for RTL, the `RenderOptions` type itself comes from `@testing-library/react`.","symbol":"RenderOptions","correct":"import { RenderOptions } from '@testing-library/react';"}],"quickstart":{"code":"import { setupRtl } from 'component-test-setup';\nimport React from 'react';\nimport { render, screen } from '@testing-library/react';\nimport '@testing-library/jest-dom';\n\ninterface MyComponentProps {\n  title: string;\n  count?: number;\n  onClick?: () => void;\n}\n\nconst MyComponent: React.FC<MyComponentProps> = ({ title, count = 0, onClick }) => (\n  <div>\n    <h1>{title}</h1>\n    <p>Current count: {count}</p>\n    <button onClick={onClick}>Increment</button>\n  </div>\n);\n\nconst renderView = setupRtl(MyComponent, {\n  title: 'Default Title',\n  count: 0\n});\n\ndescribe('MyComponent with setupRtl', () => {\n  it('renders with default props', () => {\n    const { view, props } = renderView();\n    expect(screen.getByRole('heading', { name: 'Default Title' })).toBeInTheDocument();\n    expect(screen.getByText('Current count: 0')).toBeInTheDocument();\n  });\n\n  it('renders with overridden props', () => {\n    const { view, props } = renderView({ title: 'Custom Title', count: 5 });\n    expect(screen.getByRole('heading', { name: 'Custom Title' })).toBeInTheDocument();\n    expect(screen.getByText('Current count: 5')).toBeInTheDocument();\n  });\n\n  it('updates props using the update method', () => {\n    const { view, update } = renderView({ title: 'Initial', count: 1 });\n    expect(screen.getByText('Current count: 1')).toBeInTheDocument();\n\n    update({ count: 2 });\n    expect(screen.getByText('Current count: 2')).toBeInTheDocument();\n\n    update({ title: 'Updated' });\n    expect(screen.getByRole('heading', { name: 'Updated' })).toBeInTheDocument();\n  });\n});","lang":"typescript","description":"This quickstart demonstrates how to use `setupRtl` to create a `renderView` function for a simple React component, showing initial rendering with default and overridden props, and then how to use the `update` method to simulate prop changes for testing component lifecycle or hook effects."},"warnings":[{"fix":"After calling the `update` method, do not rely on the `props` object for the latest values. Instead, retrieve the updated state or content directly from the `view` (RTL) or `wrapper` (Enzyme) via queries or methods.","message":"The `props` object returned by the `renderView` or `renderWrapper` function captures the props used for the *initial* render. It does not automatically update if you later call the `update` method.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure you install the necessary peer dependencies (e.g., `npm install --save-dev @testing-library/react` or `npm install --save-dev enzyme enzyme-adapter-react-18`) based on your chosen testing approach.","message":"This library is a thin wrapper and requires you to have either `@testing-library/react` or `enzyme` (along with its appropriate adapter) installed as dev dependencies in your project. It does not bundle these testing frameworks.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Always provide a complete set of desired props to `update` if you need to ensure the exact prop state, or carefully manage partial updates knowing they will be shallowly merged.","message":"The `update` method on the returned render function (`renderView` for RTL, `renderWrapper` for Enzyme) merges new props shallowly with previously provided props. Be aware of potential unintended side effects if you expect deep merging or complete replacement.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}