Back to Repositories

Testing MJS Module Integration in Create React App

This test suite validates MJS module support in Create React App through end-to-end testing using Puppeteer. It verifies the proper loading and execution of MJS libraries in both development and production environments.

Test Coverage Overview

The test suite provides comprehensive coverage for MJS module integration in Create React App.

Key areas tested include:

Development environment MJS library loading
Production build MJS library functionality
DOM element rendering and content verification
Snapshot comparison for output validation

Implementation Analysis

The testing approach utilizes Puppeteer for browser automation to validate MJS module functionality. The implementation follows an async/await pattern with proper test setup and teardown.

Technical patterns include:

Browser instance management
Page navigation and element selection
DOM content evaluation
Environment-specific testing (dev/prod)

Technical Details

Testing tools and configuration:

Puppeteer for browser automation
Jest as the test runner
Custom test setup utilities
Snapshot testing for output validation
Headless browser configuration
Local development server setup

Best Practices Demonstrated

The test suite exemplifies several testing best practices for React applications.

Notable practices include:

Proper resource cleanup after tests
Error handling with try/finally blocks
Consistent testing patterns across environments
Isolation of test environments
Efficient browser instance management

facebook/create-react-app

test/fixtures/mjs-support/index.test.js

            
'use strict';

const testSetup = require('../__shared__/test-setup');

const puppeteer = require('puppeteer');

test('can use mjs library in development', async () => {
  const { port, done } = await testSetup.scripts.start();

  const browser = await puppeteer.launch({ headless: true });
  try {
    const page = await browser.newPage();
    await page.goto(`http://localhost:${port}/`);
    await page.waitForSelector('.mjs-gql-result', { timeout: 0 });
    const output = await page.evaluate(() => {
      return Array.from(document.getElementsByClassName('mjs-gql-result')).pop()
        .innerHTML;
    });
    expect(output).toMatchSnapshot();
  } finally {
    browser.close();
    done();
  }
});
test('can use mjs library in production', async () => {
  await testSetup.scripts.build();
  const { port, done } = await testSetup.scripts.serve();

  const browser = await puppeteer.launch({ headless: true });
  try {
    const page = await browser.newPage();
    await page.goto(`http://localhost:${port}/`);
    await page.waitForSelector('.mjs-gql-result', { timeout: 0 });
    const output = await page.evaluate(() => {
      return Array.from(document.getElementsByClassName('mjs-gql-result')).pop()
        .innerHTML;
    });
    expect(output).toMatchSnapshot();
  } finally {
    browser.close();
    done();
  }
});