react-test-renderer#create TypeScript Examples

describe('BigDecimalInput', () => {
  const ref = React.createRef<typeof InputNumber>();
  let bigDecimalInputTestRenderer: ReactTestRenderer;
  it('Renders correctly with required props', () => {
    act(() => {
      bigDecimalInputTestRenderer = create(<BigDecimalInput ref={ref} />);
    });
  })

  it('Passes refs to the container component', () => {
    const input = bigDecimalInputTestRenderer.root.findByType(InputNumber).instance;
    expect(input).toEqual(ref.current);
  });

  it('Unmounts', () => {
    act(() => bigDecimalInputTestRenderer.unmount());
  })
})

describe('WordCloudChart', () => {
  test('should render without crashed', () => {
    const renderer = create(
      <WordCloudChart data={[]} wordField="w" weightField="weight" />
    )

    expect(renderer.toJSON()).toMatchSnapshot()
  })
})

describe('IconWithTooltip', () => {
  it('renders without height or weight', () => {
    const tree = create(
      <IconWithTooltip Icon={TestIcon} iconColor='green' tooltip='test icon tooltip' />,
    );
    expect(tree).toMatchSnapshot();
  });

  it('renders with height and weight', () => {
    const tree = create(
      <IconWithTooltip
        Icon={TestIcon}
        height={20}
        width={20}
        iconColor='green'
        tooltip='test icon tooltip'
      />,
    );
    expect(tree).toMatchSnapshot();
  });
});

test("SamplesList renders properly", () => {
    const focusOnInputSpy = jest.fn();
    jest
        .spyOn(SamplesList.prototype, "focusOnSearchInput")
        .mockImplementation(focusOnInputSpy);

    const component = create(
        <SamplesList getSamples={getBBEs} openSample={jest.fn()} />
    );
    const tree = component.toJSON();
    expect(tree).toMatchSnapshot();
    expect(focusOnInputSpy).toHaveBeenCalled();
});

describe('DoubleInput', () => {
  const ref = React.createRef<typeof InputNumber>();
  let inputWithMaskTestRenderer: ReactTestRenderer;
  it('Renders correctly with required props', () => {
    act(() => {
      inputWithMaskTestRenderer = create(<DoubleInput ref={ref} />);
    });
  })

  it('Passes refs to the container component', () => {
    const input = inputWithMaskTestRenderer.root.findByType(InputNumber).instance;
    expect(input).toEqual(ref.current);
  });

  it('Unmounts', () => {
    act(() => inputWithMaskTestRenderer.unmount());
  })
})

describe.skip("SettingsPage", () => {
  test("SettingsPage component renders without crashing", () => {
    const client = createMockClient();
    act(() => {
      create(
        <ReduxProvider store={store}>
          <ApolloProvider client={client}>
            <ApolloHooksProvider client={client}>
              <Router>
                <SettingsPage {...mockI18NProps} />
              </Router>
            </ApolloHooksProvider>
          </ApolloProvider>
        </ReduxProvider>,
      );
    });
  });
});

describe('RadialBarChart', () => {
  test('should render without crashed', () => {
    const renderer = create(<RadialBarChart data={[]} />)

    expect(renderer.toJSON()).toMatchSnapshot()
  })
})

it("should render the app and properly mock files", () => {
  const renderer = create(<Mock />);
  expect(renderer.toJSON()).toEqual({
    type: "div",
    props: {},
    children: ["mocked"],
  });
});

describe('LiquidChart', () => {
  test('should render without crashed', () => {
    const renderer = create(<LiquidChart percent={90} />)

    expect(renderer.toJSON()).toMatchSnapshot()
  })
})

it("should work", () => {
  const renderer = create(<App />);
  expect(renderer.toJSON()).toBeDefined();
});

describe('PieChart', () => {
  test('should render without crashed', () => {
    const renderer = create(<PieChart data={[]} angleField="X" />)

    expect(renderer.toJSON()).toMatchSnapshot()
  })
})

describe('Hr', () => {
  it('renders with the right styles', () => {
    const tree = create(<Hr fields={[]} />);
    expect(tree).toMatchSnapshot();
  });
});

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);
  });
});

