用玩笑和酵素测试按钮

Question

In my React-Native application I have a button component which is used as follows.

// primary button (default button)
<Button
  text='Continue'
  onPress={() => this.onContinue()}
/>

// secondary button
<Button
  type='Secondary'
  text='Continue'
  onPress={() => this.onContinue()}
/>

// disabled button
<Button
  text='Continue'
  disabled={true}
  onPress={() => this.onContinue()}
/>

I wrote the following tests for these.

import { shallow } from 'enzyme';
import React from 'react';
import Button from '../../src/components/button';

describe('Button', () => {
  it('expect to render a primary button component', () => {
    const mockLabel = 'Test Button';
    const wrapper = shallow(<Button label={mockLabel} />);
    expect(wrapper).toMatchSnapshot('primary button snapshot');
  });

  it('expect to render a secondary button component', () => {
    const type = Button.Types.SECONDARY;
    const mockLabel = 'Test Button';
    const wrapper = shallow(<Button type={type} label={mockLabel} />);
    expect(wrapper).toMatchSnapshot('secondary button snapshot');
  });

  it('expect to render a disabled button component', () => {
    const disabled = true;
    const mockLabel = 'Test Button';
    const wrapper = shallow(<Button label={mockLabel} disabled={disabled} />);
    expect(wrapper).toMatchSnapshot();
  });
});

Is this the proper way to write the tests? It works properly though, but do these tests cover the scenarios properly??

Here is my button component. How can I check if the type is Primary or Secondary? If the button disabling works properly? Does onPress() works as expected?? Any help will be appreciated.

import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';

import { TextLabel } from '../components';
import colors from '../res/colors';

class Button extends Component<IProps> {
  static defaultProps: IProps;

  static Types = {
    PRIMARY: 'primary',
    SECONDARY: 'secondary',
  };

  state = {
    pressed: false,
  };

  handlePressIn = () => {
    this.setState({ pressed: true });
  }

  handlePressOut = () => {
    this.setState({ pressed: false });
  }

  buttonStyles = () => {
    const { pressed } = this.state;
    const { type, disabled } = this.props;

    if (type === Button.Types.PRIMARY) {
      if (disabled) return styles.primaryButtonDisabled;
      if (!pressed) return styles.primaryButtonDefault;
      if (pressed) return styles.primaryButtonPressed;
    }

    if (type === Button.Types.SECONDARY) {
      if (disabled) return styles.secondaryButtonDisabled;
      if (!pressed) return styles.secondaryButtonDefault;
      if (pressed) return styles.secondaryButtonPressed;
    }
  }

  textStyles = () => {
    const { pressed } = this.state;
    const { type, disabled } = this.props;

    if (type === Button.Types.PRIMARY) return styles.primaryText;

    if (type === Button.Types.SECONDARY) {
      if (disabled) return styles.secondaryTextDisabled;
      if (!pressed) return styles.secondaryTextDefault;
      if (pressed) return styles.secondaryTextPressed;
    }
  }

  render() {
    const {
      disabled,
      text,
      buttonStyle,
      onPress,
    } = this.props;

    return (
      <TouchableOpacity
        onPress={() => onPress()}
        activeOpacity={1}
        onPressIn={this.handlePressIn}
        onPressOut={this.handlePressOut}
        disabled={disabled}
        style={[styles.button, this.buttonStyles(), buttonStyle]}
      >
        <TextLabel
          type={TextLabel.Types.BUTTON_LBL}
          style={[styles.text, this.textStyles()]}
          label={text}
        />
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  button: {
    borderRadius: 4,
    borderWidth: 1,
    justifyContent: 'center',
    // position: 'absolute',
    height: 48,
    width: '100%',
    marginTop: 20,
    marginBottom: 20,
  },
  primaryButtonDefault: {
    backgroundColor: colors.primary,
    borderColor: colors.primary,
  },
  primaryButtonPressed: {
    backgroundColor: colors.darkRed,
    borderColor: colors.darkRed,
  },
  primaryButtonDisabled: {
    backgroundColor: colors.gray,
    borderColor: colors.gray,
  },
  secondaryButtonDefault: {
    borderColor: colors.primary,
  },
  secondaryButtonPressed: {
    borderColor: colors.darkRed,
  },
  secondaryButtonDisabled: {
    borderColor: colors.gray,
  },
  text: {
    textAlign: 'center',
    textTransform: 'uppercase',
  },
  primaryText: {
    color: colors.white,
  },
  secondaryTextDefault: {
    color: colors.primary,
  },
  secondaryTextPressed: {
    color: colors.darkRed,
  },
  secondaryTextDisabled: {
    color: colors.gray,
  },
});

export interface IProps {
  disabled?: boolean;
  text: string;
  type?: string;
  buttonStyle?: object;
  onPress: Function;
}

Button.defaultProps = {
  disabled: false,
  text: '',
  type: Button.Types.PRIMARY,
  buttonStyle: {},
  onPress: () => {},
};

export default Button;

Answer 1

Snapshot testing is different than unit testing.

Snapshot testing is useful to understand the differences in render output for a given component. Especially during a code review exercise or when browsing through the source control history of a project. They do not however guarantee a given behavior.

What you have written are snapshot tests, it would be great to complement them with unit tests. In your case, you would need to test the inner workings of your Button component:

Given a certain set of parameters (for example your 3 scenarios), is the render() function of Button rendering the expected code. Since you have not posted the code for your Button component, I can't help you write these tests.