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

The following examples show how to use @testing-library/react-native#cleanup. 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: cart.spec.tsx    From rocketseat-gostack-11-desafios with MIT License 4 votes vote down vote up 
describe('Cart Context', () => {
  afterEach(() => {
    mockedAsyncStorage.setItem.mockClear();
    mockedAsyncStorage.getItem.mockClear();

    cleanup();
  });

  it('should be able to add products to the cart', async () => {
    const { getByText, getByTestId } = render(
      <CartProvider>
        <TestComponent />
      </CartProvider>,
    );

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

    expect(getByText('Test product')).toBeTruthy();
    expect(getByText('1')).toBeTruthy();
  });

  it('should be able to increment quantity', async () => {
    const { getByText, getByTestId } = render(
      <CartProvider>
        <TestComponent />
      </CartProvider>,
    );

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

    act(() => {
      fireEvent.press(getByTestId('increment'));
    });

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

  it('should be able to decrement quantity', async () => {
    const { getByText, getByTestId } = render(
      <CartProvider>
        <TestComponent />
      </CartProvider>,
    );

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

    act(() => {
      fireEvent.press(getByTestId('increment'));
    });

    act(() => {
      fireEvent.press(getByTestId('decrement'));
    });

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

  it('should load products from AsyncStorage', async () => {
    mockedAsyncStorage.getItem.mockReturnValue(
      new Promise(resolve =>
        resolve(
          JSON.stringify([
            {
              id: '1234',
              title: 'Test product',
              image_url: 'test',
              price: 1000,
              quantity: 0,
            },
          ]),
        ),
      ),
    );

    const { getByText } = render(
      <CartProvider>
        <TestComponent />
      </CartProvider>,
    );

    await wait(() => expect(getByText('Test product')).toBeTruthy());

    expect(getByText('Test product')).toBeTruthy();
  });

  it('should store products in AsyncStorage while adding, incrementing and decrementing', async () => {
    const { getByTestId } = render(
      <CartProvider>
        <TestComponent />
      </CartProvider>,
    );

    await act(async () => {
      fireEvent.press(getByTestId('add-to-cart'));
      fireEvent.press(getByTestId('increment'));
      fireEvent.press(getByTestId('decrement'));
    });

    expect(mockedAsyncStorage.setItem).toHaveBeenCalledTimes(3);
  });
});
Example #2
Source File: Snackbar.test.tsx    From natds-rn with ISC License 4 votes vote down vote up 
// eslint-disable-next-line max-statements
describe('Snackbar', () => {
  beforeEach(() => {
    jest.useFakeTimers()
  })

  afterEach(() => {
    cleanup()
    jest.useRealTimers()
  })

  it('should take a snapshot', () => {
    const component = setup()

    expect(component).toMatchSnapshot()
  })

  it('message is presented correctly', () => {
    const expectedMessage = 'A snackbar message'

    const { result } = setup({ message: expectedMessage })
    const element = result.queryByTestId('natds-snackbar-text')

    expect(element).toHaveTextContent(expectedMessage)
  })

  describe('when setting a type', () => {
    it('displays a warning type correctly', () => {
      const type = 'warning'

      const { result } = setup({ type })
      const wrapperElement = result.queryByTestId('natds-snackbar-wrapper')
      const textElement = result.queryByTestId('natds-snackbar-text')

      expect(wrapperElement).toHaveStyle({ backgroundColor: theme.color.warning })
      expect(textElement).toHaveStyle({ color: theme.color.onWarning })
    })

    it('displays a error type correctly', () => {
      const type = 'error'

      const { result } = setup({ type })
      const wrapperElement = result.queryByTestId('natds-snackbar-wrapper')
      const textElement = result.queryByTestId('natds-snackbar-text')

      expect(wrapperElement).toHaveStyle({ backgroundColor: theme.color.alert })
      expect(textElement).toHaveStyle({ color: theme.color.onAlert })
    })

    it('displays a success type correctly', () => {
      const type = 'success'

      const { result } = setup({ type })
      const wrapperElement = result.queryByTestId('natds-snackbar-wrapper')
      const textElement = result.queryByTestId('natds-snackbar-text')

      expect(wrapperElement).toHaveStyle({ backgroundColor: theme.color.success })
      expect(textElement).toHaveStyle({ color: theme.color.onSuccess })
    })

    it('displays a info type correctly', () => {
      const type = 'info'

      const { result } = setup({ type })
      const wrapperElement = result.queryByTestId('natds-snackbar-wrapper')
      const textElement = result.queryByTestId('natds-snackbar-text')

      expect(wrapperElement).toHaveStyle({ backgroundColor: theme.color.link })
      expect(textElement).toHaveStyle({ color: theme.color.onLink })
    })

    it('displays a standard type correctly', () => {
      const type = 'standard'

      const { result } = setup({ type })
      const wrapperElement = result.queryByTestId('natds-snackbar-wrapper')
      const textElement = result.queryByTestId('natds-snackbar-text')

      expect(wrapperElement).toHaveStyle({ backgroundColor: theme.color.onSurface })
      expect(textElement).toHaveStyle({ color: theme.color.surface })
    })
  })

  describe('when past a certain period of time', () => {
    it('hides snackbar automatically', () => {
      const autoHideDuration = 5000

      const { props } = setup({ autoHideDuration })

      act(() => {
        jest.advanceTimersByTime(autoHideDuration)
      })

      expect(props.onClose).toHaveBeenCalled()
    })
  })

  describe('when setting a button text', () => {
    it('displays correctly', () => {
      const expectedButtonText = 'OK'

      const { result } = setup({ buttonText: expectedButtonText })
      const element = result.queryByTestId('button-label')

      expect(element).not.toBeNull()
      expect(element).toHaveTextContent(expectedButtonText)
    })

    describe('when pressing it', () => {
      it('dismisses the snackbar', () => {
        const expectedButtonText = 'OK'

        const { props, result } = setup({ buttonText: expectedButtonText })
        const element = result.getByTestId('natds-snackbar-button')

        fireEvent.press(element)
        expect(props.onClose).toHaveBeenCalled()
      })
    })
  })

  describe('when not setting a button text', () => {
    it('displays correctly', () => {
      const { result } = setup()
      const element = result.queryByTestId('natds-snackbar-button')

      expect(element).toBeNull()
    })
  })

  describe('when setting to be open', () => {
    it('displays correctly', () => {
      const { result } = setup({ open: true })
      const element = result.queryByTestId('natds-snackbar-wrapper')

      expect(element).not.toBeNull()
    })

    describe('when setting it back to be closed', () => {
      it('displays correctly', () => {
        const { props, result } = setup({ open: true })

        result.rerender(<Snackbar {...props} open={false} />)
        // eslint-disable-next-line max-nested-callbacks
        act(() => {
          jest.advanceTimersByTime(195)
        })
        const element = result.queryByTestId('natds-snackbar-wrapper')

        expect(element).toBeNull()
      })
    })
  })

  describe('when setting to be closed', () => {
    it('displays correctly', () => {
      const { result } = setup({ open: false })
      const element = result.queryByTestId('natds-snackbar-wrapper')

      expect(element).toBeNull()
    })
  })
})