react-test-renderer#ReactTestRenderer TypeScript Examples

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

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

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

describe('Layout: BasicLayout', () => {
  it('Render correctly', () => {
    const wrapper: ReactTestRenderer = renderer.create(<BasicLayout />);
    expect(wrapper.root.children.length).toBe(1);
    const outerLayer = wrapper.root.children[0] as ReactTestInstance;
    expect(outerLayer.type).toBe('div');
    const title = outerLayer.children[0] as ReactTestInstance;
    expect(title.type).toBe('h1');
    expect(title.children[0]).toBe('Yay! Welcome to umi!');
  });
});

function renderComponent(
  store: Store,
  currentStep: LoadIdeSteps,
  workspaceName: string,
  workspaceId: string,
  hasError: boolean,
  ideUrl?: string,
): ReactTestRenderer {
  return renderer.create(
    <Provider store={store}>
      <IdeLoaderTabs
        currentStep={currentStep}
        workspaceName={workspaceName}
        workspaceId={workspaceId}
        hasError={hasError}
        ideUrl={ideUrl}
      />
    </Provider>,
  );
}

function renderComponent(
  store: Store,
  currentStep: LoadFactorySteps,
  workspaceName: string,
  workspaceId: string,
  hasError: boolean,
  devfileLocationInfo?: string,
): ReactTestRenderer {
  return renderer.create(
    <Provider store={store}>
      <FactoryLoaderTabs
        currentStep={currentStep}
        workspaceName={workspaceName}
        workspaceId={workspaceId}
        hasError={hasError}
        devfileLocationInfo={devfileLocationInfo}
      />
    </Provider>,
  );
}

function renderComponent(
  store: Store,
  workspaceId: string,
): ReactTestRenderer {
  return renderer.create(
    <Provider store={store}>
      <LogsTab
        workspaceId={workspaceId}
      />
    </Provider>,
  );
}

function renderComponent(
  logs: string[],
  handleExpand: (isExpand: boolean) => void
): ReactTestRenderer {
  return renderer.create(
    <LogsTools
      logs={logs}
      handleExpand={handleExpand}
    />
  );
}

function renderComponent(
  workspaceName: string,
  workspaceId: string,
  decorationPattern: string,
  onChange: (devfile: che.WorkspaceDevfile, isValid: boolean) => void
): ReactTestRenderer {
  const workspace = createFakeWorkspace(workspaceId, workspaceName);
  const store = createFakeStore([workspace]);
  return renderer.create(
    <Provider store={store}>
      <DevfileEditor
        devfile={workspace.devfile as che.WorkspaceDevfile}
        decorationPattern={decorationPattern}
        onChange={onChange}
      />
    </Provider>,
  );
}

