Module: tests/utils/rendering

Type Aliases

CustomRenderOptions

Ƭ CustomRenderOptions: RenderOptions & WrapperProps

Defined in

packages/webapp/src/tests/utils/rendering.tsx:22

---

WrapperProps

Ƭ WrapperProps: apiUtils.WrapperProps

Defined in

packages/webapp/src/tests/utils/rendering.tsx:8

Functions

createMockRouterProps

▸ createMockRouterProps(pathName, params?): MemoryRouterProps

Parameters

Name	Type
pathName	string
params?	Record<string, any>

Returns

MemoryRouterProps

Defined in

packages/webapp/src/tests/utils/rendering.tsx:111

---

render

▸ render(ui, options?): Object

Method that extends render method from @testing-library/react package. It composes a wrapper using ApiTestProviders component from @shipfast/webapp-api-client/tests/utils/rendering package and options property that is passed down to parent render method. It also extends returned result with the waitForApolloMocks method.

Parameters

Name	Type
ui	ReactElement<any, string | JSXElementConstructor<any>>
options	CustomRenderOptions

Returns

Object

Name	Type
asFragment	() => DocumentFragment
baseElement	HTMLElement
container	HTMLElement
debug	(baseElement?: Element | DocumentFragment | (Element | DocumentFragment)[], maxLength?: number, options?: PrettyFormatOptions) => void
findAllByAltText	(...args: [id: Matcher, options?: MatcherOptions, waitForElementOptions?: waitForOptions]) => Promise<HTMLElement[]>
findAllByDisplayValue	(...args: [id: Matcher, options?: MatcherOptions, waitForElementOptions?: waitForOptions]) => Promise<HTMLElement[]>
findAllByLabelText	(...args: [id: Matcher, options?: SelectorMatcherOptions, waitForElementOptions?: waitForOptions]) => Promise<HTMLElement[]>
findAllByPlaceholderText	(...args: [id: Matcher, options?: MatcherOptions, waitForElementOptions?: waitForOptions]) => Promise<HTMLElement[]>
findAllByRole	(...args: [role: ByRoleMatcher, options?: ByRoleOptions, waitForElementOptions?: waitForOptions]) => Promise<HTMLElement[]>
findAllByTestId	(...args: [id: Matcher, options?: MatcherOptions, waitForElementOptions?: waitForOptions]) => Promise<HTMLElement[]>
findAllByText	(...args: [id: Matcher, options?: SelectorMatcherOptions, waitForElementOptions?: waitForOptions]) => Promise<HTMLElement[]>
findAllByTitle	(...args: [id: Matcher, options?: MatcherOptions, waitForElementOptions?: waitForOptions]) => Promise<HTMLElement[]>
findByAltText	(...args: [id: Matcher, options?: MatcherOptions, waitForElementOptions?: waitForOptions]) => Promise<HTMLElement>
findByDisplayValue	(...args: [id: Matcher, options?: MatcherOptions, waitForElementOptions?: waitForOptions]) => Promise<HTMLElement>
findByLabelText	(...args: [id: Matcher, options?: SelectorMatcherOptions, waitForElementOptions?: waitForOptions]) => Promise<HTMLElement>
findByPlaceholderText	(...args: [id: Matcher, options?: MatcherOptions, waitForElementOptions?: waitForOptions]) => Promise<HTMLElement>
findByRole	(...args: [role: ByRoleMatcher, options?: ByRoleOptions, waitForElementOptions?: waitForOptions]) => Promise<HTMLElement>
findByTestId	(...args: [id: Matcher, options?: MatcherOptions, waitForElementOptions?: waitForOptions]) => Promise<HTMLElement>
findByText	(...args: [id: Matcher, options?: SelectorMatcherOptions, waitForElementOptions?: waitForOptions]) => Promise<HTMLElement>
findByTitle	(...args: [id: Matcher, options?: MatcherOptions, waitForElementOptions?: waitForOptions]) => Promise<HTMLElement>
getAllByAltText	(...args: [id: Matcher, options?: MatcherOptions]) => HTMLElement[]
getAllByDisplayValue	(...args: [id: Matcher, options?: MatcherOptions]) => HTMLElement[]
getAllByLabelText	(...args: [id: Matcher, options?: SelectorMatcherOptions]) => HTMLElement[]
getAllByPlaceholderText	(...args: [id: Matcher, options?: MatcherOptions]) => HTMLElement[]
getAllByRole	(...args: [role: ByRoleMatcher, options?: ByRoleOptions]) => HTMLElement[]
getAllByTestId	(...args: [id: Matcher, options?: MatcherOptions]) => HTMLElement[]
getAllByText	(...args: [id: Matcher, options?: SelectorMatcherOptions]) => HTMLElement[]
getAllByTitle	(...args: [id: Matcher, options?: MatcherOptions]) => HTMLElement[]
getByAltText	(...args: [id: Matcher, options?: MatcherOptions]) => HTMLElement
getByDisplayValue	(...args: [id: Matcher, options?: MatcherOptions]) => HTMLElement
getByLabelText	(...args: [id: Matcher, options?: SelectorMatcherOptions]) => HTMLElement
getByPlaceholderText	(...args: [id: Matcher, options?: MatcherOptions]) => HTMLElement
getByRole	(...args: [role: ByRoleMatcher, options?: ByRoleOptions]) => HTMLElement
getByTestId	(...args: [id: Matcher, options?: MatcherOptions]) => HTMLElement
getByText	(...args: [id: Matcher, options?: SelectorMatcherOptions]) => HTMLElement
getByTitle	(...args: [id: Matcher, options?: MatcherOptions]) => HTMLElement
queryAllByAltText	(...args: [id: Matcher, options?: MatcherOptions]) => HTMLElement[]
queryAllByDisplayValue	(...args: [id: Matcher, options?: MatcherOptions]) => HTMLElement[]
queryAllByLabelText	(...args: [id: Matcher, options?: SelectorMatcherOptions]) => HTMLElement[]
queryAllByPlaceholderText	(...args: [id: Matcher, options?: MatcherOptions]) => HTMLElement[]
queryAllByRole	(...args: [role: ByRoleMatcher, options?: ByRoleOptions]) => HTMLElement[]
queryAllByTestId	(...args: [id: Matcher, options?: MatcherOptions]) => HTMLElement[]
queryAllByText	(...args: [id: Matcher, options?: SelectorMatcherOptions]) => HTMLElement[]
queryAllByTitle	(...args: [id: Matcher, options?: MatcherOptions]) => HTMLElement[]
queryByAltText	(...args: [id: Matcher, options?: MatcherOptions]) => null | HTMLElement
queryByDisplayValue	(...args: [id: Matcher, options?: MatcherOptions]) => null | HTMLElement
queryByLabelText	(...args: [id: Matcher, options?: SelectorMatcherOptions]) => null | HTMLElement
queryByPlaceholderText	(...args: [id: Matcher, options?: MatcherOptions]) => null | HTMLElement
queryByRole	(...args: [role: ByRoleMatcher, options?: ByRoleOptions]) => null | HTMLElement
queryByTestId	(...args: [id: Matcher, options?: MatcherOptions]) => null | HTMLElement
queryByText	(...args: [id: Matcher, options?: SelectorMatcherOptions]) => null | HTMLElement
queryByTitle	(...args: [id: Matcher, options?: MatcherOptions]) => null | HTMLElement
rerender	(ui: ReactElement<any, string | JSXElementConstructor<any>>) => void
unmount	() => void
waitForApolloMocks	(mockIndex?: number) => Promise<void>

Example

Example usage (reset CommonQuery):

it('should render ', async () => {
  const apolloMocks = [
    fillCommonQueryWithUser(
      currentUserFactory({
        roles: [Role.ADMIN],
      })
    )
  ];
  const { waitForApolloMocks } = render(<Component />, {
    apolloMocks,
  });

  await waitForApolloMocks();

  expect(screen.getByText('Rendered')).toBeInTheDocument();
});

Example

Example usage (append query to default set):

it('should render ', async () => {
  const requestMock = composeMockedQueryResult(...);
  const { waitForApolloMocks } = render(<Component />, {
     apolloMocks: append(requestMock),
  });

  await waitForApolloMocks();

  expect(screen.getByText('Rendered')).toBeInTheDocument();
});

Defined in

packages/webapp/src/tests/utils/rendering.tsx:70

---

renderHook

▸ renderHook<Result, Props>(hook, options?): Object

Method that extends renderHook method from @testing-library/react package. It composes a wrapper using ApiTestProviders component from @shipfast/webapp-api-client/tests/utils/rendering package and options property that is passed down to parent renderHook method. It also extends returned result with the waitForApolloMocks method.

Type parameters

Name
Result
Props

Parameters

Name	Type
hook	(initialProps: Props) => Result
options	CustomRenderOptions

Returns

Object

Name	Type	Description
rerender	(props?: Props) => void	Triggers a re-render. The props will be passed to your renderHook callback.
result	{ current: Result }	This is a stable reference to the latest value returned by your renderHook callback
result.current	Result	The value returned by your renderHook callback
unmount	() => void	Unmounts the test component. This is useful for when you need to test any cleanup your useEffects have.
waitForApolloMocks	(mockIndex?: number) => Promise<void>	-

Defined in

packages/webapp/src/tests/utils/rendering.tsx:92