@nx/react 0.0.0-pr-31172-da609d4 → 0.0.0-pr-31163-1e9ab14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "0.0.0-pr-31172-da609d4",
+  "version": "0.0.0-pr-31163-1e9ab14",
   "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": "0.0.0-pr-31172-da609d4",
-    "@nx/js": "0.0.0-pr-31172-da609d4",
-    "@nx/eslint": "0.0.0-pr-31172-da609d4",
-    "@nx/web": "0.0.0-pr-31172-da609d4",
-    "@nx/module-federation": "0.0.0-pr-31172-da609d4",
+    "@nx/devkit": "0.0.0-pr-31163-1e9ab14",
+    "@nx/js": "0.0.0-pr-31163-1e9ab14",
+    "@nx/eslint": "0.0.0-pr-31163-1e9ab14",
+    "@nx/web": "0.0.0-pr-31163-1e9ab14",
+    "@nx/module-federation": "0.0.0-pr-31163-1e9ab14",
     "express": "^4.21.2",
     "http-proxy-middleware": "^3.0.3",
     "semver": "^7.6.3"

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { ProjectConfiguration, Tree } from '@nx/devkit';
+import { GeneratorCallback, 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<void>;
+export declare function storiesGenerator(host: Tree, schema: StorybookStoriesSchema): Promise<GeneratorCallback>;
 export default storiesGenerator;

package/src/generators/stories/stories.js

@@ -10,6 +10,7 @@ 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) {
@@ -90,9 +91,16 @@ 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'));