mocha/

Setup for Mocha

Requires all necessary files and Enzyme for the ability to work with render React components.

package.json

Add the following to the package.json tasks.

// main mocha tests
"mocha": "cross-env NODE_ENV=test nyc mocha --require lib/mocha/react-setup/index.js --compilers js:babel-core/register --timeout 0 ./src/**/**/**/*.mocha.js",
// main puppeteer tests
"ui": "NODE_ENV=development mocha --require lib/mocha/react-setup/index.js --compilers js:babel-core/register --timeout 0 ./src/**/*.puppeteer.js"
copy

Running this will require the setup file and execute any .mocha.js test files.

packages

It is known to work with the following packages

npm i --save-dev react-test-renderer@^16.3.2 \
react@^16.3.2 \
react-dom@^16.3.2 \
chai-enzyme@^0.8.0 \
chai@^4.1.2 \
enzyme@latest \
enzyme-adapter-react-16@latest \
babel-core@^6.26.0 \
babel-preset-env@^1.6.1 \
babel-preset-react@^6.24.1 \
chai-enzyme@beta
copy

.babelrc

Ensure there is a .babelrc file in the root of the project.

npm i --save-dev babel-core \
babel-preset-env \
babel-preset-react-app
copy

{
    "presets": ["env", "react-app"]
}
copy

Tests example

Testing components

For a component, create a file [component].mocha.js. A test will look like the following:

/**
 * PageHome tests
 * @author Dennis O'Keeffe
 */
import { expect, assert } from 'chai';
import chalk from 'chalk';

// Import the component
import PageHome from './index.js';

const wrapper = Enzyme.shallow(<PageHome />);

describe(chalk.yellow('PageHome functionality'), () => {
    // Find a DOM element to exist
    describe(chalk.magenta('div.page-home Enzyme tests'), () => {
        it('PageHome child element div to have className page-home', () => {
            expect(wrapper.find('div.page-home')).to.have.length(1);
        });
    });

    // Find another React Component element
    describe(chalk.magenta('SectionHome Enzyme tests'), () => {
        it('PageHome child element SectionHome to exist', () => {
            expect(wrapper.find('SectionHome').exists().to.equal(true);
        });
    });
});
copy

Testing with Puppeteer

/**
 * ComponentAccordian tests
 */
import chalk from 'chalk';
import ComponentAccordian from './index.js';
const puppeteer = require('puppeteer');

describe(chalk.yellow('ComponentAccordian UI functionality'), () => {
    describe(chalk.magenta('Simple Puppeteer test'), () => {
        it('Follows a simple Puppeteer example and fails', async () => {
            const browser = await puppeteer.launch({ headless: false });
            const page = await browser.newPage();

            await page.goto('https://developers.google.com/web/');

            // Type into search box.
            await page.type('#searchbox input', 'Headless Chrome');

            // Wait for suggest overlay to appear and click "show all results".
            const allResultsSelector = '.devsite-suggest-all-results';
            await page.waitForSelector(allResultsSelector);
            await page.click(allResultsSelector);

            // Wait for the results page to load and display the results.
            const resultsSelector =
                '.gsc-results .gsc-thumbnail-inside a.gs-title';
            await page.waitForSelector(resultsSelector);

            // Extract the results from the page.
            const links = await page.evaluate((resultsSelector) => {
                const anchors = Array.from(
                    document.querySelectorAll(resultsSelector)
                );
                return anchors.map((anchor) => {
                    const title = anchor.textContent.split('|')[0].trim();
                    return `${title} - ${anchor.href}`;
                });
            }, resultsSelector);
            console.log(links.join('\n'));

            await browser.close();

            expect(false).to.equal(true);
        });
    });
});
copy