diff --git a/packages/react-native-web/src/exports/Button/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Button/__tests__/__snapshots__/index-test.js.snap
new file mode 100644
index 00000000..47089f1e
--- /dev/null
+++ b/packages/react-native-web/src/exports/Button/__tests__/__snapshots__/index-test.js.snap
@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/Button prop "accessibilityLabel" 1`] = `
+
+`;
+
+exports[`components/Button prop "color" 1`] = `
+
+`;
+
+exports[`components/Button prop "disabled" 1`] = `
+
+`;
+
+exports[`components/Button prop "testID" 1`] = `
+
+`;
+
+exports[`components/Button prop "title" 1`] = `
+
+`;
diff --git a/packages/react-native-web/src/exports/Button/__tests__/index-test.js b/packages/react-native-web/src/exports/Button/__tests__/index-test.js
index f9920cd1..9b6c8938 100644
--- a/packages/react-native-web/src/exports/Button/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Button/__tests__/index-test.js
@@ -1,22 +1,47 @@
-/* eslint-env jasmine, jest */
-/* eslint-disable react/jsx-no-bind */
-
import Button from '..';
import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { createEventTarget } from 'dom-event-testing-library';
import { render } from '@testing-library/react';
describe('components/Button', () => {
+ test('prop "accessibilityLabel"', () => {
+ const { container } = render();
+ expect(container.firstChild).toMatchSnapshot();
+ });
+
test('prop "color"', () => {
- const onPress = () => {};
const color = 'rgb(0, 0, 255)';
- const { container } = render();
- expect(container.firstChild.style.backgroundColor).toEqual(color);
+ const { container } = render();
+ expect(container.firstChild).toMatchSnapshot();
+ });
+
+ test('prop "disabled"', () => {
+ const { container } = render();
+ expect(container.firstChild).toMatchSnapshot();
+ });
+
+ test('prop "onPress"', () => {
+ const onPress = jest.fn();
+ const ref = React.createRef();
+ act(() => {
+ render();
+ });
+ const target = createEventTarget(ref.current);
+ act(() => {
+ target.pointerdown();
+ target.pointerup();
+ });
+ expect(onPress).toBeCalled();
+ });
+
+ test('prop "testID"', () => {
+ const { container } = render();
+ expect(container.firstChild).toMatchSnapshot();
});
test('prop "title"', () => {
- const onPress = () => {};
- const text = 'Click me';
- const { getByText } = render();
- expect(getByText(text)).toBeDefined();
+ const { container } = render();
+ expect(container.firstChild).toMatchSnapshot();
});
});
diff --git a/packages/react-native-web/src/exports/Button/index.js b/packages/react-native-web/src/exports/Button/index.js
index 3e69ac48..605e7327 100644
--- a/packages/react-native-web/src/exports/Button/index.js
+++ b/packages/react-native-web/src/exports/Button/index.js
@@ -8,10 +8,10 @@
* @flow
*/
+import * as React from 'react';
import StyleSheet from '../StyleSheet';
import TouchableOpacity from '../TouchableOpacity';
import Text from '../Text';
-import React from 'react';
type ButtonProps = {|
accessibilityLabel?: ?string,
@@ -22,7 +22,7 @@ type ButtonProps = {|
title: string
|};
-export default function Button(props: ButtonProps) {
+const Button = React.forwardRef((props, forwardedRef) => {
const { accessibilityLabel, color, disabled, onPress, testID, title } = props;
return (
@@ -31,6 +31,7 @@ export default function Button(props: ButtonProps) {
accessibilityRole="button"
disabled={disabled}
onPress={onPress}
+ ref={forwardedRef}
style={[
styles.button,
color && { backgroundColor: color },
@@ -41,7 +42,9 @@ export default function Button(props: ButtonProps) {
{title}
);
-}
+});
+
+Button.displayName = 'Button';
const styles = StyleSheet.create({
button: {
@@ -62,3 +65,7 @@ const styles = StyleSheet.create({
color: '#a1a1a1'
}
});
+
+export type { ButtonProps };
+
+export default Button;