Javascript 使用jest和#x2B测试PropType的最佳实践；酶+；有反应吗？

我在google上找到了很多解决方案，用来测试react组件是否正确设置了

组件.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);

导出类应用程序扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回；
}
}
App.propTypes={
图像：需要PropTypes.array.isRequired
};
函数MapStateTops（状态）{
const{images}=状态；
返回{images:images}；
}
导出默认连接（MapStateTops）（应用程序）；

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([]);
    });
});

从“React”导入React；
从‘柴’进口柴；
从“柴酶”进口柴酶；
从“酶”导入{shall}；
从“redux模拟存储”导入configureStore；
从“redux thunk”导入thunk；
从“sinon”导入sinon
从'react redux'导入{Provider}；
从“./App”导入应用程序；
const expect=chai.use（chaiEnzyme（））.expect
const mockStore=configureStore（[thunk]）；
常量换行=（初始状态，道具）=>{
返回浅（）
};
描述（'应用程序容器'，（）=>{
它（'验证属性'，（）=>{
const stub=sinon.stub（控制台，“警告”）；
console.warn.reset（）；
React.createElement（App，{}）；
expect（stub.calledOnce）.to.equal（true）；
expect（stub.calledWithMatch（/Failed prop type/）.to.equal（true）；
console.warn.restore（）；
});
它（'渲染而不崩溃'，（）=>{
包裹（）；
});
它（'is react redux connected'，（）=>{
const wrapper=wrap（）；
expect（wrapper.find（'Connect（App）'）.to.have.length（1）；
});
它（'正确映射属性'，（）=>{
const wrapper=wrap（{images:[]}）；
expect（wrapper.props（）.images）.to.equal（[]）；
});
});

根据我在各种GitHub问题线程上在线阅读的内容，似乎一种常见的方法是抛出

console.warn/console.error

因此，当您编写测试时，您可以执行以下操作

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

希望这有帮助

更多信息：
检查是否有帮助