Question

在普通的connect版本的React组件中，为了简化单元测试，我已经看到了exporting the base component, while export defaulting the connected component的模式。它适用于处理组件实际功能的简单测试，而不会因redux存储和路由器模拟而混乱。

我正在寻找高阶分量的模拟。例如，给定一个平凡的高阶分量：

export default function exampleHoc(Wrapped) {
  const ExampleHoc = props => (
    <Wrapped {...props.reduxStore} hoc={true} />
  );

  return connect(
    state => ({
      reduxStore: state.example.reduxStore,
    }))(ExampleHoc);
}

我想在单元测试中验证props.hoc === true，而不必连接<ExampleHoc>所串连的其他高阶组件。

我最好的设计是沿着旗帜：

export default function exampleHoc(Wrapped, exportUnconnectedForTest) {
  const ExampleHoc = props => (
    <Wrapped {...props.reduxStore} hoc={true} />
  );

  if (exportUnconnectedForTest) {
    return ExampleHoc;
  }

  return connect(
    state => ({
      reduxStore: state.example.reduxStore,
    }))(ExampleHoc);
}

这使测试变得容易

const DummyComponent = () => <div />;
const Sut = exampleHoc(DummyComponent, true);

...

test('props value should be passed', () => {
  const sut = shallow(<Sut />);
  const childProps = sut.find(DummyComponent).props();
  expect(sut.childProps.hoc).to.equal(true);
});

同时仍然愉快地将包装后的输出传递给该方法的任何常规调用者。

它有效，但是对我来说似乎很笨拙。是否存在更好/已建立的模式来交付高阶组件的展开内部？

单元测试连接了React / Enzyme中的高阶组件

0 个答案: