react-test-renderer#ReactTestRendererJSON TypeScript Examples

describe("IF component",() => {
  it('IF component renders wihout crashing' ,() => {
    TestRenderer.act(() => {
      compWithIf = TestRenderer.create(
        <TestedCompWithIf/>
      )
    })
    compWithIfChildren = (compWithIf.toJSON() as ReactTestRendererJSON).children;
  });

  it("true condition works correctly", () => {
    const compWithIfSpanChild = compWithIfChildren!.find((child: any) => {
      return child?.type === 'span'
    })
    expect(compWithIfSpanChild).not.toBeUndefined();
  });

  it("false condition works correctly", () => {
    const compWithIfPChild = compWithIfChildren!.find((child: any) => {
      return child?.type === 'p'
    })
    expect(compWithIfPChild).toBeUndefined();
  })
})

describe('SpinnerCircular', () => {
  const color = 'red';

  it('matches the snapshot', () => {
    const component = create(<SpinnerCircular color="#fff" size={100} speed={10} thickness={50} />);

    expect(component.toJSON()).toMatchSnapshot();
  });

  it('matches the snapshot with default props', () => {
    const component = create(<SpinnerCircular />);

    expect(component.toJSON()).toMatchSnapshot();
  });

  it('renders null if disabled', () => {
    const component = create(<SpinnerCircular enabled={false} />);

    expect(component.toJSON()).toBe(null);
  });

  it('renders still if specified', () => {
    const component = create(<SpinnerCircular still />);
    const circles = component.root.findAllByType('circle');

    expect(circles[1].props.style.animation).toBeUndefined();
  });

  it('passes props to styles', () => {
    const size = '20%';
    const thickness = 40;
    const speed = 50;
    const component = create(
      <SpinnerCircular color={color} size={size} speed={speed} thickness={thickness} />,
    );
    const { props: { style } } = component.toJSON() as ReactTestRendererJSON;
    const circles = component.root.findAllByType('circle');

    expect(style.width).toBe(size);
    expect(circles[0].props.strokeWidth).toBeCloseTo(4 * (thickness / 100));
    expect(circles[1].props.style.animation.includes(140 / speed)).toBe(true);
  });

  it('passes svg props overriding styles', () => {
    const className = 'test-class';
    const component = create(<SpinnerCircular className={className} color="green" style={{ color }} />);
    const { props } = component.toJSON() as ReactTestRendererJSON;

    expect(props.className).toBe(className);
    expect(props.style.color).toBe(color);
  });
});

describe('SpinnerCircularFixed', () => {
  const color = 'red';

  it('matches the snapshot', () => {
    const component = create(<SpinnerCircularFixed color="#fff" size={100} speed={10} thickness={50} />);

    expect(component.toJSON()).toMatchSnapshot();
  });

  it('matches the snapshot with default props', () => {
    const component = create(<SpinnerCircularFixed />);

    expect(component.toJSON()).toMatchSnapshot();
  });

  it('renders null if disabled', () => {
    const component = create(<SpinnerCircularFixed enabled={false} />);

    expect(component.toJSON()).toBe(null);
  });

  it('renders still if specified', () => {
    const component = create(<SpinnerCircularFixed still />);
    const circles = component.root.findAllByType('circle');

    expect(circles[1].props.style.animation).toBeUndefined();
  });

  it('passes props to styles', () => {
    const size = '20%';
    const thickness = 40;
    const speed = 50;
    const component = create(
      <SpinnerCircularFixed color={color} size={size} speed={speed} thickness={thickness} />,
    );
    const { props: { style } } = component.toJSON() as ReactTestRendererJSON;
    const circles = component.root.findAllByType('circle');

    expect(style.width).toBe(size);
    expect(circles[0].props.strokeWidth).toBeCloseTo(4 * (thickness / 100));
    expect(circles[1].props.style.animation.includes(140 / speed)).toBe(true);
  });

  it('passes svg props overriding styles', () => {
    const className = 'test-class';
    const component = create(<SpinnerCircularFixed className={className} color="green" style={{ color }} />);
    const { props } = component.toJSON() as ReactTestRendererJSON;

    expect(props.className).toBe(className);
    expect(props.style.color).toBe(color);
  });
});

describe('SpinnerCircularSplit', () => {
  const color = 'red';

  it('matches the snapshot', () => {
    const component = create(<SpinnerCircularSplit color="#fff" size={100} speed={10} thickness={50} />);

    expect(component.toJSON()).toMatchSnapshot();
  });

  it('matches the snapshot with default props', () => {
    const component = create(<SpinnerCircularSplit />);

    expect(component.toJSON()).toMatchSnapshot();
  });

  it('renders null if disabled', () => {
    const component = create(<SpinnerCircularSplit enabled={false} />);

    expect(component.toJSON()).toBe(null);
  });

  it('renders still if specified', () => {
    const component = create(<SpinnerCircularSplit still />);
    const circles = component.root.findAllByType('circle');

    expect(circles[1].props.style.animation).toBeUndefined();
  });

  it('passes props to styles', () => {
    const size = '20%';
    const thickness = 40;
    const speed = 50;
    const component = create(
      <SpinnerCircularSplit color={color} size={size} speed={speed} thickness={thickness} />,
    );
    const { props: { style } } = component.toJSON() as ReactTestRendererJSON;
    const circles = component.root.findAllByType('circle');

    expect(style.width).toBe(size);
    expect(circles[0].props.strokeWidth).toBeCloseTo(4 * (thickness / 100));
    expect(circles[1].props.style.animation.includes(140 / speed)).toBe(true);
  });

  it('passes svg props overriding styles', () => {
    const className = 'test-class';
    const component = create(<SpinnerCircularSplit className={className} color="green" style={{ color }} />);
    const { props } = component.toJSON() as ReactTestRendererJSON;

    expect(props.className).toBe(className);
    expect(props.style.color).toBe(color);
  });
});

describe('SpinnerDiamond', () => {
  const color = 'red';

  it('matches the snapshot', () => {
    const component = create(<SpinnerDiamond color="#fff" size={100} speed={10} thickness={50} />);

    expect(component.toJSON()).toMatchSnapshot();
  });

  it('matches the snapshot with default props', () => {
    const component = create(<SpinnerDiamond />);

    expect(component.toJSON()).toMatchSnapshot();
  });

  it('renders null if disabled', () => {
    const component = create(<SpinnerDiamond enabled={false} />);

    expect(component.toJSON()).toBe(null);
  });

  it('renders still if specified', () => {
    const component = create(<SpinnerDiamond still />);
    const group = component.root.findByType('g');

    expect(group.props.style.animation).toBe('none');
  });

  it('passes props to styles', () => {
    const size = '20%';
    const thickness = 40;
    const speed = 50;
    const component = create(
      <SpinnerDiamond color={color} size={size} speed={speed} thickness={thickness} />,
    );
    const { props: { style } } = component.toJSON() as ReactTestRendererJSON;
    const circles = component.root.findAllByType('circle');
    const last = circles.length - 1;
    const group = component.root.findByType('g');

    expect(style.width).toBe(size);
    expect(circles[0].props.r).toBeCloseTo(2.5 * (thickness / 100));
    expect(circles[last].props.r).toBeCloseTo(3.5 * (thickness / 100));
    expect(group.props.style.animation.includes(140 / speed)).toBe(true);
  });

  it('passes svg props overriding styles', () => {
    const className = 'test-class';
    const component = create(<SpinnerDiamond className={className} color="green" style={{ color }} />);
    const { props } = component.toJSON() as ReactTestRendererJSON;

    expect(props.className).toBe(className);
    expect(props.style.color).toBe(color);
  });
});

describe('SpinnerDotted', () => {
  const color = 'red';

  it('matches the snapshot', () => {
    const component = create(<SpinnerDotted color="#fff" size={100} speed={10} thickness={50} />);

    expect(component.toJSON()).toMatchSnapshot();
  });

  it('matches the snapshot with default props', () => {
    const component = create(<SpinnerDotted />);

    expect(component.toJSON()).toMatchSnapshot();
  });

  it('renders null if disabled', () => {
    const component = create(<SpinnerDotted enabled={false} />);

    expect(component.toJSON()).toBe(null);
  });

  it('renders still if specified', () => {
    const component = create(<SpinnerDotted still />);
    const circles = component.root.findAllByType('circle');
    const last = circles.length - 1;

    expect(circles[0].props.style.animation).toBeUndefined();
    expect(circles[last].props.style.animation).toBeUndefined();
    expect(circles[last].props.style.display).toBe('none');
  });

  it('passes props to styles', () => {
    const size = '20%';
    const thickness = 40;
    const speed = 50;
    const component = create(
      <SpinnerDotted color={color} size={size} speed={speed} thickness={thickness} />,
    );
    const { props: { style } } = component.toJSON() as ReactTestRendererJSON;
    const circles = component.root.findAllByType('circle');
    const last = circles.length - 1;
    const animationDuration = 200 / speed;

    expect(style.width).toBe(size);
    expect(circles[0].props.r).toBeCloseTo(3 * (thickness / 100));
    expect(circles[0].props.style.animation.includes(animationDuration)).toBe(true);
    expect(circles[last].props.r).toBeCloseTo(6 * (thickness / 100));
    expect(circles[last].props.style.animation.includes(animationDuration)).toBe(true);
  });

  it('passes svg props overriding styles', () => {
    const className = 'test-class';
    const component = create(<SpinnerDotted className={className} color="green" style={{ color }} />);
    const { props } = component.toJSON() as ReactTestRendererJSON;

    expect(props.className).toBe(className);
    expect(props.style.color).toBe(color);
  });
});

describe('SpinnerInfinity', () => {
  const color = 'red';

  it('matches the snapshot', () => {
    const component = create(<SpinnerInfinity color="#fff" size={100} speed={10} thickness={50} />);

    expect(component.toJSON()).toMatchSnapshot();
  });

  it('matches the snapshot with default props', () => {
    const component = create(<SpinnerInfinity />);

    expect(component.toJSON()).toMatchSnapshot();
  });

  it('renders null if disabled', () => {
    const component = create(<SpinnerInfinity enabled={false} />);

    expect(component.toJSON()).toBe(null);
  });

  it('renders still if specified', () => {
    const component = create(<SpinnerInfinity still />);
    const uses = component.root.findAllByType('use');

    expect(uses[1].props.style.animation).toBeUndefined();
  });

  it('passes props to styles', () => {
    const size = '20%';
    const thickness = 40;
    const speed = 50;
    const component = create(
      <SpinnerInfinity color={color} size={size} speed={speed} thickness={thickness} />,
    );
    const { props: { style } } = component.toJSON() as ReactTestRendererJSON;
    const uses = component.root.findAllByType('use');
    const strokeWidth = 7 * (thickness / 100);

    expect(style.width).toBe(size);
    expect(uses[0].props.strokeWidth).toBeCloseTo(strokeWidth);
    expect(uses[1].props.strokeWidth).toBeCloseTo(strokeWidth);
    expect(uses[1].props.style.animation.includes(140 / speed)).toBe(true);
  });

  it('passes svg props overriding styles', () => {
    const className = 'test-class';
    const component = create(<SpinnerInfinity className={className} color="green" style={{ color }} />);
    const { props } = component.toJSON() as ReactTestRendererJSON;

    expect(props.className).toBe(className);
    expect(props.style.color).toBe(color);
  });
});

describe('SpinnerRound', () => {
  const color = 'red';

  it('matches the snapshot', () => {
    const component = create(<SpinnerRound color="#fff" size={100} speed={10} thickness={50} />);

    expect(component.toJSON()).toMatchSnapshot();
  });

  it('matches the snapshot with default props', () => {
    const component = create(<SpinnerRound />);

    expect(component.toJSON()).toMatchSnapshot();
  });

  it('renders null if disabled', () => {
    const component = create(<SpinnerRound enabled={false} />);

    expect(component.toJSON()).toBe(null);
  });

  it('renders still if specified', () => {
    const component = create(<SpinnerRound still />);
    const circle = component.root.findByType('circle');

    expect(circle.props.style.animation).toBe('none');
  });

  it('passes props to styles', () => {
    const size = '20%';
    const thickness = 40;
    const speed = 50;
    const component = create(
      <SpinnerRound color={color} size={size} speed={speed} thickness={thickness} />,
    );
    const { props: { style } } = component.toJSON() as ReactTestRendererJSON;
    const circle = component.root.findByType('circle');

    expect(style.width).toBe(size);
    expect(circle.props.strokeWidth).toBeCloseTo(3 * (thickness / 100));
    expect(circle.props.style.animation.includes(140 / speed)).toBe(true);
  });

  it('passes svg props overriding styles', () => {
    const className = 'test-class';
    const component = create(<SpinnerRound className={className} color="green" style={{ color }} />);
    const { props } = component.toJSON() as ReactTestRendererJSON;

    expect(props.className).toBe(className);
    expect(props.style.color).toBe(color);
  });
});

describe('SpinnerRoundFilled', () => {
  const color = 'red';
  const animations = [
    { r: 4 },
    {
      name: 'spinners-react-round-filled-inner',
      r: 12.66,
    },
    {
      name: 'spinners-react-round-filled-center',
      r: 20.32,
    },
    {
      name: 'spinners-react-round-filled-outer',
      r: 27.5,
    },
  ];

  it('matches the snapshot', () => {
    const component = create(<SpinnerRoundFilled color="#fff" size={100} speed={10} thickness={50} />);

    expect(component.toJSON()).toMatchSnapshot();
  });

  it('matches the snapshot with default props', () => {
    const component = create(<SpinnerRoundFilled />);

    expect(component.toJSON()).toMatchSnapshot();
  });

  it('renders null if disabled', () => {
    const component = create(<SpinnerRoundFilled enabled={false} />);

    expect(component.toJSON()).toBe(null);
  });

  it('renders still if specified', () => {
    const component = create(<SpinnerRoundFilled still />);
    const circles = component.root.findAllByType('circle');

    circles.forEach((circle, index) => {
      expect(circle.props.style.animation).toBe('none');
      expect(circle.props.r).toBe(animations[index].r);
    });
  });

  it('passes props to styles', () => {
    const size = '20%';
    const thickness = 40;
    const speed = 50;
    const component = create(
      <SpinnerRoundFilled color={color} size={size} speed={speed} thickness={thickness} />,
    );
    const { props: { style } } = component.toJSON() as ReactTestRendererJSON;
    const circles = component.root.findAllByType('circle');

    expect(style.width).toBe(size);
    circles.forEach((circle, index) => {
      expect(circle.props.style.animation.includes(animations[index].name || 'none')).toBe(true);
      if (index) expect(circle.props.style.animation.includes(140 / speed)).toBe(true);
      expect(circle.props.r).toBeCloseTo(
        index ? animations[index].r * (thickness / 100) : animations[index].r,
      );
    });
  });

  it('passes svg props overriding styles', () => {
    const className = 'test-class';
    const component = create(<SpinnerRoundFilled className={className} color="green" style={{ color }} />);
    const { props } = component.toJSON() as ReactTestRendererJSON;

    expect(props.className).toBe(className);
    expect(props.style.color).toBe(color);
  });
});

describe('SpinnerRoundOutlined', () => {
  const color = 'red';
  const animations = [
    {
      r: 2,
      strokeWidth: 4,
    },
    {
      name: 'spinners-react-round-outlined',
      r: 14,
    },
    {
      name: 'spinners-react-round-outlined',
      r: 28,
    },
  ];

  it('matches the snapshot', () => {
    const component = create(<SpinnerRoundOutlined color="#fff" size={100} speed={10} thickness={50} />);

    expect(component.toJSON()).toMatchSnapshot();
  });

  it('matches the snapshot with default props', () => {
    const component = create(<SpinnerRoundOutlined />);

    expect(component.toJSON()).toMatchSnapshot();
  });

  it('renders null if disabled', () => {
    const component = create(<SpinnerRoundOutlined enabled={false} />);

    expect(component.toJSON()).toBe(null);
  });

  it('renders still if specified', () => {
    const component = create(<SpinnerRoundOutlined still />);
    const circles = component.root.findAllByType('circle');

    circles.forEach((circle) => {
      expect(circle.props.style.animation).toBeUndefined();
    });
  });

  it('passes props to styles', () => {
    const size = '20%';
    const thickness = 40;
    const speed = 50;
    const component = create(
      <SpinnerRoundOutlined color={color} size={size} speed={speed} thickness={thickness} />,
    );
    const { props: { style } } = component.toJSON() as ReactTestRendererJSON;
    const circles = component.root.findAllByType('circle');

    expect(style.width).toBe(size);
    circles.forEach((circle, index) => {
      if (index) {
        expect(circle.props.style.animation.includes(140 / speed)).toBe(true);
        expect(circle.props.style.animation.includes(animations[index].name)).toBe(true);
        expect(circle.props.strokeWidth).toBeCloseTo(3 * (thickness / 100));
      } else {
        expect(circle.props.strokeWidth).toBe(animations[index].strokeWidth);
        expect(circle.props.style.animation).toBeUndefined();
      }
    });
  });

  it('passes svg props overriding styles', () => {
    const className = 'test-class';
    const component = create(<SpinnerRoundOutlined className={className} color="green" style={{ color }} />);
    const { props } = component.toJSON() as ReactTestRendererJSON;

    expect(props.className).toBe(className);
    expect(props.style.color).toBe(color);
  });
});

function getComponentSnapshot(
  component: React.ReactElement
): null | ReactTestRendererJSON | ReactTestRendererJSON[] {
  return renderer.create(component).toJSON();
}

function getComponentSnapshot(
  component: React.ReactElement
): null | ReactTestRendererJSON | ReactTestRendererJSON[] {
  return renderer.create(component).toJSON();
}

function getComponentSnapshot(
  component: React.ReactElement
): null | ReactTestRendererJSON | ReactTestRendererJSON[] {
  return renderer.create(component).toJSON();
}

function getComponentSnapshot(
  component: React.ReactElement
): null | ReactTestRendererJSON | ReactTestRendererJSON[] {
  return renderer.create(component).toJSON();
}

function getComponentSnapshot(
  component: React.ReactElement
): null | ReactTestRendererJSON | ReactTestRendererJSON[] {
  return renderer.create(component).toJSON();
}

function getComponentSnapshot(
  component: React.ReactElement
): null | ReactTestRendererJSON | ReactTestRendererJSON[] {
  return renderer.create(component).toJSON();
}