Как получить покрытие для Jest toThrow, не провалив тест
Скажем, я тестирую компонент React ниже с jest --coverage:
class MyComponent extends React.Component {
constructor(props) {
super(props)
if (props.invalid) {
throw new Error('invalid')
}
}
}
в отчете о покрытии будет сказано, что линия throw new Error('invalid') обнаружена. Поскольку .not.toThrow(), похоже, ничего не покрывает, я создаю следующий тест с Enzyme:
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 - это означает, что исходный компонент выдал ошибку (как и должно быть)?
@ AndreasKöberle нет
Ответы 3
galki, я думаю проблема в том, что вы выкидываете ошибку при включении компонента строительство. И он не проходит проверку, как и должно быть (вы совершенно правы). Вместо этого, если вы можете извлечь функцию проверки пропуска в другое место, где она не будет вызываться во время монтирования, она будет работать отлично. Например, я изменил ваши фрагменты как
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();
})
Так что, если у вас есть шанс не выдать ошибку при монтировании - вы сможете это протестировать.
componentWillReceiveProps в этом случае не вызывается. id хотел бы тестировать при создании компонента, а не при обновлении
Видимо это связано с как React 16 обрабатывает ошибки. Мне удалось пройти тест, обернув MyComponent родительским компонентом React, который имеет метод componentDidCatch.
Тест прошел успешно, но, чтобы повлиять на покрытие, мне пришлось заменить shallow на mount. В итоге тест выглядел так:
class ParentComponent extends React.Component {
componentDidCatch(error) {
// console.info(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)
})
вау, ты меня спас, это правильно. .toThrow() работает только с чистыми функциями, если мы используем рендерер или мелкий, этот тест не работает.
Вместо того, чтобы использовать let и назначать результат try / catch, почему бы просто не обернуть shallow() анонимной функцией и не вызвать для нее .toThrowError()? Например. expect(() => shallow(<TestComponent />)).toThrowError();
Поймите, это старый вопрос, но для будущих зрителей я подумал, что расширил бы ответ @galki. Вместо использования try / catch вы можете просто обернуть свой shallow / mount анонимной функцией, а затем использовать вместо нее .toThrowError():
const TestComponent = () => {
throw new Error('Test error');
}
describe('Test Component', () => {
it('Throws an error', () => {
expect(() => shallow(<TestComponent />)).toThrowError();
});
});
Это дает более чистый код с тем же результатом.
это также работает с Stateless: expect(() => shallow(TestComponent())).toThrowError();
Разве это не должно быть
expect(fn()).toThrow()