Socket
Socket
Sign inDemoInstall

react-test-wrapper

Package Overview
Dependencies
2
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-test-wrapper

A set of classes to make setting up React components for unit tests easy.


Version published
Maintainers
1
Created

Readme

Source

React Test Wrapper

The intention of this package is to provide a simple, clean way of setting up your React components for unit tests, to reduce test setup boilerplate code, whilst automatically inferring your component TypeScript definitions (props, instance methods etc) to avoid needing to manually import types and retype definitions in your tests and also providing better inline IDE autocomplete/validation support.

The classes provided are also able to be extended to add to the API that's available, if your project requires additional functionality as part of your component test setup.

The concept behind it is that you can create a single instance of the wrapper class at the top of your test file and define the defaults to use there, then in each test scenario you can reference the single instance and define the scenario-specific props/children etc. chaining the public methods, then finally calling the render method to return the rendering result.

The scenario-specific definitions are reset each time you call render, which will ensure it reverts back to only the defaults set at the top and prevents scenario data from leaking between tests.

Example

import { Wrapper } from "react-test-wrapper";

const component = new Wrapper(SomeComponent)
  .withDefaultChildren(<div className="Child" />)
  .withDefaultProps({
    prop1: "Default value 1",
    prop2: "Default value 2"
  });

describe("when testing a scenario", () => {
  const { getByText } = component
    .withProps({
      prop1: "Scenario value 1"
    })
    .render();

  it("uses the scenario-specific value for prop1", () => {
    expect(getByText("Scenario value 1")).toBeDefined();
  });

  it("uses the default value for prop2", () => {
    expect(getByText("Default value 2")).toBeDefined();
  });
});

Package contents

  • Wrapper
  • WrapperWithIntl
  • WrapperWithRedux
  • Custom react-testing-library queries

Keywords

FAQs

Package last updated on 24 Jan 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc