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组件进行单元测试

1 个答案: