@nx/next/plugins/component-testing.js

The Next.js plugin for Nx contains executors and generators for managing Next.js applications and libraries within an Nx workspace. It provides: - Scaffolding for creating, building, serving, linting, and testing Next.js applications. - Integration wit

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.nxComponentTestingPreset = nxComponentTestingPreset;
const cypress_preset_1 = require("@nx/cypress/plugins/cypress-preset");
const ct_helpers_1 = require("@nx/cypress/src/utils/ct-helpers");
const devkit_1 = require("@nx/devkit");
const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
const react_1 = require("@nx/react");
const webpack_1 = require("@nx/webpack");
const configuration_1 = require("nx/src/config/configuration");
const path_1 = require("path");
function nxComponentTestingPreset(pathToConfig, options) {
    if (global.NX_GRAPH_CREATION) {
        // this is only used by plugins, so we don't need the component testing
        // options, cast to any to avoid type errors
        return (0, cypress_preset_1.nxBaseCypressPreset)(pathToConfig);
    }
    const graph = (0, devkit_1.readCachedProjectGraph)();
    const { targets: ctTargets, name: ctProjectName } = (0, ct_helpers_1.getProjectConfigByPath)(graph, pathToConfig);
    const ctTargetName = options?.ctTargetName || 'component-test';
    const ctConfigurationName = process.env.NX_CYPRESS_TARGET_CONFIGURATION;
    const ctExecutorContext = (0, ct_helpers_1.createExecutorContext)(graph, ctTargets, ctProjectName, ctTargetName, ctConfigurationName);
    let buildTarget = options?.buildTarget;
    if (!buildTarget) {
        const ctExecutorOptions = (0, devkit_1.readTargetOptions)({
            project: ctProjectName,
            target: ctTargetName,
            configuration: ctConfigurationName,
        }, ctExecutorContext);
        buildTarget = ctExecutorOptions.devServerTarget;
    }
    let buildAssets = [];
    let buildFileReplacements = [];
    let buildOuputPath = `dist/${ctProjectName}/.next`;
    if (buildTarget) {
        const parsedBuildTarget = (0, devkit_1.parseTargetString)(buildTarget, {
            cwd: process.cwd(),
            root: devkit_1.workspaceRoot,
            projectsConfigurations: (0, devkit_1.readProjectsConfigurationFromProjectGraph)(graph),
            nxJsonConfiguration: (0, configuration_1.readNxJson)(devkit_1.workspaceRoot),
            isVerbose: false,
            projectName: ctProjectName,
            projectGraph: graph,
        });
        const buildProjectConfig = graph.nodes[parsedBuildTarget.project]?.data;
        if (buildProjectConfig?.targets?.[parsedBuildTarget.target]?.executor !==
            '@nx/next:build') {
            throw new Error(`The '${parsedBuildTarget.target}' target of the '${[
                parsedBuildTarget.project,
            ]}' project is not using the '@nx/next:build' executor. ` +
                `Please make sure to use '@nx/next:build' executor in that target to use Cypress Component Testing.`);
        }
        const buildExecutorContext = (0, ct_helpers_1.createExecutorContext)(graph, buildProjectConfig.targets, parsedBuildTarget.project, parsedBuildTarget.target, parsedBuildTarget.configuration);
        const buildExecutorOptions = (0, devkit_1.readTargetOptions)({
            project: parsedBuildTarget.project,
            target: parsedBuildTarget.target,
            configuration: parsedBuildTarget.configuration,
        }, buildExecutorContext);
        buildAssets ??= buildExecutorOptions.assets;
        buildFileReplacements ??= buildExecutorOptions.fileReplacements;
        buildOuputPath ??= buildExecutorOptions.outputPath;
    }
    const ctProjectConfig = graph.nodes[ctProjectName]?.data;
    if (!ctProjectConfig) {
        throw new Error((0, devkit_1.stripIndents) `Unable to load project configs from the project graph.
Provided build target, ${buildTarget}.
Able to find CT project, ${!!ctProjectConfig}.`);
    }
    const webpackOptions = {
        root: ctExecutorContext.root,
        projectRoot: ctProjectConfig.root,
        sourceRoot: (0, ts_solution_setup_1.getProjectSourceRoot)(ctProjectConfig),
        main: '',
        useTsconfigPaths: undefined,
        fileReplacements: buildFileReplacements,
        assets: buildAssets,
        outputPath: buildOuputPath,
        outputFileName: 'main.js',
        compiler: options?.compiler || 'swc',
        tsConfig: (0, path_1.join)(ctExecutorContext.root, ctProjectConfig.root, 'tsconfig.json'),
    };
    const configure = (0, webpack_1.composePluginsSync)((0, webpack_1.withNx)({
        target: 'web',
        styles: [],
        scripts: [],
        postcssConfig: ctProjectConfig.root,
    }), (0, react_1.withReact)({}));
    const webpackConfig = configure({}, {
        options: webpackOptions,
        context: ctExecutorContext,
    });
    return {
        ...(0, cypress_preset_1.nxBaseCypressPreset)(pathToConfig),
        specPattern: '**/*.cy.{js,jsx,ts,tsx}',
        devServer: {
            ...{ framework: 'react', bundler: 'webpack' },
            webpackConfig,
        },
    };
}