Question

问题：

我正在尝试测试ES6中React无状态组件的单击功能。但是，当使用sinon监视handleClick函数时，我得到了响应......

TypeError: Cannot read property 'goToFullCart' of undefined

我尝试过其他一些方法。当组件是一个Class组件时，其中一些似乎工作，但是当使用无状态功能组件时，所有方法似乎都失败了......

代码：

import React from 'react'
import PropTypes from 'prop-types'
import SVG from '../../../../static/svg/Svg';
import Svgs from '../../../../static/svg/SvgTemplates';

const TestComponent = ({order, router}) => {

  const handleClick = (event) => {
    event.stopPropagation()
    router.push(`/order/${order.orderId}/cart`);
  }

  return (
    <button className="preview-bar" onClick={handleClick}>
      <p>Button Content</p>
    </button>
  )
}

TestComponent.propTypes = {
  order: PropTypes.object.isRequired,
  router: PropTypes.object.isRequired,
}

export default TestComponent
export { TestComponent }




import React from 'react';
import { shallow, mount } from 'enzyme';
import { expect } from 'chai';
import sinon from 'sinon';

import TestComponent from "./TestComponent"


let wrapper, props;

describe('<TestComponent /> component unit tests', () => {

  describe('when the minimized cart is clicked', () => {

    beforeEach(function() {
      props = {

      }
      wrapper = shallow((<TestComponent {...props} />))
    });

    it('should have a goToFullCart method', () => {
      const spy = sinon.spy(TestComponent.prototype, 'handleClick');
      expect(spy).to.equal(true)
    });
  });
});

我不知道如何监视handleClick方法来检查点击按钮的时间。

感谢您的帮助和讨论。如果有任何不清楚的地方，请随时要求澄清。

干杯

Answer 1

无状态组件基本上是一个功能。好的做法是不要在其中创建另一个函数，因为它会创建一个闭包，如果你想在组件内创建方法创建有状态的组件而不是

您可以测试handleClick是否已更改

，而不是测试route

import React from 'react';
import {shallow} from 'enzyme';

test('should call handleClick method when button got clicked', () => {

  window.location.assign = mock;

  wrapper .find('button').simulate('click');
  expect(window.location.assign).toHaveBeenCalled(1);
});

希望这对你有帮助！

测试 - 使用sinon反应无状态组件，监视组件方法

1 个答案: