У меня в приложении реакции есть компонент ErrorHandler, который я оборачиваю вокруг других компонентов для обнаружения ошибок. ErrorHandler является подключенным компонентом. Он вызывает избыточное действие для регистрации ошибок, которые были обнаружены. Я пытаюсь написать модульные тесты, и у меня проблемы. Это мой файл ErrorHandler.test.js:
function ProblemChild() {
throw new Error('Error thrown from problem child1');
}
const initialState = {
errorText: "test error",
errorOccurred: true
};
const mockStore = configureMockStore();
let store, container, shallowContainer
beforeEach(() => {
store = mockStore(initialState);
const actions = {
setTrainingMode: jest.fn(),
setIsAVA: jest.fn()
}
container = mount(<Provider store={store}><ConnectedErrorHandler {...initialState} actions={actions} /><ProblemChild /></Provider>);
})
describe('<ErrorHandler />', () => {
it('renders an error', () => {
//const wrapper = mount(<ErrorHandler><ProblemChild /></ErrorHandler>);
console.log(container.debug());
expect(() => { container.html(); }).toThrowError('Error thrown from problem child');
expect(container.state().errorOccurred).to.equal(true);
});
});
Мой ErrorHandler довольно прост:
constructor(props) {
super(props)
this.state = {
errorOccurred: false
}
}
componentDidCatch(error, info) {
this.setState({ errorOccurred: true });
let errorObject = { "message": error, "description": info };
this.props.actions.logError(errorObject);
}
render() {
return this.state.errorOccurred ? <div className={styles.mapMessageContainer}><div className={styles.mapMessageText}>{this.props.errorText}</div></div> : this.props.children
}
Запуск теста, как показано, возвращает ошибку:
Нарушение инварианта: ожидается, что React.Children получит единственный дочерний элемент React.
Я считаю, что элемент ProblemChild вызывает ошибку.