Как открыть / получить доступ к хранилищу данных, как Redux в рамках кипарисного теста?

Question

Документы Cypress говорят, что вы можете

Предоставьте доступ к хранилищам данных (как в Redux), чтобы вы могли программно изменять состояние вашего приложения непосредственно из тестового кода.

Я также наблюдал за курсом по тестированию мистера Кента С. Доддса, где он упоминает, что хранилище с избыточностью может быть инициализировано с существующими данными в Cypress (до или во время тестов, не уверен)

Я просмотрел почти все документы и погуглил, и я просто не могу найти никаких ссылок или примеров того, как на самом деле это делать, кроме того, что это упомянуто как одно из ключевых отличий на вводной странице.

Как можно достичь чего-то подобного, если это возможно?

Интересующий меня случай относится к тестам E2E:

• Сначала я бы протестировал свои функции аутентификации / входа в систему как стандартный тест E2E
• Затем для тестирования других частей приложения я бы добавил команду Cypress, которая бы напрямую выполняла вызов auth и настраивала хранилище из ответа всякий раз, когда мне нужно было войти в систему (то же самое для выхода из системы), вместо ввода вручную учетные данные и вход в систему (это может быть тем, чем я все равно буду заниматься)

Возможно, это не лучший вариант использования (или даже хороший), но я уверен, что есть и другие случаи, когда хотя бы инициализация вашего состояния избыточности с некоторыми данными может оказаться очень полезной.

Спасибо!

Answer 1

Основываясь на ответе о Vuex, я сделал то, что работает:

// after createStore(...)
if (window.Cypress) {
  window.__store__ = store;
}

// in cypress tests
cy.window().should('have.property', '__store__');
cy.window().its('__store__')
  .then(
    store => store.dispatch({ type: 'UPDATE_CURRENT_PROFILE' })
  );

Не забудьте cy.visit('anyRoute'), прежде чем делать что-либо с магазином, чтобы приложение React было запущено и хранилище избыточностей уже было создано при попытке доступа к нему.

Answer 2

Я не уверен в точном синтаксисе приложения React, но посмотрите этот блог Тестирование веб-приложений Vue с хранилищем данных Vuex и бэкэндом REST .

Vuex - это VueJs-эквивалент Redux. Таким образом, вы добавляете ссылку на магазин в какой-то момент при запуске приложения (фрагмент кода изменен из блога, чтобы быть немного более общим)

if (window.Cypress) {
  // only available during E2E tests
  window.appStore = app.store  // Substitute an appropriate expression for React Redux
}

и ссылаться на него в тестах примерно так:

const getStore = () => cy.window().its('appStore')

it('has loading, newTodo and todos properties', () => {
  getStore().its('state').should('have.keys', ['loading', 'newTodo', 'todos'])
})