react-test-renderer#ReactTestRenderer TypeScript Examples

The following examples show how to use react-test-renderer#ReactTestRenderer. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: CharInput.test.tsx    From jmix-frontend with Apache License 2.0 6 votes vote down vote up 
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());
  })
})
Example #2
Source File: index.test.tsx    From scorpio-h5-design with MIT License 6 votes vote down vote up 
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!');
  });
});
Example #3
Source File: IdeLoader.spec.tsx    From che-dashboard-next with Eclipse Public License 2.0 6 votes vote down vote up 
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>,
  );
}
Example #4
Source File: FactoryLoader.spec.tsx    From che-dashboard-next with Eclipse Public License 2.0 6 votes vote down vote up 
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>,
  );
}
Example #5
Source File: LogsTab.spec.tsx    From che-dashboard-next with Eclipse Public License 2.0 6 votes vote down vote up 
function renderComponent(
  store: Store,
  workspaceId: string,
): ReactTestRenderer {
  return renderer.create(
    <Provider store={store}>
      <LogsTab
        workspaceId={workspaceId}
      />
    </Provider>,
  );
}
Example #6
Source File: LogsTools.spec.tsx    From che-dashboard-next with Eclipse Public License 2.0 6 votes vote down vote up 
function renderComponent(
  logs: string[],
  handleExpand: (isExpand: boolean) => void
): ReactTestRenderer {
  return renderer.create(
    <LogsTools
      logs={logs}
      handleExpand={handleExpand}
    />
  );
}
Example #7
Source File: DevfileEditor.spec.tsx    From che-dashboard-next with Eclipse Public License 2.0 6 votes vote down vote up 
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>,
  );
}
Example #8
Source File: UuidInput.test.tsx    From jmix-frontend with Apache License 2.0 6 votes vote down vote up 
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());
  })
})
Example #9
Source File: LongInput.test.tsx    From jmix-frontend with Apache License 2.0 6 votes vote down vote up 
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());
  })
})
Example #10
Source File: IntegerInput.test.tsx    From jmix-frontend with Apache License 2.0 6 votes vote down vote up 
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());
  })
})
Example #11
Source File: InputWithMask.test.tsx    From jmix-frontend with Apache License 2.0 6 votes vote down vote up 
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());
  })
})
Example #12
Source File: DoubleInput.test.tsx    From jmix-frontend with Apache License 2.0 6 votes vote down vote up 
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());
  })
})
Example #13
Source File: BigDecimalInput.test.tsx    From jmix-frontend with Apache License 2.0 6 votes vote down vote up 
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());
  })
})
Example #14
Source File: HorizontalMenu.test.tsx    From jmix-frontend with Apache License 2.0 5 votes vote down vote up 
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();
      })
    })
  })
})
Example #15
Source File: VerticalMenu.test.tsx    From jmix-frontend with Apache License 2.0 5 votes vote down vote up 
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();
      })
    })
  })
})
Example #16
Source File: IF.test.tsx    From jmix-frontend with Apache License 2.0 5 votes vote down vote up 
compWithIf: ReactTestRenderer
Example #17
Source File: timer.test.tsx    From jmix-frontend with Apache License 2.0 5 votes vote down vote up 
TestedComponent: ReactTestRenderer
Example #18
Source File: MenuItem.test.tsx    From jmix-frontend with Apache License 2.0 4 votes vote down vote up 
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();
        })
      })
    })
  })
})
Example #19
Source File: SubMenuItem.test.tsx    From jmix-frontend with Apache License 2.0 4 votes vote down vote up 
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();
        })
      })
    })
  })
})
Example #20
Source File: Form.test.tsx    From jmix-frontend with Apache License 2.0 4 votes vote down vote up 
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();
        })
      })
    }
  )
})