test: write unit tests for existing components

.eslintrc.js

@@ -2,7 +2,7 @@ module.exports = {
   extends: [
     'airbnb',
     'plugin:prettier/recommended',
-    'prettier/react'
+    'prettier/react',
     'plugin:jest/recommended'
   ],
   parser: '@typescript-eslint/parser',

example/babel.config.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const pak = require('../package.json');
 
-module.exports = function (api) {
+module.exports = function babelConfig(api) {
   api.cache(true);
 
   return {

example/webpack.config.js

@@ -7,7 +7,7 @@ const root = path.resolve(__dirname, '..');
 /* eslint-disable-next-line */
 const node_modules = path.join(__dirname, 'node_modules');
 
-module.exports = async function (env, argv) {
+module.exports = async function webpackConfig(env, argv) {
   const config = await createExpoWebpackConfigAsync(env, argv);
 
   config.module.rules.push({

package.json

@@ -21,6 +21,7 @@
   ],
   "scripts": {
     "test": "jest",
+    "test:watch": "jest --watch",
     "typescript": "tsc --noEmit",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "prepare": "bob build",

src/AppBar/AppBar.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { testId } from './AppBar';
+import { AppBar, Text } from '..';
+
+describe('<AppBar />', () => {
+  it('should render children', () => {
+    const { getByTestId } = render(
+      <AppBar>
+        <Text>This is an AppBar</Text>
+      </AppBar>
+    );
+
+    expect(getByTestId(testId)).toHaveTextContent('This is an AppBar');
+  });
+
+  it('should render custom styles', () => {
+    const style = { marginTop: 42 };
+
+    const { getByTestId } = render(
+      <AppBar style={style}>
+        <Text>This is an AppBar</Text>
+      </AppBar>
+    );
+
+    expect(getByTestId(testId)).toHaveStyle(style);
+  });
+});

src/AppBar/AppBar.tsx

@@ -4,14 +4,18 @@ import { StyleSheet, View } from 'react-native';
 import { original as theme } from '../common/themes';
 import { border } from '../common/styles';
 
+export const testId = 'app-bar';
+
 type Props = {
   children: React.ReactNode;
   style?: Object;
 };
 
 const AppBar = ({ children, style = {} }: Props) => {
   return (
-    <View style={[styles.container, border.default, style]}>{children}</View>
+    <View style={[styles.container, border.default, style]} testID={testId}>
+      {children}
+    </View>
   );
 };
 

src/Button/Button.spec.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+
+import { blockSizes, ButtonSizes, testId } from './Button';
+import { Button, Text } from '..';
+
+const noop = () => {};
+
+describe('<Button />', () => {
+  it('should render children', () => {
+    const { getByText } = render(
+      <Button onPress={noop}>
+        <Text>Potato</Text>
+      </Button>
+    );
+
+    expect(getByText('Potato')).toBeTruthy();
+  });
+
+  it('should fire press', () => {
+    const onButtonPress = jest.fn();
+
+    const { getByTestId } = render(
+      <Button onPress={onButtonPress}>
+        <Text>Ok</Text>
+      </Button>
+    );
+
+    fireEvent(getByTestId(testId), 'press');
+    expect(onButtonPress).toHaveBeenCalled();
+  });
+
+  it('should handle square sizes', () => {
+    const sizes: ButtonSizes[] = ['sm', 'md', 'lg'];
+
+    sizes.forEach(size => {
+      const { getByTestId } = render(
+        <Button onPress={noop} size={size} square>
+          <Text>Ok</Text>
+        </Button>
+      );
+
+      expect(getByTestId(testId)).toHaveStyle({ width: blockSizes[size] });
+    });
+  });
+
+  it('should render custom styles', () => {
+    const style = { backgroundColor: 'papayawhip' };
+
+    const { getByTestId } = render(
+      <Button onPress={noop} style={style}>
+        <Text>Ok</Text>
+      </Button>
+    );
+
+    expect(getByTestId(testId)).toHaveStyle(style);
+  });
+
+  it('should render a full width button', () => {
+    const { getByTestId } = render(
+      <Button onPress={noop} fullWidth>
+        <Text>Ok</Text>
+      </Button>
+    );
+
+    expect(getByTestId(testId)).toHaveStyle({ width: '100%' });
+  });
+});

src/Button/Button.tsx

@@ -4,11 +4,15 @@ import { StyleSheet, TouchableHighlight, Text } from 'react-native';
 import { original as theme } from '../common/themes';
 import { border, box } from '../common/styles';
 
+export const testId = 'button';
+
+export type ButtonSizes = 'sm' | 'md' | 'lg';
+
 type Props = {
   children: React.ReactNode;
   onPress: () => void;
   variant?: 'menu' | 'flat' | 'default';
-  size?: 'sm' | 'md' | 'lg';
+  size?: ButtonSizes;
   style?: Object;
   disabled?: boolean;
   fullWidth?: boolean;
@@ -62,6 +66,7 @@ const Button = ({
       onHideUnderlay={() => setIsPressed(false)}
       onShowUnderlay={() => setIsPressed(true)}
       underlayColor={theme.material}
+      testID={testId}
     >
       <Text>{children}</Text>
     </TouchableHighlight>
@@ -86,7 +91,7 @@ const styles = StyleSheet.create({
   flat: box.flat
 });
 
-const blockSizes = {
+export const blockSizes = {
   sm: 27,
   md: 35,
   lg: 43

src/Panel/Panel.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { testId } from './Panel';
+import { Panel, Text } from '..';
+
+describe('<Panel />', () => {
+  it('should render children', () => {
+    const { getByTestId } = render(
+      <Panel>
+        <Text>Banana dance</Text>
+      </Panel>
+    );
+
+    expect(getByTestId(testId)).toHaveTextContent('Banana dance');
+  });
+
+  it('should render custom styles', () => {
+    const style = { backgroundColor: 'teal' };
+
+    const { getByTestId } = render(
+      <Panel style={style}>
+        <Text>Panel</Text>
+      </Panel>
+    );
+
+    expect(getByTestId(testId)).toHaveStyle(style);
+  });
+});

src/Panel/Panel.tsx

@@ -4,6 +4,8 @@ import { StyleSheet, View } from 'react-native';
 import { original as theme } from '../common/themes';
 import { border } from '../common/styles';
 
+export const testId = 'panel';
+
 type Props = {
   children: React.ReactNode;
   variant?: 'default' | 'well' | 'outside';
@@ -12,7 +14,10 @@ type Props = {
 
 const Panel = ({ children, variant = 'default', style = {} }: Props) => {
   return (
-    <View style={[styles.container, style, variantHash[variant]]}>
+    <View
+      style={[styles.container, variantHash[variant], style]}
+      testID={testId}
+    >
       {children}
     </View>
   );

src/Text/Text.spec.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { Text } from '..';
+
+describe('<Text />', () => {
+  it('should render children', () => {
+    const { getByText } = render(<Text>Potato</Text>);
+
+    expect(getByText('Potato')).toBeTruthy();
+  });
+
+  it('should render custom styles', () => {
+    const style = { color: 'papayawhip' };
+
+    const { getByText } = render(<Text style={style}>Potato</Text>);
+
+    expect(getByText('Potato')).toHaveStyle(style);
+  });
+});

src/Text/Text.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, Text as RNText } from 'react-native';
 import { original as theme } from '../common/themes';
 
 type Props = {
-  children: React.ReactNode;
+  children: string;
   style?: Object;
 };