Question

我有以下两个测试：

it('should render w/o crashing', () => {
  const onExport = jest.fn();
  const ID = 123;

  const tree = renderer.create(
    <I18nextProvider i18n={i18n}>
      <ExportButton id={ID} onExport={onExport} />
    </I18nextProvider>,
  );
  expect(tree!!.toJSON()).toMatchSnapshot();
});

第二：

it('should handle click', () => {
  const onExport = jest.fn();
  const ID = 123;

  const tree = renderer.create(
    <I18nextProvider i18n={i18n}>
      <ExportButton id={ID} onExport={onExport} />
    </I18nextProvider>,
  );
  const buttonProps = tree.root.findByType('button').props as ButtonHTMLAttributes<
    HTMLButtonElement
  >;
  buttonProps.onClick!!({} as React.MouseEvent<HTMLButtonElement, MouseEvent>);
  expect(onExport).toBeCalledTimes(1);
  expect(onExport).toBeCalledWith(ID);
});

您知道如何改进它以替换!!语法（tree!!和onClick!!）吗？我猜这不是最好的解决方案，这些语法的原因是要确保在那个地方不会有null值。

Answer 1

!!双引号是一个错误，它不会导致错误，因为允许使用多个运算符，但它没有任何用处，必须使用一个!非空断言运算符使用。

在生产中，应该使用类型防护来解决此问题，以免在编译和运行时引起错误：

if (tree)
  expect(tree.toJSON()).toMatchSnapshot();

但是在测试环境中，最好在运行时发生错误，因为断言如果不符合期望就会失败，因此它是!非空断言的完美用例：

expect(tree!.toJSON()).toMatchSnapshot();

可以修改类型以使某些属性为非可选：

type ButtonType = ButtonHTMLAttributes<HTMLButtonElement>;
type ButtonTypeWithOnClick = ButtonType & Required<Pick<ButtonType, 'onClick'>>;

const buttonProps = tree.root.findByType('button').props as ButtonTypeWithOnClick;
buttonProps.onClick({} as React.MouseEvent<HTMLButtonElement, MouseEvent>);

但是结果很冗长，它是!一次断言的理想用例，也使意图更加清晰。

!!在开玩笑的测试中

1 个答案: