Динамически передать заглушки на реагирующий компонент

Question

У меня есть компонент с большим количеством реквизита, но мне нужно только проверить несколько из них, которые меня называют ферментными тестами.

Есть ли способ динамически передавать все реквизиты с заглушками?

const film = true;
const ArabianNightsComponent = (Aladdin, AliBaba, ThiefOne, ThiefTwo, ..... ThiefForty) => {
    // do something with props
    const hero = film? Aladdin(): AliBaba();
    return (<div>{hero}</div>);
}

Если я хочу проверить это с помощью энзима (скажем, используя shallow), как я могу динамически передать TheifOne в ThiefForty?

Я пробовал это:

let wrapper = shallow(<ArabianNights Aladdin={sinon.stub()} AliBaba={sinon.stub()}/>);

Но я получаю множество ошибок от PropTypes, в которых мне не хватает необходимых реквизитов, а также я получаю ошибки от нижестоящих компонентов, когда я запускаю wrapper.html(), потому что в них отсутствуют их реквизиты.

Answer 1

Вы можете использовать PropTypes, чтобы выяснить, какие реквизиты есть у компонента, и сопоставить значения с заглушками, которые вы хотите передать.

let Aladdin, AliBaba;
let wrapper;
beforeEach( () => {
    Aladdin = sinon.stub();
    AliBaba = sinon.stub();
    const stubsToTest = {Aladdin, AliBaba}; // equiv. {"Aladdin": Sinon.stub() ...}
    // uses lodash to map values of oject
    const otherStubs = _.mapValues(ArabianNights.propTypes, () => sinon.stub());
    // now looks like {ThiefOne: stub, ThiefTwo: stub, ...}
    const props = {...otherStubs, ...stubToTest}; // combine objects
    wrapper = shallow(<ArabianNights {...props} />
});

Здесь stubsToTest следует после otherStubs, чтобы они не перезаписывались.

Затем продолжите тесты, как и ожидалось.