@nx/react 21.2.0-beta.2 → 21.2.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "21.2.0-beta.2",
+  "version": "21.2.0-beta.4",
   "private": false,
   "description": "The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Vitest, Playwright, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -38,11 +38,11 @@
     "minimatch": "9.0.3",
     "picocolors": "^1.1.0",
     "tslib": "^2.3.0",
-    "@nx/devkit": "21.2.0-beta.2",
-    "@nx/js": "21.2.0-beta.2",
-    "@nx/eslint": "21.2.0-beta.2",
-    "@nx/web": "21.2.0-beta.2",
-    "@nx/module-federation": "21.2.0-beta.2",
+    "@nx/devkit": "21.2.0-beta.4",
+    "@nx/js": "21.2.0-beta.4",
+    "@nx/eslint": "21.2.0-beta.4",
+    "@nx/web": "21.2.0-beta.4",
+    "@nx/module-federation": "21.2.0-beta.4",
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.3",
     "semver": "^7.6.3"

package/plugins/component-testing/index.js

@@ -148,9 +148,11 @@ function buildTargetWebpack(ctx, buildTarget, componentTestingProjectName) {
     `);
     }
     if (buildableProjectConfig.targets[parsed.target].executor !==
-        '@nx/webpack:webpack') {
-        throw new InvalidExecutorError(`The '${parsed.target}' target of the '${parsed.project}' project is not using the '@nx/webpack:webpack' executor. ` +
-            `Please make sure to use '@nx/webpack:webpack' executor in that target to use Cypress Component Testing.`);
+        '@nx/webpack:webpack' &&
+        buildableProjectConfig.targets[parsed.target].executor !==
+            '@nx/rspack:rspack') {
+        throw new InvalidExecutorError(`The '${parsed.target}' target of the '${parsed.project}' project is not using the '@nx/webpack:webpack' or '@nx/rspack:rspack' executor. ` +
+            `Please make sure to use '@nx/webpack:webpack' or '@nx/rspack:rspack' executor in that target to use Cypress Component Testing.`);
     }
     const context = (0, ct_helpers_1.createExecutorContext)(graph, buildableProjectConfig.targets, parsed.project, parsed.target, parsed.target);
     const { normalizeOptions, } = require('@nx/webpack/src/executors/webpack/lib/normalize-options');

package/src/generators/component-story/files/jsx/__componentFileName__.stories.jsx__tmpl__

@@ -1,7 +1,6 @@
 import componentName from './<%= componentImportFileName %>';
 <%_ if ( interactionTests ) { _%>
-import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { expect } from 'storybook/test';
 <%_ } _%>
 
 export default {
@@ -21,9 +20,8 @@ export const Primary = {
 
 <%_ if ( interactionTests ) { _%>
 export const Heading: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    expect(canvas.getByText(/Welcome to <%=componentName%>!/gi)).toBeTruthy();
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText(/Welcome to <%=componentName%>!/gi)).toBeTruthy();
   },
 };
-<%_ } _%>
+<%_ } _%>

package/src/generators/component-story/files/tsx/__componentFileName__.stories.tsx__tmpl__

@@ -1,8 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from 'storybook/internal/types';
 import { <%= componentName %>  } from './<%= componentImportFileName %>';
 <%_ if ( interactionTests ) { _%>
-import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { expect } from 'storybook/test';
 <%_ } _%>
 
 const meta: Meta<typeof <%= componentName %>> = {
@@ -27,9 +26,8 @@ export const Heading: Story = {
   args: {<% for (let prop of props) { %>
     <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
   },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    expect(canvas.getByText(/Welcome to <%=componentName%>!/gi)).toBeTruthy();
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText(/Welcome to <%=componentName%>!/gi)).toBeTruthy();
   },
 };
 <% } %>

package/src/generators/stories/stories.d.ts

@@ -1,4 +1,4 @@
-import { GeneratorCallback, ProjectConfiguration, Tree } from '@nx/devkit';
+import { ProjectConfiguration, Tree } from '@nx/devkit';
 export interface StorybookStoriesSchema {
     project: string;
     interactionTests?: boolean;
@@ -9,5 +9,5 @@ export interface StorybookStoriesSchema {
 export declare function projectRootPath(tree: Tree, config: ProjectConfiguration): Promise<string>;
 export declare function containsComponentDeclaration(tree: Tree, componentPath: string): boolean;
 export declare function createAllStories(tree: Tree, projectName: string, interactionTests: boolean, js: boolean, projects: Map<string, ProjectConfiguration>, projectConfiguration: ProjectConfiguration, ignorePaths?: string[]): Promise<void>;
-export declare function storiesGenerator(host: Tree, schema: StorybookStoriesSchema): Promise<GeneratorCallback>;
+export declare function storiesGenerator(host: Tree, schema: StorybookStoriesSchema): Promise<void>;
 export default storiesGenerator;

package/src/generators/stories/stories.js

@@ -10,7 +10,6 @@ const devkit_1 = require("@nx/devkit");
 const path_1 = require("path");
 const minimatch_1 = require("minimatch");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
-const versions_1 = require("../../utils/versions");
 const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 let tsModule;
 async function projectRootPath(tree, config) {
@@ -91,16 +90,9 @@ async function storiesGenerator(host, schema) {
     const projectConfiguration = projects.get(schema.project);
     schema.interactionTests = schema.interactionTests ?? true;
     await createAllStories(host, schema.project, schema.interactionTests, schema.js, projects, projectConfiguration, schema.ignorePaths);
-    const tasks = [];
-    if (schema.interactionTests) {
-        const { interactionTestsDependencies, addInteractionsInAddons } = (0, devkit_1.ensurePackage)('@nx/storybook', versions_1.nxVersion);
-        tasks.push((0, devkit_1.addDependenciesToPackageJson)(host, {}, interactionTestsDependencies()));
-        addInteractionsInAddons(host, projectConfiguration);
-    }
     if (!schema.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }
-    return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 async function isNextJsProject(tree, config) {
     const { findStorybookAndBuildTargetsAndCompiler } = await Promise.resolve().then(() => require('@nx/storybook/src/utils/utilities'));