describe('LongInput', () => {
  const ref = React.createRef<Input>();
  let uuidInputTestRenderer: ReactTestRenderer;
  it('Renders correctly with required props', () => {
    act(() => {
      uuidInputTestRenderer = create(<UuidInput ref={ref} />);
    });
  })

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

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

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

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

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

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

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

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

describe('InputWithMask', () => {
  const ref = React.createRef<Input>();
  let inputWithMaskTestRenderer: ReactTestRenderer;
  it('Renders correctly with required props', () => {
    act(() => {
      inputWithMaskTestRenderer = create(<InputWithMask ref={ref} mask={"+4\\\\9 99 999 99"} />);
    });
  })

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

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

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('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('HorizontalMenu', () => {
  const horizontalMenuJsx: JSX.Element = (
    <IntlProvider locale="en">
      <HorizontalMenu>
        <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
            caption={"item title"}
            screenId={"thirdScreen"}
          >
            <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>
      </HorizontalMenu>
    </IntlProvider>
  )

  let horizontalMenuTestRenderer: ReactTestRenderer;

  describe('HorizontalMenu renders without crashing', () => {
    it('HorizontalMenu render and mount', () => {
      TestRenderer.act(() => {
        horizontalMenuTestRenderer = TestRenderer.create(horizontalMenuJsx)
      })
    })

    it('HorizontalMenu unmount', () => {
      TestRenderer.act(() => {
        horizontalMenuTestRenderer.unmount();
      })
    })
  })
})

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

compWithIf: ReactTestRenderer

TestedComponent: ReactTestRenderer

describe('MenuItem', () => {

  const menuItemJsx: JSX.Element = (
    <MenuItem
      caption={"item title"}
    >
      <span> item content</span>
    </MenuItem>
  )

  const menuItemWithScreenIdJsx: JSX.Element = (
    <MenuItem
      screenId={"tested"}
      caption={"item title"}
    >
      <span> item title</span>
      <span> item content</span>
    </MenuItem>
  )

  const menuItemWithOnclickJsx: JSX.Element = (
    <MenuItem
      screenId={"tested"}
      // eslint-disable-next-line no-console
      onClick={() => console.log("custom click handler")}
      caption={"item title"}
    >
      <span> item title</span>
      <span> item content</span>
    </MenuItem>
  )

  let menuItemTestRenderer: ReactTestRenderer;
  describe("MenuItem wrapped into VerticalMenu", () => {
    describe('MenuItem with empty props renders without crashing', () => {
      it('MenuItem with empty props render and mount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer = TestRenderer.create(
            <IntlProvider locale="en">
              <VerticalMenu>
                {menuItemJsx}
              </VerticalMenu>
            </IntlProvider>
          )
        })
      })

      it('MenuItem with empty props unmount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer.unmount();
        })
      })
    })

    describe('MenuItem with screenId property renders without crashing', () => {
      it('MenuItem with screenId property render and mount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer = TestRenderer.create(
            <IntlProvider locale="en">
              <VerticalMenu>
                {menuItemWithScreenIdJsx}
              </VerticalMenu>
            </IntlProvider>
          )
        })
      })

      it('MenuItem with screenId property unmount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer.unmount();
        })
      })
    })

    describe('MenuItem with custom onCLick renders without crashing', () => {
      it('MenuItem with custom onCLick render and mount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer = TestRenderer.create(
            <IntlProvider locale="en">
              <VerticalMenu>
                {menuItemWithOnclickJsx}
              </VerticalMenu>
            </IntlProvider>
          )
        })
      })
      it('MenuItem with custom onCLick props unmount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer.unmount();
        })
      })
    })
  })

  describe("MenuItem wrapped into HorizontalMenu", () => {
    describe('MenuItem with empty props renders without crashing', () => {
      it('MenuItem with empty props render and mount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer = TestRenderer.create(
            <IntlProvider locale="en">
              <HorizontalMenu>
                {menuItemJsx}
              </HorizontalMenu>
            </IntlProvider>
          )
        })
      })

      it('MenuItem with empty props unmount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer.unmount();
        })
      })
    })

    describe('MenuItem with screenId property renders without crashing', () => {
      it('MenuItem with screenId property render and mount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer = TestRenderer.create(
            <IntlProvider locale="en">
              <HorizontalMenu>
                {menuItemWithScreenIdJsx}
              </HorizontalMenu>
            </IntlProvider>
          )
        })
      })

      it('MenuItem with screenId property unmount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer.unmount();
        })
      })
    })

    describe('MenuItem with custom onCLick renders without crashing', () => {
      it('MenuItem with custom onCLick render and mount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer = TestRenderer.create(
            <IntlProvider locale="en">
              <HorizontalMenu>
                {menuItemWithOnclickJsx}
              </HorizontalMenu>
            </IntlProvider>
          )
        })
      })
      it('MenuItem with custom onCLick props unmount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer.unmount();
        })
      })
    })
  })
})

describe('MenuItem', () => {

  const subMenuItemJsx: JSX.Element = (
    <SubMenuItem
      caption={"test"}
    >
      <span> item title</span>
      <span> item content</span>
    </SubMenuItem>
  )

  const subMenuItemWithEmptyChildrenJsx: JSX.Element = (
    <SubMenuItem
      caption={"test"}
    >
    </SubMenuItem>
  )

  const subMenuItemWithMenuItemsJsx: JSX.Element = (
    <SubMenuItem
      caption={"test"}
    >
      <MenuItem
        caption={"item title"}
      >
        first tested menu item
        </MenuItem>
      <MenuItem
        caption={"item title"}
      >
        second tested menu item
        </MenuItem>
    </SubMenuItem>
  )

  const subMenuItemWithSubMenuItemsJsx: JSX.Element = (
    <SubMenuItem
      caption={"test1"}
    >
      <SubMenuItem
        caption={"test2"}
      >
        <SubMenuItem
          caption={"test3"}
        >
          <MenuItem
            caption={"item title"}
          >
            first tested menu item
          </MenuItem>
          <MenuItem
            caption={"item title"}
          >
            second tested menu item
          </MenuItem>
        </SubMenuItem>
      </SubMenuItem>
    </SubMenuItem>
  )

  let menuItemTestRenderer: ReactTestRenderer;
  describe("SubMenuItem wrapped into VerticalMenu", () => {
    describe('SubMenuItem with empty children renders without crashing', () => {
      it('SubMenuItem with empty children render and mount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer = TestRenderer.create(
            <IntlProvider locale="en">
              <VerticalMenu>
                {subMenuItemWithEmptyChildrenJsx}
              </VerticalMenu>
            </IntlProvider>
          )
        })
      })

      it('SubMenuItem with empty children unmount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer.unmount();
        })
      })
    })

    describe('SubMenuItem with content renders without crashing', () => {
      it('SubMenuItem with content render and mount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer = TestRenderer.create(
            <IntlProvider locale="en">
              <VerticalMenu>
                {subMenuItemJsx}
              </VerticalMenu>
            </IntlProvider>
          )
        })
      })

      it('SubMenuItem with content unmount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer.unmount();
        })
      })
    })

    describe('SubMenuItem with MenuItem renders without crashing', () => {
      it('SubMenuItem with MenuItem render and mount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer = TestRenderer.create(
            <IntlProvider locale="en">
              <VerticalMenu>
                {subMenuItemWithMenuItemsJsx}
              </VerticalMenu>
            </IntlProvider>
          )
        })
      })
      it('SubMenuItem with MenuItem props unmount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer.unmount();
        })
      })
    })

    describe('SubMenuItem with SubMenuItem renders without crashing', () => {
      it('SubMenuItem with SubMenuItem render and mount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer = TestRenderer.create(
            <IntlProvider locale="en">
              <VerticalMenu>
                {subMenuItemWithSubMenuItemsJsx}
              </VerticalMenu>
            </IntlProvider>
          )
        })
      })
      it('SubMenuItem with MenuItem  props unmount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer.unmount();
        })
      })
    })
  })

  describe("SubMenuItem wrapped into HorizontalMenu", () => {
    describe('SubMenuItem with empty children renders without crashing', () => {
      it('SubMenuItem with empty children render and mount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer = TestRenderer.create(
            <IntlProvider locale="en">
              <HorizontalMenu>
                {subMenuItemWithEmptyChildrenJsx}
              </HorizontalMenu>
            </IntlProvider>
          )
        })
      })

      it('SubMenuItem with empty children unmount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer.unmount();
        })
      })
    })

    describe('SubMenuItem with content renders without crashing', () => {
      it('SubMenuItem with content render and mount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer = TestRenderer.create(
            <IntlProvider locale="en">
              <HorizontalMenu>
                {subMenuItemJsx}
              </HorizontalMenu>
            </IntlProvider>
          )
        })
      })

      it('SubMenuItem with content unmount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer.unmount();
        })
      })
    })

    describe('SubMenuItem with MenuItem renders without crashing', () => {
      it('SubMenuItem with MenuItem render and mount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer = TestRenderer.create(
            <IntlProvider locale="en">
              <HorizontalMenu>
                {subMenuItemWithMenuItemsJsx}
              </HorizontalMenu>
            </IntlProvider>
          )
        })
      })
      it('SubMenuItem with MenuItem props unmount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer.unmount();
        })
      })
    })

    describe('SubMenuItem with SubMenuItem renders without crashing', () => {
      it('SubMenuItem with SubMenuItem render and mount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer = TestRenderer.create(
            <IntlProvider locale="en">
              <HorizontalMenu>
                {subMenuItemWithSubMenuItemsJsx}
              </HorizontalMenu>
            </IntlProvider>
          )
        })
      })
      it('SubMenuItem with MenuItem  props unmount', () => {
        TestRenderer.act(() => {
          menuItemTestRenderer.unmount();
        })
      })
    })
  })
})

describe('Form', () => {
  let fieldTestRenderer: ReactTestRenderer;
  const mainStore = {
    security: {
      // eslint-disable-next-line @typescript-eslint/no-empty-function
      getAttributePermission: () => {}
    }
  };
  describe('Field component', () => {
    const fieldJSX = (<Provider mainStore={mainStore}>
      <Field entityName="test-entity-name" propertyName="test-property-name"/>;
    </Provider>)

    it('Field with only required props renders', () => {
      TestRenderer.act(() => {
        fieldTestRenderer = TestRenderer.create(fieldJSX)
      })
    });

    it('Field with only required props unmount', () => {
      TestRenderer.act(() => {
        fieldTestRenderer.unmount();
      })
    });
  });

  describe('EnumField', () => {
    const enumFieldJSX = (enumClass: string) => <EnumField enumClass={enumClass}/>

    it('EnumField renders correctly with an existing enumClass', () => {
      TestRenderer.act(() => {
        fieldTestRenderer = TestRenderer.create(enumFieldJSX('Car'));
      });

      const testInstance = fieldTestRenderer.root
      expect(testInstance.props).toHaveProperty('enumClass');
      expect(testInstance.props.enumClass).toEqual('Car');
    });

    it('EnumField unmount', () => {
      TestRenderer.act(() => {
        fieldTestRenderer.unmount();
      });
    });
  })

  describe('FormField component', () => {
    it('FormField renders correctly with required props', () => {
        TestRenderer.act(() => {
          fieldTestRenderer = TestRenderer.create(
            <Provider mainStore={mainStore}>
              <FormField entityName={'carType'} propertyName={'manufacturer'}/>
            </Provider>
          )
        })

        const testInstance = fieldTestRenderer.root;

        const props = testInstance.props.children.props


        expect(props).toHaveProperty('entityName');
        expect(props).toHaveProperty('propertyName');

        expect(props.entityName).toEqual('carType');
        expect(props.propertyName).toEqual('manufacturer');
      }
    );

    it('FormField unmounts', () => {
        TestRenderer.act(() => {
          fieldTestRenderer.unmount();
        })
      }
    )
  })

  describe('EnumField component', () => {
      it('EnumField renders correctly with required props', () => {
        TestRenderer.act(() => {
          fieldTestRenderer = TestRenderer.create(<EnumField enumClass="Car"/>)
        })

        const testInstance = fieldTestRenderer.root
        expect(testInstance.props).toHaveProperty('enumClass');
        expect(testInstance.props.enumClass).toEqual('Car');
      })

      it('EnumField unmounts', () => {
        TestRenderer.act(() => {
          fieldTestRenderer.unmount();
        })
      })
    }
  )
})