วิธีการจัดการ External Dependencies ในการทดสอบ Components ด้วย Cypress

import { useDarkMode } from './useDarkMode';

export const DarkModeSelector = () => {
  const { darkMode, setDarkMode } = useDarkMode();
  return (
    <button onClick={() => setDarkMode(!darkMode)}>
      {darkMode ? 'Switch to lightmode' : 'Switch to darkmode'}
    </button>;
};

export default DarkModeSelector;

import React, { createContext, useContext } from 'react';

const DarkModeContext = createContext(undefined);

interface DarkModeProviderTypes {
  children: React.ReactNode;
  value: {
    darkMode: boolean;
    setDarkMode: Function;
  };
}

export const DarkModeProvider = ({ children, value: { darkMode, setDarkMode } }: DarkModeProviderTypes) => (
  <DarkModeContext.Provider value={{ darkMode, setDarkMode }}>{children}</DarkModeContext.Provider>
);

export const useDarkMode = () => {
  const context = useContext(DarkModeContext);
  if (!context) {
    throw new Error('useDarkMode must be used within a DarkModeProvider');
  }
  return context;
};

import React from 'react'
import DarkModeSelector from './DarkModeSelector'

describe('<DarkModeSelector />', () => {
  it('renders', () => {
    // see: https://on.cypress.io/mounting-react
    cy.mount(<DarkModeSelector />)
  })
})

import React, { useState } from 'react';
import { DarkModeProvider } from './useDarkMode';

type DarkModeWrapperTypes = {
  children: React.ReactNode;
};

const DarkModeWrapper = ({ children }: DarkModeWrapperTypes) => {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <DarkModeProvider
      value={{
        darkMode,
        setDarkMode,
      }}
    >
      {children}
    </DarkModeProvider>
  );
};

export default DarkModeWrapper;

import DarkModeSelector from './DarkModeSelector';
import DarkModeWrapper from './DarkModeWrapper';

describe('<DarkModeSelector />', () => {
  it("renders the 'Switch to darkmode'", () => {
    cy.mount(
      <DarkModeWrapper>
        <DarkModeSelector />
      </DarkModeWrapper>
    );
    cy.contains('Switch to darkmode');
  });
})

import React, { useState } from 'react';
import { DarkModeProvider } from './useDarkMode';

type DarkModeWrapperTypes = {
  children: React.ReactNode;
  initialValue?: boolean;
};

const DarkModeWrapper = ({ children, initialValue }: DarkModeWrapperTypes) => {
  const [darkMode, setDarkMode] = useState(initialValue || false);

  return (
    <DarkModeProvider
      value={{
        darkMode,
        setDarkMode,
      }}
    >
      {children}
    </DarkModeProvider>
  );
};

export default DarkModeWrapper;

import React, { useState } from 'react';
import { DarkModeProvider } from './useDarkMode';

type DarkModeWrapperTypes = {
  children: React.ReactNode;
  initialValue?: boolean;
};

const initDarkModeWrapper = () => {
  const setDarkModeSpy = cy.spy();

  const DarkModeWrapper = ({ children, initialValue }: DarkModeWrapperTypes) => {
    const [darkMode, setDarkMode] = useState(initialValue);
    return (
      <DarkModeProvider
        value={{
          darkMode,
          // setDarkMode,
          setDarkMode: (value: boolean) => {
            setDarkMode(value);
            setDarkModeSpy(value);
          },
        }}
      >
        {children}
      </DarkModeProvider>
    );
  };

  return [setDarkModeSpy, DarkModeWrapper];
};

export default initDarkModeWrapper;

import DarkModeSelector from './DarkModeSelector';
import initDarkModeWrapper from './DarkModeWrapper';

describe('<DarkModeSelector />', () => {
  it("renders the 'Switch to darkmode'", () => {
    const [, DarkModeWrapper] = initDarkModeWrapper();
    cy.mount(
      <DarkModeWrapper>
        <DarkModeSelector />
      </DarkModeWrapper>
    );
    cy.contains('Switch to darkmode');
  });

  it("changes context value to 'true' once clicked when initiated with darkmode=false value", () => {
    const [setDarkModeSpy, DarkModeWrapper] = initDarkModeWrapper();
    cy.mount(
      <DarkModeWrapper initialValue={false}>
        <DarkModeSelector />
      </DarkModeWrapper>
    );

    cy.get('button').click();
    cy.wrap(setDarkModeSpy).should('have.been.called');
  });
})