使用上下文消费者对 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'})
  }
}))

其余的测试将保持不变。

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

Unit-testing React Components using Context Consumers

reactjs

unit-testing

jestjs

enzyme

react-context