Skip to content
Generate and test every possible instance of a component in React
Branch: master
Clone or download
Latest commit b89006b Mar 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Initial commit Feb 16, 2019
index.d.ts cleaner ts Mar 19, 2019
index.js
index.ts add license, transpile to es5, flesh out readme, tweak tsconfig, use … Mar 22, 2019
license add license, transpile to es5, flesh out readme, tweak tsconfig, use … Mar 22, 2019
package.json v1.0.1 Mar 22, 2019
readme.md typo Mar 22, 2019
test.tsx add license, transpile to es5, flesh out readme, tweak tsconfig, use … Mar 22, 2019
tsconfig.json add license, transpile to es5, flesh out readme, tweak tsconfig, use … Mar 22, 2019
yarn.lock update build and tsconfig Mar 20, 2019

readme.md

prop-sets

prop-sets is a test tool to help generate every possible instance of a component in JavaScript + TypeScript.

With prop-sets, you don't need to outsmart your own code when writing tests. Instead of determining fragile points of failure from particular combinations of inputs, simply generate all possible combinations and assert everything.

Works with React, Vue, Jest, Mocha, etc. No dependencies.

Benefits

Let's say you have a React component called Button with the props disabled and color, as well as a test that asserts the button is gray when disabled is true and color otherwise. Here's how to use prop-sets to assert the component renders the correct color:

const Button = props => (
  <button
    disabled={props.disabled}
    style={{
      backgroundColor: props.disabled ? "gray" : props.color
    }}
  />
);

it("is gray when disabled, props.color otherwise", () => {
  propSets({
    color: ["red", "blue"],
    disabled: [true, false]
  }).forEach(props => {
    const component = <Button {...props} />;
    const color = getColor(component);

    expect(color).toBe(props.disabled ? "gray" : props.color);
  });
});

prop-sets helps you easily write tests for assertions that are based on multiple input values (in this case, disabled and color) without greatly increasing the amount of code you have to write.

Without prop-sets, this test will need to be expanded to three assertions:

it("is gray when disabled", () => {
  const component = <Button disabled color="red" />;
  const color = getColor(component);

  expect(color).toBe("gray");
});

it("is red when props.color is red", () => {
  const component = <Button color="red" />;
  const color = getColor(component);

  expect(color).toBe("red");
});

it("is blue when props.color is blue", () => {
  const component = <Button color="blue" />;
  const color = getColor(component);

  expect(color).toBe("blue");
});

Because backgroundColor's value is determined by both the disabled and color prop, we need to have all three assertions to be sure the component behaves as expected. Here are some implementations of Button that will only pass certain tests but fail all others.

// Passes 'is gray when disabled', fails all others
const Button = props => <button style={{ backgroundColor: "gray" }} />;

// Passes 'is red when color is red', fails all others
const Button = props => <button style={{ backgroundColor: "red" }} />;

// Passes 'is blue when color is blue', fails all others
const Button = props => <button style={{ backgroundColor: "blue" }} />;

// Passes 'is gray when disabled', 'is red when color is red', fails all others
const Button = props => (
  <button style={{ backgroundColor: props.disabled ? "gray" : "red" }} />
);

The amount of combinations prop-sets generates is the Cartesian product of all the values passed in (a.length * b.length * c.length * ...), so as the amount of props grows, prop-sets reduces your test's complexity at an exponential rate.

For example, if you have a component that only behaves a certain way if all 5 of its boolean props are true, the amount of tests you would need to write to formally assert that behavior is 32. With prop-sets, just one!:

it("does something if all props are true, false otherwise", () => {
  const tf = [true, false];
  propSets({ a: tf, b: tf, c: tf, d: tf, e: tf }).forEach(props => {
    expect(/* something */).toBe(
      props.a && props.b && props.c && props.d && props.e
    );
  });
});

Use

Install

yarn add prop-sets or npm install prop-sets

Import

import propSets from "prop-sets";

API

propSets(object)

Arguments

Name Type Description
object { [prop]: Array<value> } An object of arrays containing possible values of the prop

Return

Type Description
Array<{ [prop]: value }> An array of props where every combination of prop values is unique

TypeScript

prop-sets comes typed but works perfectly fine without TypeScript.

declare type ArrayElementType<Arr> = Arr extends (infer ElementType)[]
  ? ElementType
  : any;

declare const propSets: <
  T extends Readonly<{
    [key: string]: ReadonlyArray<any>;
  }>
>(
  obj: T
) => { [key in keyof T]: ArrayElementType<T[key]> }[];

License

MIT

You can’t perform that action at this time.