Skip to content

Instantly share code, notes, and snippets.

@martinhj

martinhj/Button.test.js

Created November 29, 2019 12:35
Show Gist options
  • Save martinhj/feac8b307b99a6db64efc9189e8b4d28 to your computer and use it in GitHub Desktop.
Save martinhj/feac8b307b99a6db64efc9189e8b4d28 to your computer and use it in GitHub Desktop.
Download ZIP
Jest / @testing-library/react-native test examples
Raw
Button.test.js
import React from 'react';
import Button from '.';
import { AlertButton, SubmitButton } from '.';
import { fireEvent, render, wait } from '@testing-library/react-native';
import Icon from '../Icon';
const caption = 'Test button';
const color = '#f00f0f';
const accessibilityLabel = 'This is a test button';
const isDisableColor = '#dfdfdf'; //ios // android: #a1a1a1
describe('<Button>', () => {
describe('as default', () => {
const buttonCallbackFunction = jest.fn(() => null);
const activeButton = render(
<Button
title={caption}
color={color}
onPress={buttonCallbackFunction}
testID="button"
accessibilityLabel={accessibilityLabel}
/>
);
const { getByTestId, queryAllByTestId, getByText } = activeButton;
const button = getByTestId('button');
it('Renders successfully', () => {
expect(activeButton).toBeDefined();
});
it('renders correctly', () => {
const activeButtonAsJson = activeButton.asJSON();
expect(activeButtonAsJson).toMatchSnapshot();
});
it('Outputs the correct text', () => {
expect(getByText(caption)).toBeTruthy();
});
it('Fires the assigned event on press', async () => {
fireEvent.press(button);
fireEvent.press(button);
await wait(() =>
expect(buttonCallbackFunction.mock.calls.length).toBe(2)
);
});
it(`doesn't render an <Icon>`, () => {
expect(queryAllByTestId('icon-image').length).toBe(0);
});
it('renders with color #f00f0f', () => {
const whatIsThis = getByTestId('button').children[0];
const backgroundColorOnTestElem =
whatIsThis &&
typeof whatIsThis !== 'string' &&
whatIsThis.props.style.backgroundColor;
expect(backgroundColorOnTestElem).toBe(color);
});
});
describe('with <Icon>', () => {
const buttonIcon = require('../../assets/icons/icon-easyuse-white.png');
const buttonWithIcon = render(
<Button
icon={<Icon imageSource={buttonIcon} />}
title={caption}
color={color}
onPress={() => {}}
testID="button"
accessibilityLabel={accessibilityLabel}
/>
);
const { getByTestId } = buttonWithIcon;
const button = getByTestId('button');
it('displays an icon', () => {
expect(getByTestId('icon-image')).toBeTruthy();
});
it('displays the submit icon', () => {
expect(getByTestId('icon-image').props.source.testUri).toMatch(
/icon-easyuse/i
);
});
});
describe('in disabled/inactive state', () => {
const buttonCallbackFunction = jest.fn(() => null);
const disabledButton = () =>
render(
<Button
title={caption}
onPress={buttonCallbackFunction}
color={color}
testID="button"
accessibilityLabel={accessibilityLabel}
disabled={true}
/>
);
it('outputs the correct text', () => {
const { getByText } = disabledButton();
expect(getByText(caption)).toBeTruthy();
});
it(`doesn't fire event on press`, async () => {
const { getByTestId } = disabledButton();
const button = getByTestId('button');
fireEvent.press(button);
await wait(() =>
expect(buttonCallbackFunction.mock.calls.length).toBe(0)
);
});
it(`Shows correct color when disabled`, () => {
const gotStyles = (el: any) => el.props && el.props.style;
const { getByTestId } = disabledButton();
const whatIsThis = getByTestId('button').children.find(gotStyles);
const backgroundColorOnTestElem =
whatIsThis &&
typeof whatIsThis !== 'string' &&
whatIsThis.props.style.backgroundColor;
expect(backgroundColorOnTestElem).toBe(isDisableColor);
});
});
describe('in alert/danger state', () => {
const buttonCallbackFunction = jest.fn(() => null);
const { getByText, getByTestId } = render(
<AlertButton
title={caption}
onPress={buttonCallbackFunction}
testID="button"
accessibilityLabel={accessibilityLabel}
/>
);
it('displays the alert icon', () => {
expect(getByTestId('icon-image').props.source.testUri).toMatch(
/icon-alert/i
);
});
it('displays correct title', () => {
expect(getByText(caption)).toBeDefined();
});
});
describe('as a submit button', () => {
const buttonCallbackFunction = jest.fn(() => null);
const { getByText, getByTestId } = render(
<SubmitButton
title={caption}
onPress={buttonCallbackFunction}
testID="button"
accessibilityLabel={accessibilityLabel}
/>
);
it('displays correct title', () => {
expect(getByText(caption)).toBeTruthy();
});
it('displays an icon', () => {
expect(getByTestId('icon-image')).toBeTruthy();
});
it('displays the submit icon', () => {
expect(getByTestId('icon-image').props.source.testUri).toMatch(
/icon-submit/i
);
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment