working

e2e/next/src/next-component-tests.test.ts

@@ -41,22 +41,29 @@ describe('NextJs Component Testing', () => {
         'All specs passed!'
       );
     }
-
     addTailwindToLib(libName);
+    if (runCypressTests) {
+      expect(runCLI(`component-test ${libName} --no-watch`)).toContain(
+        'All specs passed!'
+      );
+    }
   });
 
-  it.skip('should test a NextJs buildable lib', async () => {
+  it('should test a NextJs buildable lib', async () => {
     createLibWithCt(buildableLibName, true);
     if (runCypressTests) {
       expect(runCLI(`component-test ${buildableLibName} --no-watch`)).toContain(
         'All specs passed!'
       );
     }
-  });
-
-  it.todo('should support tailwinds');
 
-  it.todo('should be able to load assest');
+    addTailwindToLib(buildableLibName);
+    if (runCypressTests) {
+      expect(runCLI(`component-test ${libName} --no-watch`)).toContain(
+        'All specs passed!'
+      );
+    }
+  });
 });
 
 function createAppWithCt(appName: string) {
@@ -134,16 +141,17 @@ function createLibWithCt(libName: string, buildable: boolean) {
   runCLI(
     `generate @nrwl/next:component button --project=${libName} --flat --export --no-interactive`
   );
-
   updateFile(`libs/${libName}/src/lib/button.tsx`, (content) => {
     return `import { useEffect, useState } from 'react';
 export interface ButtonProps {
-  text: string
+text: string
 }
 
 export function Button(props: ButtonProps) {
-  return <button className="text-white bg-black p-4">{props.text}</button>
+return <button className="text-white bg-black p-4">{props.text}</button>
 }
+
+export default Button;
 `;
   });
 
@@ -156,11 +164,6 @@ function addTailwindToLib(libName: string) {
   runCLI(
     `generate @nrwl/react:setup-tailwind --project=${libName} --no-interactive`
   );
-  updateFile(`libs/${libName}/cypress/support/component.ts`, (content) => {
-    return `${content}
-import '../../src/lib/styles.css'`;
-  });
-
   updateFile(`libs/${libName}/src/lib/button.cy.tsx`, (content) => {
     return `import * as React from 'react';
 import Button from './button';
@@ -173,9 +176,16 @@ describe(Button.name, () => {
   it('should apply tailwind', () => {
     cy.mount(<Button text={'tailwind'} />);
     // should have tailwind styles
-    cy.get('button').should('have.css', 'color', 'rgb(255,255,255)');
+    cy.get('button').should('have.css', 'color', 'rgb(255, 255, 255)');
   });
 });
+`;
+  });
+  updateFile(`libs/${libName}/cypress/support/styles.ct.css`, (content) => {
+    return `${content}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 `;
   });
 }

packages/next/plugins/component-testing.ts

@@ -1,28 +1,28 @@
 import {
   createExecutorContext,
   getProjectConfigByPath,
-} from '@nrwl/cypress/src/utils/ct-helpers';
+} from '@nx/cypress/src/utils/ct-helpers';
 import {
   nxBaseCypressPreset,
   NxComponentTestingOptions,
-} from '@nrwl/cypress/plugins/cypress-preset';
+} from '@nx/cypress/plugins/cypress-preset';
 import {
   ExecutorContext,
   parseTargetString,
   readCachedProjectGraph,
   readTargetOptions,
   stripIndents,
-} from '@nrwl/devkit';
-import { withReact } from '@nrwl/react';
+} from '@nx/devkit';
+import { withReact } from '@nx/react';
 import {
   AssetGlobPattern,
   composePluginsSync,
   NormalizedWebpackExecutorOptions,
   withNx,
-} from '@nrwl/webpack';
+} from '@nx/webpack';
 import { join } from 'path';
 import { NextBuildBuilderOptions } from '../src/utils/types';
-import { CypressExecutorOptions } from '@nrwl/cypress/src/executors/cypress/cypress.impl';
+import { CypressExecutorOptions } from '@nx/cypress/src/executors/cypress/cypress.impl';
 
 export function nxComponentTestingPreset(
   pathToConfig: string,

packages/next/src/generators/cypress-component-configuration/cypress-component-configuration.ts

@@ -10,11 +10,11 @@ import {
   Tree,
   updateProjectConfiguration,
   visitNotIgnoredFiles,
-} from '@nrwl/devkit';
-import { isComponent } from '@nrwl/react/src/utils/ct-utils';
+} from '@nx/devkit';
+import { isComponent } from '@nx/react/src/utils/ct-utils';
 import { CypressComponentConfigurationGeneratorSchema } from './schema';
 import { nxVersion } from '../../utils/versions';
-import { componentTestGenerator } from '@nrwl/react';
+import { componentTestGenerator } from '@nx/react';
 
 export async function cypressComponentConfiguration(
   tree: Tree,
@@ -23,7 +23,7 @@ export async function cypressComponentConfiguration(
   const tasks: GeneratorCallback[] = [];
 
   const { cypressComponentProject } = ensurePackage<
-    typeof import('@nrwl/cypress')
+    typeof import('@nx/cypress')
   >('@nrwl/cypress', nxVersion);
   tasks.push(
     await cypressComponentProject(tree, {
@@ -41,9 +41,10 @@ export async function cypressComponentConfiguration(
 
   await addFiles(tree, projectConfig, options);
 
-  const { webpackInitGenerator } = ensurePackage<
-    typeof import('@nrwl/webpack')
-  >('@nrwl/webpack', nxVersion);
+  const { webpackInitGenerator } = ensurePackage<typeof import('@nx/webpack')>(
+    '@nrwl/webpack',
+    nxVersion
+  );
   tasks.push(
     await webpackInitGenerator(tree, {
       compiler: 'swc',

packages/next/src/generators/cypress-component-configuration/files/cypress.config.ts__tpl__

@@ -1,5 +1,5 @@
 import { defineConfig } from 'cypress';
-import { nxComponentTestingPreset } from '@nrwl/next/plugins/component-testing';
+import { nxComponentTestingPreset } from '@nx/next/plugins/component-testing';
 
 export default defineConfig({
   component: nxComponentTestingPreset(__filename),

packages/react/src/utils/ct-utils.ts

@@ -5,8 +5,8 @@ import {
   TargetConfiguration,
   Tree,
   updateProjectConfiguration,
-} from '@nrwl/devkit';
-import { ensureTypescript } from '@nrwl/js/src/utils/typescript/ensure-typescript';
+} from '@nx/devkit';
+import { ensureTypescript } from '@nx/js/src/utils/typescript/ensure-typescript';
 import { getComponentNode } from './ast-utils';
 
 let tsModule: typeof import('typescript');
@@ -28,7 +28,7 @@ export async function addCTTargetWithBuildTarget(
   }
 ): Promise<FoundTarget> {
   const { findBuildConfig } = await import(
-    '@nrwl/cypress/src/utils/find-target-options'
+    '@nx/cypress/src/utils/find-target-options'
   );
   const found = await findBuildConfig(tree, {
     project: options.project,

packages/webpack/src/utils/versions.ts

@@ -1,7 +1,7 @@
 export const nxVersion = require('../../package.json').version;
 
 export const swcLoaderVersion = '0.1.15';
-export const swcHelpersVersion = '~0.4.11';
+export const swcHelpersVersion = '~0.5.0';
 export const tsLibVersion = '^2.3.0';
 
 // React apps