javascript - 如何使用 Enzyme/Jest 测试 ComponentWillMount 中的逻辑

Question

我是用 enzyme /Jest 进行 react 单元测试的初学者， 我想在 componentWillMount 方法中测试我的逻辑。 我想根据我的上下文对象测试重定向是否根据我的业务逻辑发生

class ActivateSF extends Component {
  constructor(props) {
    super(props);
    this.className = 'ActivateSF.js'
    this.state = {
      messages: null,
     }
  }

  render() {
    return (
      <SDPActivateInterstitialUI
        context={this.props.context}
        messages={this.state.messages}
      />
    );
  }

  componentWillMount() {
    let context = this.props.context

    if(!context.userInfo){      
      return this.callIdentify(context)
    }

    let externalLP = ExternalLandingPageUtil.getExternalLandingPageUrl(context);
if (externalLP) {
      window.location.replace(`${externalLP}`);
      return;
    }

    if (context.userInfo)
    {
      console.log("user identified prior to activation flow")

        if (UserInfoUtil.isSubsribedUser(context))
        {
           window.location = '/ac'
        }

        else
        {
            this.callPaymentProcess(context)
        }
    }

  }

Answer 1

您可以尝试 beforeEach 挂载，并在测试中调用 .unmount 并对其执行测试。

beforeEach(() => {
     const myComponent= mount(<MyComponent myprop1={...} />);
});


describe('<MyComponent/>', () => {    
  it('actually unmounts', () => {
     ...
     ...
     myComponent.unmount();
    ... Do unmount tests here
  });
});

直接来自 enzyme 文档的示例:https://airbnb.io/enzyme/docs/api/ShallowWrapper/unmount.html

import PropTypes from 'prop-types';
import sinon from 'sinon';

const spy = sinon.spy();

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.componentWillUnmount = spy;
  }

  render() {
    const { id } = this.props;
    return (
      <div className={id}>
        {id}
      </div>
    );
  }
}
Foo.propTypes = {
  id: PropTypes.string.isRequired,
};
const wrapper = shallow(<Foo id="foo" />);
expect(spy).to.have.property('callCount', 0);
wrapper.unmount();
expect(spy).to.have.property('callCount', 1);