a.b*_*eri 9 testing unit-testing reactjs enzyme
React 的新手，但不是测试应用程序。
我想确保每次组件抛出错误时都会显示 ErrorBoundary 消息。如果你不知道我所说的 ErrorBoundary 是什么意思，这里是一个链接。
假设我们需要使用以下测试配置来测试React 计数器示例。
// DOM
import jsdom from 'jsdom';
const {JSDOM} = jsdom;
const {document} = (new JSDOM('<!doctype html><html><body></body></html>')).window;
global.document = document;
global.window = document.defaultView;
global.navigator = global.window.navigator;
// Enzyme
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
// Chai
import chai from 'chai';
import chaiEnzyme from 'chai-enzyme';
chai.use(chaiEnzyme());
在阅读了有关连接组件的最佳测试方法（涉及类似问题）的对话后，我知道我不必担心componentDidCatch捕获错误。React 已经过足够的测试，确保无论何时抛出错误都会被捕获。
因此只有测试两个测试：
1：如果有任何错误，请确保 ErrorBoundary 显示消息
// error_boundary_test.js
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import ErrorBoundary from './some/path/error_boundary';
describe('Error Boundary', ()=>{
it('generates a error message when an error is caught', ()=>{
const component = shallow(<ErrorBoundary />);
component.setState({
error: 'error name',
errorInfo: 'error info'
});
expect(component).to.contain.text('Something went wrong.');
});
});
2：确保组件包含在 ErrorBoundary 中（在React 计数器示例中是<App />，这是误导性的。想法是在最近的父组件上执行此操作）。
注意：1）它需要在父组件上完成，2）我假设子组件是简单的组件，而不是容器，因为它可能需要更多的配置。进一步的想法：这个测试可以更好地使用parent而不是descendents......
// error_boundary_test.js
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import App from './some/path/app';
describe('App', ()=>{
it('wraps children in ErrorBoundary', ()=>{
const component = mount(<App />);
expect(component).to.have.descendants(ErrorBoundary);
});
使用 React 测试库测试 ErrorBoundary 组件
const Child = () => {
throw new Error()
}
describe('Error Boundary', () => {
it(`should render error boundary component when there is an error`, () => {
const { getByText } = renderProviders(
<ErrorBoundary>
<Child />
</ErrorBoundary>
)
const errorMessage = getByText('something went wrong')
expect(errorMessage).toBeDefined()
})
})
渲染提供者
import { render } from '@testing-library/react'
const renderProviders = (ui: React.ReactElement) => render(ui, {})
这是我没有设置组件状态的尝试：
错误边界：
import React, { Component } from 'react';
import ErroredContentPresentation from './ErroredContentPresentation';
class ContentPresentationErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, info) {
this.setState({ hasError: true });
}
render() {
return this.state.hasError ? <ErroredContentPresentation /> : this.props.children;
}
}
export const withErrorBoundary = WrappedComponent =>
props => <ContentPresentationErrorBoundary>
<WrappedComponent {...props}/>
</ContentPresentationErrorBoundary>;
和测试：
it('Renders ErroredContentPresentation Fallback if error ', ()=>{
const wrappedComponent = props => {
throw new Error('Errored!');
};
const component = withErrorBoundary( wrappedComponent )(props);
expect(mount(component).html()).toEqual(shallow(<ErroredContentPresentation/>).html());
});
| 归档时间： |
|
| 查看次数： |
6464 次 |
| 最近记录： |