reactjs - 如何用 enzyme 、 Chai 测试 HOC

Question

我有一个 HOC 函数，它接收 React 组件并返回带有两个新方法属性(handleBack 和 moveitOnTop)的 React 组件，如下所示:

import React, { Component } from "react";
import classNames from "classnames";

 export default WrappedComponent => {
  return class extends Component {
      constructor(props) {
          super(props);
            this.moveitOnTop = this.moveitOnTop.bind(this);
            this.handleBack = this.handleBack.bind(this);

        this.state = {
            isSearchActive: false
        };
    }
    moveitOnTop(flag) {
        this.setState({ isSearchActive: flag });
        window.scrollTo(0, -100);
    }

    handleBack() {
        this.setState({ isSearchActive: false });
        if (document.body.classList.contains("lock-position")) {
            document.body.classList.remove("lock-position");
        }
    }

    render() {
        const props = {
            ...this.props,
            isSearchActive: this.state.isSearchActive,
            moveitOnTop: this.moveitOnTop,
            goBack: this.handleBack
        };

        const classes = classNames({ "c-ftsOnTop": this.state.isSearchActive });
        return (
            <div className={classes}>
                <WrappedComponent {...props} />
            </div>
        );
    }
  };
 };

组件:

 //import fireAnalytics
import { fireAnalytics } from "@modules/js-utils/lib";
class MyComponent extender Component{
  constructor(){
     super(props);
     this.handleClick = this.handleClick.bind(this);
  }

   handleClick(e) {
     // calling analytics function by passing vals
    fireAnalytics({
        event: "GAEvent",
        category: "",
        action: `Clicked on the ${e.target.id} input`,
        label: "Click"
    });

     // I CALL THE HOC PROPERTY
     this.props.moveitOnTop(true);

     // I CALL THE HOC PROPERTY
     this.props.handleBack();
   }

  render(){
     return(
        <div className="emailBlock">
          <input type="text" onClick={handleClick} />
          <Button className="submit">Submit</Button>
        </div>
     )
  }
}

// export HOC component
export default hoc(MyComponent);

// export just MyComponent
export {MyComponent};

我想测试 HOC:

1. 我需要检查类 .c-ftsOnTop 是否存在
2. 我需要检查调用 this.props.handleBack 和 `this.props.moveitOnTop' 的 onClick 函数
3. 我需要检查 className emailBlock 是否存在。

我尝试过但失败的测试:

 import { mount, shallow } from 'enzyme';
 import sinon from 'sinon';
 import React from 'react';
 import { expect } from 'chai';
 import hoc from '....';
 import {MyComponent} from '...';
 import MyComponent from '....';

 it('renders component', () => {

const props = {}
const HocComponent = hoc(MyComponent);
const wrapper = mount(
  <HocComponent {...props} />
);

console.log('wrapper:', wrapper);
expect(wrapper.find('.c-ftsOnTop')).to.have.lengthOf(1);
expect(wrapper.hasClass('c-fts-input-container')).toEqual(true);
 })

错误

断言错误:预期 {} 的长度为 1，但结果为 0

console.log:包装器:ReactWrapper {}

有人可以帮助我如何渲染 HOC 吗？

Answer 1

这是一个有效的测试:

import { mount } from 'enzyme';
import React from 'react';
import WrappedMyComponent from './MyComponent';

it('renders component', () => {
  const props = {}
  const moveitOnTopSpy = jest.spyOn(WrappedMyComponent.prototype, 'moveitOnTop');
  const handleBackSpy = jest.spyOn(WrappedMyComponent.prototype, 'handleBack');
  const wrapper = mount(
    <WrappedMyComponent {...props} />
  );

  // 1. I need to check that class .c-ftsOnTop exists
  wrapper.setState({ isSearchActive: true });  // <= set isSearchActive to true so .c-ftsOnTop is added
  expect(wrapper.find('.c-ftsOnTop')).toHaveLength(1);  // Success!

  // 2. I need to check onClick function that calls this.props.handleBack & `this.props.moveitOnTop'
  window.scrollTo = jest.fn();  // mock window.scrollTo
  wrapper.find('input').props().onClick();
  expect(moveitOnTopSpy).toHaveBeenCalled();  // Success!
  expect(window.scrollTo).toHaveBeenCalledWith(0, -100);  // Success!
  expect(handleBackSpy).toHaveBeenCalled();  // Success!

  // 3. I need to check if className emailBlock exists
  expect(wrapper.find('.emailBlock')).toHaveLength(1);  // Success!
})

<小时/>

详细信息

.c-ftsOnTop 仅在 isSearchActive 为 true 时添加，因此只需设置组件的状态即可添加该类。

如果您在 moveitOnTop 和 handleBack 的原型(prototype)方法上创建 spy ，那么当 hoc 通过将它们绑定(bind)到来创建其实例方法时this 在构造函数中，实例方法将绑定(bind)到您的 spy 。

window.scrollTo 默认情况下在 jsdom 中将错误记录到控制台，以便您可以模拟它以避免该错误消息并验证它是否按照预期调用论据。

<小时/>

请注意，上述测试需要在 MyComponent 中修复以下拼写错误:

• extender 应为 extends
• 构造函数应该采用props参数
• onClick 应绑定(bind)到 this.handleClick，而不仅仅是 handleClick
• handleClick 应调用 this.props.goBack() 而不是 this.props.handleBack()

(我猜 MyComponent 只是作为实际组件的示例放在一起)