Question

我有一个实现shouldComponentUpdate方法的React组件，我想对它进行单元测试。理想情况下，我可以在单元测试中更改组件上的某些prop或state，并验证它是否重新渲染。如果有帮助，我正在使用enzyme。

Answer 1

我可能只是直接调用shouldComponentUpdate。

像

这样的东西

const comp = shallow(<Comp {...props} />)
const shouldUpdate = comp.instance().shouldComponentUpdate(nextProps, nextState)
expect(shouldUpdate).toBe(true/false)

尝试通过确定组件是否实际呈现/未呈现来进行测试可能比它的价值更麻烦;我甚至不确定如何使用酶来做到这一点。您无法真正脱离渲染输出，因为除非渲染输出与之前相同，否则您可能不会从shouldComponentUpdate返回false。因此，确定渲染是否发生不能单独来自输出。

通过直接调用它进行测试似乎对我来说很好。只要您信任React将正确使用您的shouldComponentUpdate返回值（如果它没有，我们会遇到更大的问题），这是安全的。

Answer 2

当您已经知道结果是什么时，您可能不想将shouldComponentUpdate测试为隔离函数。

正如documentation中提到的那样，您可以使用setProps或setState，这可能（至少对我而言）是一种更好的方法，可以期望在更新时从组件中获得准确的结果相关值。

在您的MyComponent.test.js

import { expect } from 'chai';
import sinon from 'sinon-sandbox';
import { shallow } from 'enzyme';

it('updates when changing state or props', () => {
  const wrapper = shallow(<MyComponent />);

  const shouldComponentUpdate = sinon.spy(MyComponent.prototype, 'shouldComponentUpdate');

  expect(shouldComponentUpdate).to.have.property('callCount', 0);

  wrapper.setProps({ propThatWillUpdateTheComp: 'foo' });

  // or in case you are testing component update in case of state change
  // wrapper.setState({ stateThatWillUpdateTheComp: 'bar' });

  expect(shouldComponentUpdate).to.have.property('callCount', 1);

  expect(shouldComponentUpdate.returned(true)).to.be.equal(true);

});

如何单元测试React Component shouldComponentUpdate方法

2 个答案: