时间戳

首页 > 解决方案 > Jest React - 否则未采取路径

reactjs - Jest React - 否则未采取路径

问题描述

我正在尝试为此 React 组件添加测试覆盖率，并且当 if 语句后没有 else 时，我在组件上收到此消息“未采用其他路径”。

下面是我的带有开玩笑警告的组件。有人可以帮忙介绍这部分吗？

function CustomerSatisfaction(props: FeedbackProps) {
  const [status, setStatus] = useState<
    'idle' | 'active' | 'pending' | 'success' | 'error'
  >('idle');
  const handleSubmit = useCallback(
    async (smileyType: string, options: Record<string, string>) => {
      setStatus('pending');

      try {
        const result = await fetchWithError(() => {
          setStatus('error');
        })('/pub/feedback/feedbacks', 'POST', {
          surveyType: 'service',
          smileyType,
          comments: options.comment,
          ratings: {
            clearness: options['customer_satisfaction.clear'],
            ease: options['customer_satisfaction.easy'],
            speed: options['customer_satisfaction.fast'],
            performance: options['customer_satisfaction.perf'],
          },
          pageUrl: window.location.href,
          serviceId: props.serviceId,
          productId: props.productId,
        });

        **(else path not taken)** if (result.success) {
          setStatus('success');
        }
      } catch (e) {
        setStatus('error');
      }
    },
    [],
  );

  return (
    <CustomerSatisfactionComponent
      i18n={props.i18n}
      status={status}
      onSubmit={handleSubmit}
    />
  );
}

标签： reactjsjestjsts-jestjest-fetch-mock

解决方案

伙计们，如果有人遇到这个问题，这是我的案例的解决方案

it('should render failure state', async () => {
    const component = shallow(
      <CustomerSatisfaction
        i18n={() => ({})}
        serviceId="123"
        productId="123"
      />,
    );

    (fetchWithError as jest.Mock).mockReturnValue(
      jest.fn().mockResolvedValue({
        success: false,
      }),
    );
    const onSubmit: any =
      component.find(CustomerSatisfactionComponent).prop('onSubmit') ||
      (() => {});
    await onSubmit('test', {});
    expect(component).toMatchSnapshot();
  });

推荐阅读