使用上下文消费者对 React 组件进行单元测试

Posted 2023-04-14

【中文标题】使用上下文消费者对 React 组件进行单元测试

【英文标题】：Unit-testing React Components using Context Consumers

【发布时间】：2019-02-24 20:18:47

【问题描述】：

我曾经有这样的组件：

class Foo extends React.Component 
    render() 
        return (
            <div className="Foo">
                <div id="user">Bar</div>
                <SomeOtherComponent />
            </div>
        )
    

还有这个测试：

it('renders a help button', () => 
  expect(shallow(<Foo />).find('#user').length).toEqual(1);
);

但是现在我已经为这个对象添加了一个上下文消费者：

class Foo extends React.Component 
    render() 
        return (
            <UserContext.Consumer>
                (user) => (
                    <div className="Foo">
                        <div id="user">user</div>
                        <SomeOtherComponent />
                    </div>
                )
            </UserContext.Consumer>
        )
    

如何测试以下条件？

“#user”的数量为1 显示的用户是提供的用户

【参考方案1】：

您可以模拟UserContext.Consumer 以使用某个硬编码用户进行渲染。不确定如何导出 UserContext，但它看起来像这样：

jest.mock('path/to/UserContextModule', () => (
  UserContext: 
    Consumer: (children) => children(user: 'User')
  
))

您的其余测试将保持不变。

【讨论】：

另外，如果它很浅，你可能需要.dive()

不是我应得的英雄，而是我需要的英雄。