variant.test.js

/* eslint-disable import/first */

import React from 'react';
import { render } from '@testing-library/react';

import { Variant } from './variant.js';

import { Page } from './widgets/page.js';
jest.mock('./widgets/page.js', () => ({
  Page: jest.fn().mockName('Page'),
}));
Page.mockImplementation((props) =>
  <div>
    [Page
     path={props.path}
     classNames={props.classNames}
    ]
    {props.children}
  </div>,
);

import { Heading } from './widgets/heading.js';
jest.mock('./widgets/heading.js', () => ({
  Heading: jest.fn().mockName('Heading'),
}));
Heading.mockImplementation((props) =>
  <div>
    [Heading
     text={props.text}
    ]
  </div>,
);

import { GameMenu } from './features/lobby/gameMenu.js';
jest.mock('./features/lobby/gameMenu.js', () => ({
  GameMenu: jest.fn().mockName('GameMenu'),
}));
GameMenu.mockImplementation((props) =>
  <div>
    [GameMenu
     slot={props.slot}
     gameIdentifier={props.gameIdentifier}
     dragons={props.dragons}
     newGameTo={props.newGameTo}
     loadGameTo={props.loadGameTo}
    ]
  </div>,
);

import { PlayersMenu } from './features/lobby/playersMenu.js';
jest.mock('./features/lobby/playersMenu.js', () => ({
  PlayersMenu: jest.fn().mockName('PlayersMenu'),
}));
PlayersMenu.mockImplementation((props) =>
  <div>
    [PlayersMenu
     slot={props.slot}
     to={props.to}
    ]
  </div>,
);

import { Player } from './features/play/player.js';
jest.mock('./features/play/player.js', () => ({
  Player: jest.fn().mockName('Player'),
}));
Player.mockImplementation((props) =>
  <div>
    [Player
     slot={props.slot}
    ]
  </div>,
);

describe('the Variant component', () => {
  test('renders game menu, players menu, and play pages', () => {
    const { container } = render(
      <Variant
        title={'abc'}
        slot={'def'}
        gameIdentifier={'ghi'}
        dragons={9}
        gameMenuPath={'/jkl'}
        playersMenuPath={'/mno'}
        playerPath={'/pqr'}
        classNames={'stu'} />,
    );
    expect(container).toMatchSnapshot();
  });
});