export function renderWrapperHook<T extends IHookLikeFunc>(
    fn: T,
    wrapper: React.ComponentType,
    ...initialProps: FunctionParams<T>
): IRenderHookResult<T> {

    let value: ReturnType<T> | null = null;
    let error: Error | null = null;
    const resolvers: Array<() => void> = [];

    const callback = (v: ReturnType<T>): void => {
        value = v;
        resolvers.splice(0, resolvers.length).forEach(resolve => resolve());
    };

    const errorCallback = (e: Error): void => {
        error = e;
        resolvers.splice(0, resolvers.length).forEach(resolve => resolve());
    };

    const hookProps = {current: initialProps};

    const wrapped = (innerElement: React.ReactElement): React.ReactElement => {
        return React.createElement(wrapper, null, innerElement);
    };

    let testRenderer: any = {};

    act(() => {
        testRenderer = create(wrapped(
            <WrapperComponent
                hook={fn}
                params={hookProps.current}
                callback={callback}
                errorCallback={errorCallback}
            />
        ));
    });

    const {unmount, update} = testRenderer;

    return {
        getResult() {

            if (error) {
                throw error;
            }

            return value as ReturnType<T>;
        },
        waitForNextUpdate: () => new Promise(resolve => {
            resolvers.push(resolve);
        }),
        rerender: (newProps = hookProps.current) => {

            hookProps.current = newProps;

            act(() => {
                update(wrapped(
                    <WrapperComponent
                        hook={fn}
                        params={hookProps.current}
                        callback={callback}
                        errorCallback={errorCallback}
                    />
                ));
            });
        },
        execute: fn => {
            act(() => {
                fn();
            });
        },
        unmount: () => {
            act(() => {
                unmount();
            });
        }
    };
}

describe("#<SelectField>", () => {
    it("should render props", () => {
        let state = {
            select_data_id: undefined as any,
        };

        let component = create(
            <MockComponent state={state}>
                <SelectField
                    size="lg"
                    value={state.select_data_id}
                    name="fruitChoice"
                    options={["banana", "apple", "orange"]}
                />
            </MockComponent>
        );
        let tree = component.toJSON();
        expect(tree).toMatchSnapshot();
    });
    it("should render props from object keys", () => {
        let selectData: Array<{id: number, name: string}> = [
            {id: 1, name: "first"},
            {id: 2, name: "second"},
            {id: 3, name: "third"},
        ];
        let state = {
            select_data_id: undefined as any,
        };

        let component = create(
            <MockComponent state={state}>
                <SelectField
                    size="lg"
                    value={state.select_data_id}
                    name="fruitChoice"
                    objectkey="id"
                    objectvalue="name"
                    options={selectData}
                />
            </MockComponent>
        );
        let tree = component.toJSON();
        expect(tree).toMatchSnapshot();
    });
});

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('HistogramChart', () => {
  test('should render without crashed', () => {
    const renderer = create(<HistogramChart data={[]} binField="x" />)

    expect(renderer.toJSON()).toMatchSnapshot()
  })
})

describe('<DataTable>', () => {
  const dataTableTestRenderer = create(
    <Provider mainStore={mainStore}>
      <IntlProvider locale='en'>
        <DataTable loading={false}
                   onFilterChange={noop}
                   onSortOrderChange={noop}
                   onPaginationChange={noop}
                   entityName={'scr_Car'}
                   columnDefinitions={[
                     'manufacturer',
                     'model'
                   ]}
                   items={[
                     {manufacturer: 'AAA', model: '001', id: '1'},
                     {manufacturer: 'BBB', model: '002', id: '2'},
                   ]}
                   count={2}
        />
      </IntlProvider>
    </Provider>
  );

  const dataTableTestInstance = dataTableTestRenderer.root;

  const intlComponent = dataTableTestInstance.children[0] as ReactTestInstance;
  const mainStoreComponent = intlComponent.children[0] as ReactTestInstance;
  const metadataComponent = mainStoreComponent.children[0] as ReactTestInstance;
  const observerComponent = metadataComponent.children[0] as ReactTestInstance;
  const dataTableComponent = observerComponent.children[0] as ReactTestInstance;


  it('renders',  () => {
    expect(dataTableTestInstance).not.toBeNull();
  });

  it('wrapper has a DataTable child that has a selectedRowKeys property', () => {
    expect(dataTableComponent.instance.selectedRowKeys).not.toBeUndefined();
  })

  it('selectedRowKeys must be an empty array', () => {
    expect(dataTableComponent.instance.selectedRowKeys).toBeInstanceOf(Array);
    expect(dataTableComponent.instance.selectedRowKeys).toHaveLength(0);
  })

  it('DataTable.onRowSelectionChange must be called once after click on the row', async () => {
    // Find the rows
    const rows = dataTableComponent.findAllByProps({className: 'ant-table-row ant-table-row-level-0'})

    expect(dataTableComponent.instance.disposers.length).toBeGreaterThanOrEqual(1);
    const prevSelectedRowKeys = [...dataTableComponent.instance.selectedRowKeys];
    expect(prevSelectedRowKeys).toHaveLength(0);

    rows[0].props.onClick(new Event('click'))
    const newSelectedRowKeys = dataTableComponent.instance.selectedRowKeys;
    expect(prevSelectedRowKeys).not.toEqual(newSelectedRowKeys);
    expect(newSelectedRowKeys).toHaveLength(1);
  })

  it('DataTable.items must be the same after click on the row (row selection)', () => {
    const prevItems = dataTableComponent.instance.items;

    const rows = dataTableComponent.findAllByProps({className: 'ant-table-row ant-table-row-level-0'});
    rows[0].props.onClick(new Event('click'));

    expect(dataTableComponent.instance.items === prevItems).toBe(true);
  })
});

describe('AreaChart', () => {
  test('should render without crashed', () => {
    const renderer = create(<AreaChart data={[]} />)

    expect(renderer.toJSON()).toMatchSnapshot()
  })
})

describe('VerticalMenu', () => {

  const verticalMenuJsx: JSX.Element = (
    <IntlProvider locale="en">
      <VerticalMenu>
        <MenuItem
          caption={"item title"}
        >
          <span> first item title</span>
          <span> first item content</span>
        </MenuItem>
        <MenuItem
          screenId={"secondScreen"}
          caption={"item title"}
        >
          <span> Second item title</span>
          <span> Second item content</span>
        </MenuItem>
        <SubMenuItem
          caption={"test"}
        >
          <MenuItem
            screenId={"thirdScreen"}
            caption={"item title"}
          >
            <span> Third item title</span>
            <span> Third item content</span>
          </MenuItem>
          <MenuItem
            screenId={"fourthScreen"}
            caption={"item title"}
          >
            <span> Fourth item title</span>
            <span> Fourth item content</span>
          </MenuItem>
        </SubMenuItem>
      </VerticalMenu>
    </IntlProvider>

  )

  let verticalMenuTestRenderer: ReactTestRenderer;

  describe('VerticalMenu renders without crashing', () => {
    it('VerticalMenu render and mount', () => {
      act(() => {
        verticalMenuTestRenderer = create(verticalMenuJsx)
      })
    })

    it('VerticalMenu unmount', () => {
      act(() => {
        verticalMenuTestRenderer.unmount();
      })
    })
  })
})

describe('BoxChart', () => {
  test('should render without crashed', () => {
    const renderer = create(<BoxChart data={[]} xField="x" yField="y" />)

    expect(renderer.toJSON()).toMatchSnapshot()
  })
})

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("#PasswordField()", () => {
    it("should render an input field with the bootstrap styled tags", () => {
        let state = {
            password: "joe",
        };

        let component = create(
            <MockComponent state={state}>
                <PasswordField name="password" value={state.password} />
            </MockComponent>
        );

        let tree = component.toJSON();
        expect(tree).toMatchSnapshot();
    });

    it("should render a single input tag with no bootstrap styles", () => {
        let state = {
            password: "",
        };

        let component = create(
            <MockComponent state={state}>
                <PasswordField name="password" value={state.password} />
            </MockComponent>
        );

        let tree = component.toJSON();
        expect(tree).toMatchSnapshot();
    });


    it("it should pass in props", () => {
        let state = {
            password: "joebloggs"
        };

        let testFormRederer: any = create(
            <MockComponent state={state}>
                <PasswordField name="password" value={state.password} />
            </MockComponent>
        );

        const testFormInstance = testFormRederer.root;
        expect(testFormInstance.props.state.password).toEqual(state.password);

    });

    it("it should display validation errors", () => {
        let state = {
            password: "a",
        };

        let component = create(
            <MockComponent state={state}>
                <PasswordField
                    name="password"
                    value={state.password}
                    validators={[isFieldEmpty(5)]}
                />
            </MockComponent>
        );

        let tree = component.toJSON();
        expect(tree).toMatchSnapshot();
    });

    it("it should pass validation props", () => {
        let state = {
            password: "a",
        };


        let testFormRederer: any = create(
            <div>
                <MockComponent state={state}>
                    <PasswordField
                        name="password"
                        value={state.password}
                        validators={[isFieldEmpty(5)]}
                    />
                </MockComponent>
            </div>
        );

        const testFormInstance = testFormRederer.root;
        expect(testFormInstance)

    });

    it("should confirm passwords are equal", () => {
        let state = {
            password: "wizard",
            confirmPassword: "wizard",
        };

        let component = create(
            <MockComponent state={state}>
                <PasswordField name="password" value={state.password} />
                <PasswordField
                    name="confirmPassword"
                    value={state.confirmPassword}
                    validators={[areFieldsEqual("password")]} />
            </MockComponent>
        );

        let tree = component.toJSON();
        expect(tree).toMatchSnapshot();
    });

    it("should how message that passwords are not equal", () => {
        let state = {
            password: "wizard",
            confirmPassword: "w",
        };

        let root = create(
            <MockComponent state={state}>
                <PasswordField
                    name="password"
                    value={state.password}
                    />
                <PasswordField
                    name="confirmPassword"
                    value={state.confirmPassword}
                    validators={[areFieldsEqual("password")]} />
            </MockComponent>
        );

        let tree = root.toJSON();
        expect(tree).toMatchSnapshot();


        act(() => {
            state.confirmPassword = "wi";

            root.update(
                <MockComponent state={state}>
                    <PasswordField
                        name="password"
                        value={state.password}
                    />
                    <PasswordField
                        name="confirmPassword"
                        value={state.confirmPassword}
                        validators={[areFieldsEqual("password")]} />
                </MockComponent>
            )
        });

        tree = root.toJSON();
        expect(tree).toMatchSnapshot();

    });

    xit("should maintain a disabled submit button with both password fields not matching", () => {
        let state = {
            password: "",
            confirmPassword: "",
        };

        let root = create(
            <MockComponent state={state}>
                <PasswordField
                    name="password"
                    value={state.password}
                />
                <PasswordField
                    name="confirmPassword"
                    value={state.confirmPassword}
                    validators={[areFieldsEqual("password")]} />
                <SubmitButton>Submit MockComponent</SubmitButton>
            </MockComponent>
        );

        let tree: any = root.toJSON();
        expect(tree).toMatchSnapshot();
        expect(tree.children[2].props.disabled).toEqual(false);

        act(() => {
            state.password = "";
            state.confirmPassword = "";

            root.update(
                <MockComponent state={state}>
                    <PasswordField
                        name="password"
                        value={state.password}
                    />
                    <PasswordField
                        name="confirmPassword"
                        value={state.confirmPassword}
                        validators={[areFieldsEqual("password")]} />
                    <SubmitButton>Submit MockComponent</SubmitButton>
                </MockComponent>
            )
        });

       expect(tree.children[2].props.disabled).toEqual(true);

    });

});

describe('LineChart', () => {
  test('render without crashed', () => {
    let div = document.createElement('div')
    const root = createRoot(div)
    root.render(<LineChart data={[]} />)
    root.unmount()
    div = null
  })

  test('object ref should be assigned', () => {
    const ref = createRef<HTMLDivElement | null>()
    const chartRef = createRef<BasePlot<LineOptions> | null>()
    const div = document.createElement('div')
    const root = createRoot(div)
    root.render(<LineChart data={[]} ref={ref} chartRef={chartRef} />)
    root.unmount()
    expect(ref.current).toBeDefined()
    expect(chartRef.current).toBeDefined()
  })

  test('onReady should be called', () => {
    const onReady = (plot: BasePlot<LineOptions>) => {
      expect(plot).toBeDefined()
    }
    const div = document.createElement('div')
    const root = createRoot(div)
    root.render(<LineChart data={[]} onReady={onReady} />)
    root.unmount()
  })

  test('function ref should be called', () => {
    // let chart
    const getChart = (instance) => {
      expect(instance).toBeTruthy()
    }
    const div = document.createElement('div')
    const root = createRoot(div)
    root.render(<LineChart data={[]} chartRef={getChart} />)
    root.unmount()

    // expect(chart).toBeDefined()
  })

  test('test update config and data', () => {
    const data = [
      { year: '1991', value: 3 },
      { year: '1992', value: 4 },
      { year: '1993', value: 3.5 },
      { year: '1994', value: 5 },
      { year: '1995', value: 4.9 },
      { year: '1996', value: 6 },
      { year: '1997', value: 7 },
      { year: '1998', value: 9 },
      { year: '1999', value: 13 },
    ]
    const config = {
      data,
      xField: 'year',
      yField: 'value',
      smooth: true,
      meta: {
        value: {
          max: 15,
        },
      },
    }
    const div = document.createElement('div')
    const root = createRoot(div)
    root.render(<LineChart {...config} data={null} />)

    root.render(<LineChart {...config} data={[]} autoFit />)

    root.render(<LineChart {...config} data={null} autoFit />)

    root.render(<LineChart {...config} autoFit />)
    root.render(<LineChart {...config} autoFit data={[]} />)
    root.render(<LineChart {...config} data={[]} autoFit />)

    root.unmount()
  })

  test('lifecycle', () => {
    const renderer = create(<LineChart data={[]} />)

    expect(renderer.toJSON()).toMatchSnapshot()

    renderer.unmount()
  })
})