动态将存根传递给反应组件

Question

我有一个包含大量道具的组件，但我只需要测试在我的酶测试中调用的少数几个。

有没有办法用存根动态传入所有道具？

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

如果我想用 enzye 测试这一点（比如说，使用 shallow），我该如何动态地将 TheifOne 传递给 ThiefForty？

我试过这个：

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

但是我从 PropType 中得到了大量错误，我缺少所需的道具，而且当我运行 wrapper.html() 时，我从较低的组件中得到错误，因为它缺少它们的道具。

Answer 1

您可以使用 PropType 来确定组件具有哪些 prop，并将值映射到要传入的存根。

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之后，因此它们不会被覆盖。

然后按预期继续测试。