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

Question

我曾经有这样的组件：

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
• 显示的用户是提供的用户

Answer 1

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

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

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