Модульное тестирование компонентов 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'})
  }
}))

И остальная часть вашего теста останется прежней.