javascript - 用 enzyme 测试按钮类

Question

我有以下按钮:

import React from 'react';
import PropTypes from 'prop-types';

const Button = ({
  text, url, state, type,
}) => (type === 'link' ?
  <a className="abs3-link" href={url}>{text}</a> :
  <button className={`abs3-button abs3-button--${state}`} type={type}> {text}</button>
);

Button.propTypes = {
  text: PropTypes.string,
  url: PropTypes.string,
  state: PropTypes.oneOf(['default', 'info', 'danger']),
  type: PropTypes.oneOf(['submit', 'reset', 'link']),
};

Button.defaultProps = {
  text: null,
  url: null,
  state: 'default',
  type: 'submit',
};

export default Button;

我试着这样测试:

import React from 'react';
import { shallow, render, mount, configure } from 'enzyme';
import renderer from 'react-test-renderer';
import Adapter from 'enzyme-adapter-react-16';

import Button from './Button';

configure({ adapter: new Adapter() });

describe('Button Component', () => {
  test('it should render a button', () => {
    const tree = renderer
      .create(<Button text="Submit" type="submit" state="default" />)
      .toJSON();
    expect(tree).toMatchSnapshot();
  });

  test('it should have a abs3-button--info class', () => {
    const button = shallow(<Button text="Submit" type="submit" state="info" />);
    expect(button.find('.abs3-button').hasClass('abs3-button--info')).to.equal(true);
  });
});

但是我在第二次测试中遇到“TypeError: Cannot read property 'equal' of undefined”，好像我的按钮是空的，但我不明白为什么

Answer 1

我认为你应该使用 toEqual()，并更改此行 button('.abs3-button').hasClass('abs3-button--info') 到 button.hasClass(abs3-button--info) 因为 button 是这个组件的根。如果您不确定渲染后组件的外观。您始终可以使用 debug() 来打印组件的渲染结果。

以下是我使用 create-react-app 创建的工作示例:

test('it should have a abs3-button--info class', () => {
  const button = shallow(<Button text="Submit" type="submit" state="info" />);
  expect(button.hasClass('abs3-button--info')).toBe(true);
});