Question

使用HOCs测试组件通常似乎是一个主要问题（enzyme#539，enzyme#1002，recompose#407，...）。大多数讨论包括“只测试HOC作为函数，然后再测试不使用”的观点，对于单元测试，实际组件作为命名导出导出并单独测试。然后建议一些解决方法（如dive，直到到达组件等）。

因此，技术实施对我来说也是（相对）清楚的，但现在我很难知道如何以及是否应该最终对HOC进行测试。

示例：

import withState from 'recompose/withState';

export const InnerMyComponent = /* ... */;

const enhance = withState('prop', 'setProp', null);

export const MyComponent = enhance(InnerMyComponent);

对于app来说，正确调用withState并将prop和setProp赋予内部组件似乎非常重要。我是否应该相应地测试两个道具是否正确传递，如

expect(shallow(<MyComponent />).dive().prop('setProp')).toBeDefined()

那么，我应该编写类似的测试，或者测试应用程序组合的更好方法是什么？

Answer 1

测试或不测试HOC可能取决于您使用的是哪个HOC（无论是您编写的HOC还是从库中导入的HOC）。如果它是从库中导入的HOC，则库负责为该HOC编写测试用例，因为它是向您公开方法和道具的因素，因此应该正常工作。另一方面，如果您已经编写了HOC，则应编写测试用例以验证它是否在不同的场景中正常运行。

为了测试用HOC包裹的组件，最简单的方法是通过提供HOC将在浅层安装时提供的组件的道具来测试它

const wrapper = shallow(<InnerMyComponent prop={null} setProps={jest.fn()} />);

然后测试InnerMyComponent的行为

现在当你必须测试一个自定义HOC时，你将它测试为一个函数，将一些随机组件传递给它并检查组件是否接收到这些道具并测试内部函数

Answer 2

在对HOC进行单元测试时，应该测试三个主要内容（如果HOC的某些部分非常简单，那么这些测试可能并非都是必要的）。以下示例使用Jest。

1）道具应正确传递到内部组件。这包括HOC创建或修改的内容，以及直接通过的内容。例如：

    it("passes A prop to InnerMyComponent", async () => {
        // ...
        let container = shallow(<MyComponent {...props}/>).dive();
        const inner = container.find(InnerMyComponent).at(0);
        const { A } = inner.props();
        expect(inner.props().A).toEqual(expectedA);
    });

2）HOC中的生命周期方法按预期工作。例如：

    it("calls X on mount", async () => {
        // ...
        spy = jest.spyOn(MyComponent.WrappedComponent.prototype, "X");
        const component = mount(
            <MyComponent {...props}/>
        );
        expect(spy).toHaveBeenCalled();
        spy.mockReset();
    });

3）HOC中的非生命周期方法按预期工作。

    it("method P works", () => {
        // ...
        let container = shallow(<MyComponent {...props}/>).dive();
        let result = container.instance().P("input");
        expect(result).toEqual(expectedResult);
    });

任何进一步的功能都将与内部组件相关，因此应在那里进行测试，或者在集成测试领域。由于HOC作为正常组件，它们应该能够在集成测试中进行处理。

我应该如何使用HOC测试React组件的组成（或者我应该测试它们）？

2 个答案: