Привет чат. Умозрительная задача. Есть react компонент, у него может быть 20 визуальных состояний. Компонентов таких 100. Я хочу сделать визуальный регрессионный пак на это всё. И чтобы он был супер-быстрый, гонялся локально в хедлес режиме.

Какой стек использовать?

На ум приходит Cypress, в который завезли юнит-тесты: https://github.com/bahmutov/cypress-react-unit-test. Замаунтил, заскриншотил, сравнил, следующий.

Но чтобы проверить все 20 визуальных стейтов максимально быстро, хотелось бы иметь доступ к стейту компонента а-ля Enzyme, и кипарис тут уже не помощник (поправьте если не прав).

На ум приходит стек типа Enzyme + Puppeteer + Jest + jest-screenshot: заранал а жесте, замаунтил и задал стейт в ензиме, нарисовал в пуппитере, сфоткал с помощью плагина к жесту. Но я ни разу не видел упоминания такой связки. А вы?

Ещё есть такая тема, но под вопросом доверие к столь специфическому рендерингу: https://gist.github.com/dferber90/6fe76cde582b8746191478fac34c8b7d

Что бы вы выбрали? Мб упустил что.

> cypress-react-unit-test

// 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!')

О, круто, спасибо!

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

Спасибо мне что я умею читать README в проектах до конца 😉

// 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!')

такс такс такс. Ты за сайпрес взялся?)

я только рядом стоял, то посоны в чат ссылку кинули

хаха)

Первые звоночки

jasmine.getEnv().afterEach(function () {
            allure.createStep('Https', () => {
                allure.createAttachment('http', function () {
                    return fs.readFileSync('mock/data/roleSet.json');
                }, 'application/json')();
            })();
        });

По поводу моего вчерашнего вопроса, так работает

прост я аутист, после функции надо было проставить ()

Отсталось стать перфекционистом и убрать лапшу из колбеков)

я пока просто доволен, остольное не важно

Норм))

Смотрю на свою распберри с 32 гигами и понимаю что сайпрес туда нельзя

Да ладно тебе. Карту памяти купишь и норм)

Сайпрес разоряет ;)

Cypress hell

а что это за туловина у тебя?

Хз, стандартная утиль убунты 18.04