如何测试取决于参数的开关盒？答案

【问题标题】：How can I test a switch case that depends on a parameter?如何测试取决于参数的开关盒？
【发布时间】：2019-06-22 00:51:35
【问题描述】：

我有这个：

  const renderComponents = () => {
    switch (selectedService) {
      case 'otherservices':
        return <SoftLayerCancellationRequests />;
      case 'dedicatedhosts':
        return <GetDedicatedHostsCancellations />;
      case 'virtualguestsservers':
        return <SoftLayerGetVirtualGuests />;
      case 'baremetalservers':
        return <GetBareMetalServersCancellations />;
      default:
        return null;
    }
  };

最后在组件的return 语句中调用：

return (
    <>
      <Header pageTitle={t('cancellations.header')} />

            {accountId ? (
              <>
                <TableToolbarComp />
                {renderComponents()}
              </>
            ) : (
              <UpgradeMessage />
            )}

    </>
  );

selectedService 参数来自商店：

export default compose(
  connect(store => ({
    accountId: store.global.softlayerAccountId,
    selectedService: store.cancellations.selectedService,
  })),
  translate(),
  hot(module),
)(Cancellations);

我可以做些什么来测试那个开关盒？

【问题讨论】：

标签： javascript reactjs ecmascript-6 jestjs enzyme

【解决方案1】：

renderComponents下的函数应该接受selectedService作为参数：

const renderComponents = (selectedService) => {
  switch (selectedService) {
    // ...
  }
};

通过不依赖闭包，函数变得纯粹并且更容易进行单元测试：

it('renders a SoftLayerCancellationRequests when passed "otherservices" as parameter', () => {
  const wrapper = shallow(renderComponents('otherservices'));
  expect(wrapper.find(SoftLayerCancellationRequests)).toHaveLength(1);
})

然而，我认为此类测试没有什么价值。这是因为该函数基本上充当了一个简单的地图：

const serviceToComponent : {
  otherservices: SoftLayerCancellationRequests,
  dedicatedhosts: GetDedicatedHostsCancellations,
  virtualguestsservers: SoftLayerGetVirtualGuests,
  baremetalservers: GetBareMetalServersCancellations
}

测试起来似乎有点枯燥。

更有意义的测试是测试使用这种映射的组件的行为。

【讨论】：

老实说，我没有得到你上面写的测试。您声明const renderComponents 的第一部分是测试的一部分，还是您将其作为组件的一部分提及？因为我不知道如何调用它然后const wrapper = shallow(renderComponents('otherservices'));。最后一部分，那是什么？
好的，所以你自己的声明renderComponents 存在于渲染函数中？如果是这样，我建议将其提取并单独导出，以便您可以在测试中访问它（同样，如果您认为单独测试该功能是相关的）。可以吗，还是我应该澄清更多？
回答你的第二个问题，如果“最后一部分”是指toHaveLength(1) 函数调用，它是Jest API 的一部分，用于对数组进行断言。