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来确定组件具有什么props，并将值映射到要传递的存根。

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

然后按预期继续测试。

动态将存根传递到React组件

1 个答案: