Как получить доступ к локальному состоянию компонента React с помощью Cypress?

Question

Я использую реагирование с редуксом и тестирование с кипарисом, я смог получить доступ к хранилищу, используя cy.window (). Its ('store'). Invoke ('getState'). Then ((state) =>{} Но как мне получить доступ к локальному состоянию компонента, а не к хранилищу приложений?

Я пытался

cy.get('.simple-component').its('getState')

или

cy.get('.simple-component').invoke('getState')

, но Cypress возвращает "CypressError: Истекло время ожидания повторной попытки: cy.invoke () допустил ошибку, так как свойство: 'getState' не существует для вашей темы "И на консоли Cypress (в chrome) это приводит к выводу:

Yielded:   
<div class="simple-component" getstate="[object Object]"></div>

Кажется, это вызваноReact удаляет методы из DOM, поэтому мне нужен доступ к нему в React, а не в DOM?

import React, { Component } from 'react';

class simpleComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            sample: "hello"
            }
    }
    // getState() just for testing on cypress
    getState() {
      return this.state
    }
    render(){
      return <div className="simple-component" getState={this.getState()}></div>
    }    
}

В качестве альтернативы я могу экспортировать состояние локального компонента в конце простого компонента, используяwindow.store?

Answer 1

Для этого есть плагин Cypress, который называется react-unit-test. Он дает вам возможность монтировать компоненты React напрямую (добавляет команду cy.mount()) и обеспечивает доступ к внутреннему состоянию компонента.

Вот пример из readme репо:

// load Cypress TypeScript definitions for IntelliSense
/// <reference types="cypress" />
// import the component you want to test
import { HelloState } from '../../src/hello-x.jsx'
import React from 'react'
describe('HelloState component', () => {
  it('works', () => {
    // mount the component under test
    cy.mount(<HelloState />)
    // start testing!
    cy.contains('Hello Spider-man!')
    // mounted component can be selected via its name, function, or JSX
    // e.g. '@HelloState', HelloState, or <HelloState />
    cy.get(HelloState)
      .invoke('setState', { name: 'React' })
    cy.get(HelloState)
      .its('state')
      .should('deep.equal', { name: 'React' })
    // check if GUI has rerendered
    cy.contains('Hello React!')
  })
})