1

我曾经有这样的组件:

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

1 回答 1

1

您可以模拟UserContext.Consumer以使用某个硬编码用户进行渲染。不知道你是如何导出UserContext的,但它看起来像这样:

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

其余的测试将保持不变。

于 2018-09-20T17:06:08.230 回答