Bug: react-test-renderer types of .toTree API are missing about react

[mdjastrzebski]

@AndyOGo I've done some tests to verify return types for toJSON() and toTree here are the results:

toJSON()

import * as React from 'react';
import TestRenderer from 'react-test-renderer';

describe('toJSON()', () => {
  test('undefined primitive', () => {
    const renderer = TestRenderer.create(<div>{undefined}</div>);
    expect(JSON.stringify(renderer.toJSON())).toMatchInlineSnapshot(
      `"{"type":"div","props":{},"children":null}"`
    );
  });

  test('null primitive', () => {
    const renderer = TestRenderer.create(<div>{null}</div>);
    expect(JSON.stringify(renderer.toJSON())).toMatchInlineSnapshot(
      `"{"type":"div","props":{},"children":null}"`
    );
  });

  test('false primitive', () => {
    const renderer = TestRenderer.create(<div>{false}</div>);
    expect(JSON.stringify(renderer.toJSON())).toMatchInlineSnapshot(
      `"{"type":"div","props":{},"children":null}"`
    );
  });

  test('true primitive', () => {
    const renderer = TestRenderer.create(<div>{true}</div>);
    expect(JSON.stringify(renderer.toJSON())).toMatchInlineSnapshot(
      `"{"type":"div","props":{},"children":null}"`
    );
  });

  test('0 primitive', () => {
    const renderer = TestRenderer.create(<div>{0}</div>);
    expect(JSON.stringify(renderer.toJSON())).toMatchInlineSnapshot(
      `"{"type":"div","props":{},"children":["0"]}"`
    );
  });

  test('1 primitive', () => {
    const renderer = TestRenderer.create(<div>{1}</div>);
    expect(JSON.stringify(renderer.toJSON())).toMatchInlineSnapshot(
      `"{"type":"div","props":{},"children":["1"]}"`
    );
  });

  test('string primitive', () => {
    const renderer = TestRenderer.create(<div>Hello</div>);
    expect(JSON.stringify(renderer.toJSON())).toMatchInlineSnapshot(
      `"{"type":"div","props":{},"children":["Hello"]}"`
    );
  });
});

As you can see: null, undefined, true, false result in "children":null, so all these values are dropped.
Whereas 0, 1, and "Hello" result in "children":["0"], etc, so string and number values are turned into strings.

toTree()

describe('toTree()', () => {
  test('undefined primitive', () => {
    const renderer = TestRenderer.create(<div>{undefined}</div>);
    expect(JSON.stringify(renderer.toTree())).toMatchInlineSnapshot(
      `"{"nodeType":"host","type":"div","props":{},"instance":null,"rendered":[]}"`
    );
  });

  test('null primitive', () => {
    const renderer = TestRenderer.create(<div>{null}</div>);
    expect(JSON.stringify(renderer.toTree())).toMatchInlineSnapshot(
      `"{"nodeType":"host","type":"div","props":{"children":null},"instance":null,"rendered":[]}"`
    );
  });

  test('false primitive', () => {
    const renderer = TestRenderer.create(<div>{false}</div>);
    expect(JSON.stringify(renderer.toTree())).toMatchInlineSnapshot(
      `"{"nodeType":"host","type":"div","props":{"children":false},"instance":null,"rendered":[]}"`
    );
  });

  test('true primitive', () => {
    const renderer = TestRenderer.create(<div>{true}</div>);
    expect(JSON.stringify(renderer.toTree())).toMatchInlineSnapshot(
      `"{"nodeType":"host","type":"div","props":{"children":true},"instance":null,"rendered":[]}"`
    );
  });

  test('0 primitive', () => {
    const renderer = TestRenderer.create(<div>{0}</div>);
    expect(JSON.stringify(renderer.toTree())).toMatchInlineSnapshot(
      `"{"nodeType":"host","type":"div","props":{"children":0},"instance":null,"rendered":["0"]}"`
    );
  });

  test('1 primitive', () => {
    const renderer = TestRenderer.create(<div>{1}</div>);
    expect(JSON.stringify(renderer.toTree())).toMatchInlineSnapshot(
      `"{"nodeType":"host","type":"div","props":{"children":1},"instance":null,"rendered":["1"]}"`
    );
  });

  test('string primitive', () => {
    const renderer = TestRenderer.create(<div>Hello</div>);
    expect(JSON.stringify(renderer.toTree())).toMatchInlineSnapshot(
      `"{"nodeType":"host","type":"div","props":{"children":"Hello"},"instance":null,"rendered":["Hello"]}"`
    );
  });
});

In this case children props repeats the passed value, and rendered prop:

• rendered: [] for null, undefined, false and true
• rendered: ["0"], etc for 0, 1, "Hello"

[mdjastrzebski]

@AndyOGo Flowtype does not seem to specify the result of return from toTree(), it's marked as $FlowFixMe. The types ReactTestRendererJSON & ReactTestRendererNode are for toJSON method.

[AndyOGo]

@mdjastrzebski thanks for you quick response.

I came to the same conclusion.

[Yashshiva75]

HELLO IAM NOW IN DISSCUSSION