React Apollo. Как замокать стейт компонента в тестах используя MockedProvider?
Есть два компонента Devices и DevicesCard.
<Devices>
<DevicesCard></DevicesCard>
</Devices>
Оба они используют Apollo Хуки
Devices - использует useQuery() для запроса данных.
DevicesCard - использует useSubscription() для обновления данных в реальном времени.
Компонент DevicesCard меняет стейт в компоненте Devices через callback.
const Devices = () => {
const [count, changeCount] = useState(0);
<Devices>
<p>{count}</p>
<DevicesCard changeState={changeCount} />
</Devices>
}
const DevicesCard = ({ changeState }) => {
<DevicesCard>
<Button onClick={() => changeState({ count: 1 })}>
</DevicesCard>
}
Hачинаю тестировать Devices. Нужно проверить, что после нажатия на кнопку в DevicesCard, обновляется стейт в Devices
<MockedProvider>
<Devices />
</MockedProvider>
В тестах получаю ошибку No more mocked responses for the query: subscription
Мол, "замокайте useSubscription() в дочернем компоненте"
Почему-то MockedProvider не мокирует дочерние компоненты
Хорошо, мокаю
jest.mock('./DeviceCard', () => props => 'DeviceCard');
Теперь DeviceCard возвращает просто текст => DeviceCard и уже мы не можем кликнуть по кнопке, чтобы поменять стейт.
Вопрос: Как поменять стейт без клика по кнопке?
Если бы можно было использовать shallow метод вместе с MockedProvider, то тут просто
wrapper.setState({ count: 1 });