ReactNを露出してCypressから使う

ReactNを露出するしてCypressからsetGlobalを使ってテスト用の状態を作り、それをテストする。

できた。

App.tsx

function App() {
  const [fusens] = useGlobal("fusens");
  return (...);
}

index.tsx

setGlobal(INITIAL_GLOBAL_STATE);
const movidea = {
  getGlobal,
  setGlobal,
};

const debug = {};

declare global {
  interface Window {
    debug: any;
    movidea: typeof movidea;
  }
}

window.movidea = movidea;
window.debug = debug;

解説はReactNを露出する

• 僕はアプリの公開時にもユーザ(主に僕)がハックしやすいようにmovidea(アプリ名)にsetGlobalなどをつけてるけど、debugの方につけてリリースビルドでは削るって設計もアリだと思う。

テストコード cypress/…/adjust_font_size.js

/// <reference types="cypress" />
 
describe('adjust font size', () => {
  beforeEach(() => {
    cy.visit('/')
    let a = 1;
    let b = 1;
    const fusens = [];
    for (let i = 0; i < 11; i++) {
      [a, b] = [b, a + b];
      fusens.push({
        text: ">" + "あ".repeat(a),
        x: 50 * i,
        y: 50 * i,
      });
    }
    cy.window().its('movidea').then(movidea => {
      setTimeout(() => {
        movidea.setGlobal({ fusens });        
      })
    });
  })
 
  it('fusen sizes', () => {
    cy.get('.fusen').should('have.length', 12).first()
      .should("have.css", "font-size", "66px")
      .should("not.have.css", "align-items", "flex-start")
    cy.get('.fusen').eq(1).should("have.css", "font-size", "53px")
    cy.get('.fusen').eq(2).should("have.css", "font-size", "38px")
    cy.get('.fusen').eq(10)
      .should("have.css", "font-size", "10px")
      .should("have.css", "align-items", "flex-start")
  })
})

setTimeoutに関しては see ✅CypressからsetGlobalするとフックが反応しない