Question

我有一个 React 组件，其中的一部分有一个基于 useState 钩子渲染的条件代码块。

{show && (
        <div className={styles.detailsModel}>
          <div className={styles.modelContentBox}>
            <span
              className={styles.close}
              onClick={() => {
                setShow(false);
                document.body.classList.remove(styles.noScroll);
              }}
            >
              <CrossIcon />
            </span>
          </div>
        </div>
  )
}

现在覆盖范围显示未覆盖此 onClick 语句。

在我的测试中，我寻找 close 类并模拟点击，但它返回 Method “simulate” is meant to be run on 1 node. 0 found instead. 这有点有意义，因为这个块不在 DOM 中，直到状态通过另一个单击并且也不在 snapshot 中。

这是测试;

test('clicking close in modal', () => {
    component.find('.close').simulate('click');

    expect(onClick).toHaveBeenCalled();
  });

所以我想我的问题是你应该如何在这种情况下进行测试？

Answer 1

通过在组件中添加一个 prop 来解决这个问题，如果组件传递了这个 prop，则更改 useState 钩子

Jest 和 Enzyme 条件测试

1 个答案: