用jest +酶+ react-redux测试propTypes的最佳实践？

Question

我尝试了许多在谷歌上找到的解决方案，以测试在react组件中是否正确设置了Component.propTypes，但它们都不适用于我。即使在浏览器上运行React应用程序时，如果属性传递不正确，我会收到控制台警告，但当我运行jest时，我无法以任何尝试的方式捕获该警告。这是我最好的尝试：

App.js：

export class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <div/>;
    }
}


App.propTypes = {
    images: PropTypes.array.isRequired
};

function mapStateToProps(state) {
    const {images} = state;
    return {images: images};
}

export default connect(mapStateToProps)(App);

App.test.js：

import React from 'react';
import chai from 'chai';
import chaiEnzyme from 'chai-enzyme';
import {shallow} from 'enzyme';
import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import sinon from 'sinon'

import {Provider} from 'react-redux';
import App from './App';

const expect = chai.use(chaiEnzyme()).expect
const mockStore = configureStore([thunk]);

const wrap = (initialState, props) => {
    return shallow(<Provider store={mockStore(initialState)}><App {...props} /></Provider>)
};

describe('App container', () => {
    it('validates properties', () => {
        const stub = sinon.stub(console, 'warn');

        console.warn.reset();
        React.createElement(App, {});
        expect(stub.calledOnce).to.equal(true);
        expect(stub.calledWithMatch(/Failed prop type/)).to.equal(true);

        console.warn.restore();
    });

    it('renders without crashing', () => {
        wrap();
    });

    it('is react-redux connected', () => {
        const wrapper = wrap();
        expect(wrapper.find('Connect(App)')).to.have.length(1);
    });

    it('correctly maps properties', () => {
        const wrapper = wrap({images: []});
        expect(wrapper.props().images).to.equal([]);
    });
});

Answer 1

根据我在网上读到的各种GitHub问题主题，似乎一种常见的方法是让console.warn/console.error抛出。

因此，当您编写测试时，您可以这样做

expect(// Render Component //).to.throw();

希望这能有所帮助。

更多信息：https://github.com/airbnb/enzyme/issues/588