@testing-library/react-native#render TypeScript Examples

describe('Rendering', () => {
  beforeEach(() => {
    props = createTestProps();
    component = createTestElement(<Screen {...props} />);
    testingLib = render(component);
  });

  it('renders without crashing', () => {
    const { baseElement } = testingLib;
    expect(baseElement).toMatchSnapshot();
    expect(baseElement).toBeTruthy();
  });
});

describe('Divider component', () => {
  it('Should render divider with default type', () => {
    const { queryByTestId } = renderDivider(render)

    expect(queryByTestId('divider')?.props).toHaveProperty('type', 'fullBleed')
  })
  it('Should render divider with inset type', () => {
    const { queryByTestId } = renderDivider(render, 'inset')

    expect(queryByTestId('divider')?.props).toHaveProperty('type', 'inset')
  })
  it('Should render divider with middle type', () => {
    const { queryByTestId } = renderDivider(render, 'middle')

    expect(queryByTestId('divider')?.props).toHaveProperty('type', 'middle')
  })

  it('Should render divider component fullBleed', () => {
    const divider = renderDivider(renderer.create)

    expect(divider).toMatchSnapshot()
  })

  it('Should render divider component inset', () => {
    const divider = renderDivider(renderer.create, 'inset').toJSON()

    expect(divider).toMatchSnapshot()
  })

  it('Should render divider component middle', () => {
    const divider = renderDivider(renderer.create, 'middle').toJSON()

    expect(divider).toMatchSnapshot()
  })
})

function runTest(name: string, props?: ObjectPartial<RadioProps>) {
  test(name, async () => {
    const {getAllByTestId} = render(<Radio {...defaultProps} {...props} />);
    const radioItems = getAllByTestId('radio-item');

    for (const radioItem of radioItems) {
      fireEvent.press(radioItem);
    }
  });
}

test('should get correct value when Component is updated', async () => {
  const Child = () => <p>test</p>;
  const Counter = () => {
    const [count, setCount] = React.useState(0);
    return (
      <View>
        <Text>{count}</Text>
        <Child />
        <Button title="button" onPress={() => setCount((c) => c + 1)} />
      </View>
    );
  };

  const { renderCount } = perf(React);

  const { getByText } = render(<Counter />);

  fireEvent.press(getByText('button'));

  await wait(() =>
    expect(renderCount.current).toEqual({
      Counter: { value: 2 },
      Child: { value: 2 },
    }),
  );
});

function runTest(name: string, props?: ObjectPartial<SliderProps>) {
  test(name, async () => {
    const {getByTestId} = render(<Slider {...defaultProps} {...props} />);
    const trackContainer = getByTestId('track-container');

    fireEvent(trackContainer, 'responderStart');
    fireEvent(trackContainer, 'responderMove');
    fireEvent(trackContainer, 'layout', {nativeEvent: {layout: {width: 250}}});

    const thumbContainer = getByTestId('thumb-container');

    fireEvent(thumbContainer, 'layout', {
      nativeEvent: {layout: {width: 10, height: 20}},
    });

    fireEvent(trackContainer, 'startShouldSetResponder');
    fireEvent(trackContainer, 'responderStart', {
      nativeEvent: {pageX: 50, locationX: 50},
    });
    fireEvent(trackContainer, 'responderMove', {
      nativeEvent: {pageX: 100, locationX: 100},
    });

    if (props?.button) {
      const buttonStart = getByTestId('button-start');
      const buttonEnd = getByTestId('button-end');

      fireEvent.press(buttonStart);
      fireEvent.press(buttonEnd);
    }
  });
}

describe('[AppProvider] error rendering test', () => {
  let error: Error;
  const component = <FakeChild />;

  it('should throw error when [AppProvider] is not wrapped', () => {
    try {
      render(component);
    } catch (e) {
      error = e;
    }
    expect(error).toBeInstanceOf(Error);
  });
});

test('share button renders when provided with value', async () => {
  const { getByTestId } = render(
    <Header shareContent="share me">My Title</Header>
  );

  expect(getByTestId('header-text').props.children).toEqual('My Title');
  expect(getByTestId('header-share')).toBeDefined();

  act(() => {
    fireEvent.press(getByTestId('header-share'));
  });

  expect(Share.share).toHaveBeenCalledWith({ message: 'share me' });
});

function runTest(name: string, props?: ObjectPartial<ModalProps>) {
  test(name, async () => {
    const {getByTestId, rerender} = render(
      <Modal {...defaultProps} {...props} />,
    );
    const backdrop = getByTestId('backdrop');

    fireEvent.press(backdrop);
    rerender(<Modal {...defaultProps} {...props} visible={!props?.visible} />);
  });
}

describe('CodeInput', () => {
  const changeMock = jest.fn();
  let componentQuery: any;

  beforeEach(async () => {
    componentQuery = await waitFor(() =>
      render(
        <StorageServiceProvider>
          <ThemeProvider>
            <CodeInput value="" onChange={changeMock} accessibilityLabel="codeInput" />
          </ThemeProvider>
        </StorageServiceProvider>,
      ),
    );
  });

  afterEach(() => {
    jest.clearAllMocks();
    jest.resetAllMocks();
  });

  it('returns trimmed text', async () => {
    const textInput = componentQuery.getByTestId('textInput');
    fireEvent.changeText(textInput, ' MYSECRETCODE ');
    expect(changeMock).toHaveBeenCalledWith('MYSECRETCODE');
  });

  // eslint-disable-next-line jest/no-commented-out-tests
  /* TODO: uncomment after https://github.com/cds-snc/covid-alert-app/pull/844 is merged
  it('disallows special characters on input', () => {
    const changeMock = jest.fn();
    const textInput = componentQuery.getByHintText('codeInput');
    fireEvent.changeText(textInput, ' MY?SECRETCODE ');
    expect(changeMock).toBeCalledWith('MYSECRETCODE');
  });
  */
});

describe('Interaction', () => {
  beforeEach(() => {
    props = createTestProps();
    component = createTestElement(<Screen {...props} />);
    testingLib = render(component);
  });

  it('should simulate onClick', () => {
    expect(testingLib.baseElement).toMatchSnapshot();
    // const btn = testingLib.queryByTestId('btn');
    // act(() => {
    //   fireEvent.press(btn);
    //   fireEvent.press(btn);
    // });
    // expect(cnt).toBe(3);
  });
});

it('validates credit card number', async () => {
  const { queryByText, getByTestId } = get.render()

  // does not display validation message until input is filled
  const cardInput = getByTestId('TextField.cardNumber')
  fireEvent.changeText(cardInput, '55555555')
  await waitFor(() => {
    expect(queryByText(/This card number looks invalid./)).toBeNull()
  })

  // invalid card
  fireEvent.changeText(cardInput, '5555555555554440')
  await waitFor(() => {
    expect(queryByText(/This card number looks invalid./)).not.toBeNull()
  })

  // valid card
  fireEvent.changeText(cardInput, '5555 5555 5555 4444')
  await waitFor(() => {
    expect(queryByText(/This card number looks invalid./)).toBeNull()
  })
})

describe('[Stack] navigator', () => {
  beforeEach(() => {
    props = createTestProps();
    component = createTestElement(<StackNavigator {...props} />);
  });

  it('should renders without crashing', async () => {
    const { container } = render(component);
    await act(() => wait());
    expect(container).toBeTruthy();
    expect(container).toMatchSnapshot();
  });
});

test('Button', () => {
  const handlePress = jest.fn()

  const { getByText } = render(
    <Button
      onPress={handlePress}
      size="sm"
      color="purple"
    >
      Press Me
    </Button>,
  )

  const button = getByText('Press Me')
  fireEvent.press(button)
  expect(handlePress).toBeCalledTimes(1)
})

describe('Dashboard', () => {
  it('should be able to calculate the cart total', async () => {
    const { getByText } = render(<FloatingCart />);

    expect(getByText('8000')).toBeTruthy();
  });

  it('should be able to show the total quantity of itens in the cart', async () => {
    const { getByText } = render(<FloatingCart />);

    expect(getByText('15 itens')).toBeTruthy();
  });

  it('should be able to navigate to the cart', async () => {
    const { getByTestId } = render(<FloatingCart />);

    act(() => {
      fireEvent.press(getByTestId('navigate-to-cart-button'));
    });

    expect(navigate).toHaveBeenCalledWith('Cart');
  });
});

test('SwipeWindow', () => {
  const handleSwipeRight = jest.fn()
  const setFinished = jest.fn()
  const setRestaurants = jest.fn()

  render(
    <SwipeWindow
      restaurants={[restaurant]}
      handleSwipeRight={handleSwipeRight}
      setFinished={setFinished}
      setRestaurants={setRestaurants}
    />,
  )
})

function runTest(
  name: string,
  props?: ObjectPartial<ButtonGroupProps>,
  rerenderProps?: ObjectPartial<ButtonGroupProps>,
) {
  test(name, async () => {
    const {getAllByTestId, rerender} = render(
      <ButtonGroup {...defaultProps} {...props} />,
    );
    const buttons = getAllByTestId('button');

    for (const button of buttons) {
      fireEvent.press(button);
    }

    if (rerenderProps) {
      rerender(<ButtonGroup {...defaultProps} {...props} {...rerenderProps} />);
    }
  });
}

describe('Tab component actions', () => {
  it('Should call the given onChange function', () => {
    const onChangeMock = jest.fn()
    const { queryByTestId } = renderTab(render, {
      ...defaultProps,
      onChange: onChangeMock
    })

    const secondTab = queryByTestId('ds-tab').children[1]

    fireEvent.press(secondTab)

    expect(onChangeMock).toHaveBeenCalledTimes(1)
  })

  it('Should have bottom border on the first active tab as default', () => {
    // corrigir
    const { queryByTestId } = renderTab(render, defaultProps)

    const firstTab = queryByTestId('ds-tab-item-0')

    expect(firstTab).toHaveStyle({
      borderBottomColor: '#F4F4'
    })
  })

  it('Should add bottom border on tab item when the given tab is pressed', () => {
    const { queryByTestId } = renderTab(render, defaultProps)

    const thirdTab = queryByTestId('ds-tab-item-2')

    fireEvent.press(thirdTab)

    expect(thirdTab).toHaveStyle({
      borderBottomColor: '#F4F4'
    })
  })
})

function runTest(name: string, props?: ObjectPartial<CollapseProps>) {
  test(name, async () => {
    const {getByTestId, rerender} = render(
      <Collapse {...defaultProps} {...props} />,
    );
    const view = getByTestId('view');

    fireEvent(view, 'layout', {nativeEvent: {layout: {}}});
    rerender(
      <Collapse {...defaultProps} {...props} visible={!props?.visible} />,
    );
    fireEvent(view, 'layout', {nativeEvent: {layout: {}}});
  });
}

setup = (propOverrides?: Partial<SnackbarProps>) => {
  const props = { ...defaultProps, ...propOverrides }

  const result = render(<Snackbar {...props} />, { wrapper: ProviderWrapper })

  return {
    props,
    result
  }
}

function runTest(name: string, props?: ObjectPartial<MarqueeProps>) {
  test(name, async () => {
    const {getByTestId} = render(<Marquee {...defaultProps} {...props} />);
    const container = getByTestId('container');
    const width =
      props?.containerStyle?.width || defaultProps.containerStyle?.width || 0;

    fireEvent(container, 'layout', {
      nativeEvent: {
        layout: {
          width,
        },
      },
    });

    if (width) {
      const marquee = getByTestId('marquee');

      fireEvent(marquee, 'contentSizeChange');
    }
  });
}

def('render', () => () => render(<Wrapper />))

describe('runs basic test', () => {
  it('renders a view', () => {
    render(<View />)
  })
})

renderWithTheme: CustomRender = (ui, options) => render(
  ui,
  { wrapper: WithTheme, ...options },
)

function runTest(name: string, props?: ObjectPartial<CheckboxNestedProps>) {
  test(name, async () => {
    render(<CheckboxNested {...defaultProps} {...props} />);
  });
}

it("Renders Horizontal Masonry", () => {
  const { queryByText } = render(<MasonryTestComponent />);

  const text1 = queryByText(column1Text);
  expect(text1).toBeTruthy();
  const text2 = queryByText(column2Text);
  expect(text2).toBeTruthy();
});

describe('Dashboard', () => {
  it('should be able to list products', async () => {
    apiMock.onGet('products').reply(200, [
      {
        id: '1234',
        title: 'Cadeira Rivatti',
        image_url:
          'https://http2.mlstatic.com/cadeira-rivatti-branca-pes-madeira-confortavel-bonita-D_NQ_NP_981901-MLB20422264882_092015-F.jpg',
        price: 400,
      },
      {
        id: '123456',
        title: 'Poltrona de madeira',
        image_url:
          'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRod5Tf0R0LkCjClrgAJU0tM713nyqHTP2lFbXU1o5zheYpwgfonTTde8swBNlahgij4hGeOgn7hQ&usqp=CAc',
        price: 600,
      },
    ]);

    const { getByText, getByTestId } = render(<Dashboard />);

    await wait(() => expect(getByText('Cadeira Rivatti')).toBeTruthy(), {
      timeout: 200,
    });

    expect(getByText('Cadeira Rivatti')).toBeTruthy();
    expect(getByTestId('add-to-cart-1234')).toBeTruthy();

    expect(getByText('Poltrona de madeira')).toBeTruthy();
    expect(getByTestId('add-to-cart-123456')).toBeTruthy();
  });

  it('should be able to add item to cart', async () => {
    const useCartMocked = mocked(useCart);

    const addToCart = jest.fn();

    useCartMocked.mockReturnValue({
      addToCart,
      products: [],
      increment: jest.fn(),
      decrement: jest.fn(),
    });

    const products = [
      {
        id: '1234',
        title: 'Cadeira Rivatti',
        image_url:
          'https://http2.mlstatic.com/cadeira-rivatti-branca-pes-madeira-confortavel-bonita-D_NQ_NP_981901-MLB20422264882_092015-F.jpg',
        price: 400,
      },
      {
        id: '123456',
        title: 'Poltrona de madeira',
        image_url:
          'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRod5Tf0R0LkCjClrgAJU0tM713nyqHTP2lFbXU1o5zheYpwgfonTTde8swBNlahgij4hGeOgn7hQ&usqp=CAc',
        price: 600,
      },
    ];

    apiMock.onGet('products').reply(200, products);

    const { getByText, getByTestId } = render(<Dashboard />);

    await wait(() => expect(getByText('Cadeira Rivatti')).toBeTruthy(), {
      timeout: 200,
    });

    act(() => {
      fireEvent.press(getByTestId('add-to-cart-1234'));
    });

    expect(addToCart).toHaveBeenCalledWith(products[0]);
  });
});

function runTest(name: string, props?: ObjectPartial<AvatarProps>) {
  test(name, async () => {
    render(<Avatar {...defaultProps} {...props} />);
  });
}

it("Renders Vertical Masonry", () => {
  const { queryByText } = render(<MasonryTestComponent isHorizontal={false} />);

  const text1 = queryByText(column1Text);
  expect(text1).toBeTruthy();
  const text2 = queryByText(column2Text);
  expect(text2).toBeTruthy();
});

function runTest(name: string, props?: ObjectPartial<ChipProps>) {
  test(name, async () => {
    const {getAllByTestId, getByTestId, rerender} = render(
      <Chip {...defaultProps} {...props} />,
    );
    const chips = getAllByTestId('chip');

    if (props?.horizontal) {
      const list = getByTestId('list');

      fireEvent(list, 'contentSizeChange', 2000, 48);
      fireEvent(list, 'layout', {
        nativeEvent: {layout: {x: 0, y: 0, width: 1000, height: 48}},
      });
      fireEvent(list, 'scroll', {
        nativeEvent: {
          contentOffset: {
            x: 250,
            y: 0,
          },
          contentSize: {
            height: 48,
            width: 1000,
          },
          layoutMeasurement: {
            height: 1000,
            width: 500,
          },
        },
      });

      if (props?.horizontalScrollButton) {
        const buttonLeft = getByTestId('button-left');
        const buttonRight = getByTestId('button-right');

        fireEvent.press(buttonLeft);
        fireEvent.press(buttonRight);
      }
    }

    for (const chip of chips) {
      fireEvent.press(chip);
    }

    if (props?.leftIconAction && props.leftIconAction('', false) === 'delete') {
      const icons = getAllByTestId('icon-delete');

      for (const icon of icons) {
        fireEvent.press(icon);
      }
    }

    rerender(<Chip {...defaultProps} {...props} selectedId={undefined} />);
  });
}