如何在不失败测试的情况下获得 Jest toThrow 的覆盖率

Question

假设我正在使用jest --coverage 测试下面的 React 组件：

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    if (props.invalid) {
      throw new Error('invalid')
    }
  }
}

覆盖报告将显示throw new Error('invalid') 行未被覆盖。由于.not.toThrow() 似乎没有涵盖任何内容，因此我使用酶创建了以下测试：

const wrapper = shallow(
  <MyComponent invalid />
)

it('should throw', () => {
  function fn() {
    if (wrapper.instance().props.invalid) {
      throw new Error('invalid')
    }
  }
  expect(fn).toThrow()
})

线路被覆盖！然而，测试本身因encountered a declaration exception 而失败 - 这意味着原始组件抛出了错误（应该如此）？

我用toThrow() 错了吗？

Answer 1

意识到这是一个老问题，但对于未来的观众，我想我会扩展 @galki 的答案。您可以简单地将 shallow/mount 包装在匿名函数中，然后使用 .toThrowError()，而不是使用 try/catch：

const TestComponent = () => {
    throw new Error('Test error');
}

describe('Test Component', () => {
    it('Throws an error', () => {
        expect(() => shallow(<TestComponent />)).toThrowError();
    });
});

这为您提供更简洁的代码，但结果相同。

Answer 2

显然这与how React 16 handles errors 相关联。我设法通过使用具有 componentDidCatch 方法的父 React 组件包装 MyComponent 来通过测试。

这使测试通过但为了影响覆盖率，我不得不将shallow 更改为mount。测试最终看起来像这样：

class ParentComponent extends React.Component {
  componentDidCatch(error) {
    // console.log(error)
  }
  render() {
    return this.props.children
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    if (props.invalid) {
      throw new Error('invalid')
    }
  }
}

const wrapper = mount(
  <ParentComponent>
    <MyComponent invalid />
  </ParentComponent>
)

it('should throw', () => {
  function fn() {
    if (wrapper.props().invalid) {
      throw new Error('invalid test')
    }
  }
  expect(fn).toThrow()
})

更新

在意识到问题是在shallow 或mount 中抛出错误后（在测试之前），我将整个事情简化为：

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    if (props.invalid) {
      throw new Error('invalid')
    }
  }
}

it('should throw', () => {
  let error
  try {
    shallow(<MyComponent invalid />)
  } catch (e) {
    error = e
  }
  expect(error).toBeInstanceOf(Error)
})

Answer 3

galki，我认为问题在于您在 constructuring 组件时抛出错误。它没有通过测试，因为它应该（你完全正确）。 相反，如果您可以在其他地方提取 prop-checking 功能，在安装期间不会调用它 - 它会完美运行。比如我把你的sn-ps修改为

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props)
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.invalid) {
      throw new Error('invalid')
    }
  }
  render() {
    return (
      <div/>
    )
  }
}

和

const wrapper = shallow(
 <MyComponent />
)

it('should throw', () => {
  function fn() {
    wrapper.setProps({invalid: true});
  };
  expect(fn).toThrow();
})

因此，如果您有机会在安装时不抛出错误 - 您将能够对其进行测试。