Registry / testing / component-test-setup

component-test-setup

library0.3.3jsnpmunverified

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.

testing

npm install component-test-setup

github ↗package ↗

INSTALL

IMPORT

SIG · COMPONENT-TEST-SET

component-test-setup

testingjavascriptv0.3.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

setupRtl

✓ import { setupRtl } from 'component-test-setup';

✗ const setupRtl = require('component-test-setup').setupRtl;

The library ships with TypeScript types and is primarily consumed via ES Modules.

setupEnzyme

✓ import { setupEnzyme } from 'component-test-setup';

✗ import setupEnzyme from 'component-test-setup/enzyme';

Both setup functions are named exports from the root package.

RenderOptions

✓ import { RenderOptions } from '@testing-library/react';

While `component-test-setup` provides an `.options` method for RTL, the `RenderOptions` type itself comes from `@testing-library/react`.

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.

import { setupRtl } from 'component-test-setup'; import React from 'react'; import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; interface MyComponentProps { title: string; count?: number; onClick?: () => void; } const MyComponent: React.FC<MyComponentProps> = ({ title, count = 0, onClick }) => ( <div> <h1>{title}</h1> <p>Current count: {count}</p> <button onClick={onClick}>Increment</button> </div> ); const renderView = setupRtl(MyComponent, { title: 'Default Title', count: 0 }); describe('MyComponent with setupRtl', () => { it('renders with default props', () => { const { view, props } = renderView(); expect(screen.getByRole('heading', { name: 'Default Title' })).toBeInTheDocument(); expect(screen.getByText('Current count: 0')).toBeInTheDocument(); }); it('renders with overridden props', () => { const { view, props } = renderView({ title: 'Custom Title', count: 5 }); expect(screen.getByRole('heading', { name: 'Custom Title' })).toBeInTheDocument(); expect(screen.getByText('Current count: 5')).toBeInTheDocument(); }); it('updates props using the update method', () => { const { view, update } = renderView({ title: 'Initial', count: 1 }); expect(screen.getByText('Current count: 1')).toBeInTheDocument(); update({ count: 2 }); expect(screen.getByText('Current count: 2')).toBeInTheDocument(); update({ title: 'Updated' }); expect(screen.getByRole('heading', { name: 'Updated' })).toBeInTheDocument(); }); });

Debug

Known issues

gotchaThe `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.

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.

affects: >=0.1.0

gotchaThis 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.

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.

affects: >=0.1.0

gotchaThe `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.

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.

affects: >=0.1.0

Upgrade

Version history

0.3.3latest on npm

Audit

Dependencies

reactrequiredThis library is for testing React components and requires React to be a peer dependency of your project.

@testing-library/reactoptionalOne of the two primary testing libraries this package wraps. Required if using `setupRtl`.

enzymeoptionalOne of the two primary testing libraries this package wraps. Required if using `setupEnzyme`.

enzyme-adapter-react-18optionalEnzyme requires a corresponding adapter for your React version (e.g., react-18, react-17, react-16) to function correctly.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Codecademy/component-test-setup ↗

packagehttps://www.npmjs.com/package/component-test-setup ↗