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

【问题标题】：Dynamically Pass stubs to a react component动态地将存根传递给反应组件
【发布时间】：2023-03-27 01:38:01
【问题描述】：

我有一个包含大量道具的组件，但我只需要测试一小部分在我的酶测试中被调用。

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

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

但是当我运行 wrapper.html() 时，我从 PropTypes 中收到大量错误，我缺少必需的道具，此外，我还从较低的组件中收到错误，因为它缺少它们的道具。

【问题讨论】：

标签： javascript reactjs enzyme sinon

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

然后按预期继续测试。

【讨论】：