New rollup example and template (#444)

Co-authored-by: Gleb Bahmutov <[email protected]>

Author: dmtrKovalenko

README.md

@@ -221,6 +221,7 @@ Folder Name | Description
 [visual-testing-with-happo](examples/visual-testing-with-happo) | [Visual testing](#visual-testing) for components using 3rd party service [Happo](https://happo.io/)
 [visual-testing-with-applitools](examples/visual-testing-with-applitools) | [Visual testing](#visual-testing) for components using 3rd party service [Applitools.com](https://applitools.com/)
 [using-babel](examples/using-babel) | Bundling specs and loaded source files using project's existing `.babelrc` file
+[webpack-file](examples/rollup) | Bundle component and specs using [rollup](http://rollupjs.org/guide/en/).
 [webpack-file](examples/webpack-file) | Load existing `webpack.config.js` file
 [webpack-options](examples/webpack-options) | Using the default Webpack options from `@cypress/webpack-preprocessor` to transpile JSX specs
 <!-- prettier-ignore-end -->

circle.yml

@@ -172,6 +172,19 @@ workflows:
                   npm run only-covered
                 working_directory: examples/webpack-file
 
+      - cypress/run:
+          name: Example Rollup
+          requires:
+            - Install
+          # each example installs "cypress-react-unit-test" as a local dependency (symlink)
+          executor: cypress/base-12
+          install-command: npm install --no-bin-links
+          verify-command: echo 'Already verified'
+          no-workspace: true
+          working_directory: examples/rollup
+          command: npm test
+          store_artifacts: true
+
       - cypress/run:
           name: Example Webpack options
           requires:
@@ -338,6 +351,7 @@ workflows:
             - Example Tailwind
             - Example Webpack file
             - Example Webpack options
+            - Example Rollup
             - Visual Sudoku
             - Visual with Percy
             - Visual with Happo

examples/rollup/.npmrc

@@ -0,0 +1 @@
+package-lock=false

examples/rollup/README.md

@@ -0,0 +1,29 @@
+# example: rollup
+
+> Compiling component tests using Rollup bundler
+
+## Usage
+
+1. Make sure the root project has been built .
+
+```bash
+# in the root of the project
+npm install
+npm run build
+```
+
+2. Run `npm install` in this folder to symlink the `cypress-react-unit-test` dependency.
+
+```bash
+# in this folder
+npm install
+npm run build
+```
+
+3. Start Cypress
+
+```bash
+npm run cy:open
+# or just run headless tests
+npm test
+```

examples/rollup/babel.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-typescript',
+    '@babel/preset-react',
+  ],
+  plugins: ['@babel/plugin-proposal-class-properties'],
+}

examples/rollup/cypress.json

@@ -0,0 +1,7 @@
+{
+  "testFiles": "**/*spec.{ts,tsx}",
+  "experimentalComponentTesting": true,
+  "experimentalFetchPolyfill": true,
+  "componentFolder": "src",
+  "fixturesFolder": false
+}

examples/rollup/cypress/integration/cy-spec.js

@@ -0,0 +1,6 @@
+/// <reference types="cypress" />
+describe('integration spec', () => {
+  it('works', () => {
+    expect(1).to.equal(1)
+  })
+})

examples/rollup/cypress/plugins/index.js

@@ -0,0 +1,15 @@
+const rollupPreprocessor = require('@bahmutov/cy-rollup')
+
+module.exports = (on, config) => {
+  on(
+    'file:preprocessor',
+    rollupPreprocessor({
+      configFile: 'rollup.config.js',
+    }),
+  )
+
+  require('@cypress/code-coverage/task')(on, config)
+  // IMPORTANT to return the config object
+  // with the any changed environment variables
+  return config
+}

examples/rollup/cypress/support/index.js

@@ -0,0 +1,2 @@
+import 'cypress-react-unit-test/support'
+import '@cypress/code-coverage/support'

examples/rollup/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "example-rollup",
+  "description": "Component testing using Rollup bundler",
+  "private": true,
+  "scripts": {
+    "build": "../../node_modules/.bin/rollup -c",
+    "test": "../../node_modules/.bin/cypress-expect run --passing 1",
+    "cy:open": "../../node_modules/.bin/cypress open"
+  },
+  "devDependencies": {
+    "cypress-react-unit-test": "file:../.."
+  }
+}

examples/rollup/rollup.config.js

@@ -0,0 +1,26 @@
+import babel from '@rollup/plugin-babel'
+import replace from '@rollup/plugin-replace'
+import commonjs from '@rollup/plugin-commonjs'
+import nodeResolve from '@rollup/plugin-node-resolve'
+
+const extensions = ['.ts', '.tsx', '.js', '.jsx']
+export default [
+  {
+    input: './src/index.ts',
+    output: {
+      dir: 'dist',
+      format: 'esm',
+    },
+    plugins: [
+      nodeResolve({ extensions }),
+      // make sure that this is required to process cypress-react-unit-test code
+      commonjs(),
+      replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
+      babel({
+        exclude: /node_modules/,
+        babelHelpers: 'inline',
+        extensions,
+      }),
+    ],
+  },
+]

examples/rollup/src/MyAwesomeComponent.spec.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+import { MyAwesomeComponent } from './MyAwesomeComponent'
+import { mount } from 'cypress-react-unit-test'
+
+describe('rollup for bundling components', () => {
+  it('renders component processed by rollup', () => {
+    mount(<MyAwesomeComponent />)
+
+    cy.contains('My awesome component!')
+  })
+})

examples/rollup/src/MyAwesomeComponent.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+interface MyAwesomeComponentProps {}
+
+export const MyAwesomeComponent: React.FC<MyAwesomeComponentProps> = ({}) => {
+  return (
+    <h1>
+      My <strong> awesome </strong> component!
+    </h1>
+  )
+}

examples/rollup/src/index.ts

@@ -0,0 +1 @@
+export { MyAwesomeComponent } from './MyAwesomeComponent'

examples/rollup/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "baseUrl": ".",
+    "noEmit": true,
+    "target": "esnext",
+    "types": ["cypress"],
+    // ⚠️ required only for demo purposes, remove from code
+    "paths": {
+      "cypress-react-unit-test": ["../../lib/index.ts"]
+    }
+  },
+  "exclude": ["node_modules"],
+  "include": ["./src/**.ts*"]
+}

init/templates/rollup.test.ts

@@ -0,0 +1,71 @@
+import { mockFs, clearMockedFs } from '../test/mockFs'
+import { RollupTemplate } from './rollup'
+
+describe('rollup-file install template', () => {
+  afterEach(clearMockedFs)
+
+  it('suggests the right code', () => {
+    expect(
+      RollupTemplate.getPluginsCode(
+        {
+          rollupConfigPath: '/configs/rollup.config.js',
+        },
+        { cypressProjectRoot: '/' },
+      ),
+    ).toContain("configFile: 'configs/rollup.config.js'")
+  })
+
+  it('resolves rollup.config.js', () => {
+    mockFs({
+      'rollup.config.js': 'module.exports = { }',
+    })
+
+    const { success, payload } = RollupTemplate.test(process.cwd())
+    expect(success).toBe(true)
+    expect(payload?.rollupConfigPath).toBe('/rollup.config.js')
+  })
+
+  it('finds the closest package.json and tries to fetch rollup config path from scrips', () => {
+    mockFs({
+      'configs/rollup.js': 'module.exports = { }',
+      'package.json': JSON.stringify({
+        scripts: {
+          build: 'rollup --config configs/rollup.js',
+        },
+      }),
+    })
+
+    const { success, payload } = RollupTemplate.test(process.cwd())
+
+    expect(success).toBe(true)
+    expect(payload?.rollupConfigPath).toBe('/configs/rollup.js')
+  })
+
+  it('looks for package.json in the upper folder', () => {
+    mockFs({
+      'i/am/in/some/deep/folder/withFile': 'test',
+      'somewhere/configs/rollup.js': 'module.exports = { }',
+      'package.json': JSON.stringify({
+        scripts: {
+          build: 'rollup --config somewhere/configs/rollup.js',
+        },
+      }),
+    })
+
+    const { success, payload } = RollupTemplate.test('i/am/in/some/deep/folder')
+
+    expect(success).toBe(true)
+    expect(payload?.rollupConfigPath).toBe('/somewhere/configs/rollup.js')
+  })
+
+  it('returns success:false if cannot find rollup config', () => {
+    mockFs({
+      'a.js': '1',
+      'b.js': '2',
+    })
+
+    const { success, payload } = RollupTemplate.test('/')
+    expect(success).toBe(false)
+    expect(payload).toBe(undefined)
+  })
+})

init/templates/rollup.ts

@@ -0,0 +1,120 @@
+import path from 'path'
+import chalk from 'chalk'
+import findUp from 'find-up'
+import highlight from 'cli-highlight'
+import { createFindPackageJsonIterator } from '../findPackageJson'
+import { Template } from '../Template'
+
+export function extractRollupConfigPathFromScript(script: string) {
+  if (script.includes('rollup ')) {
+    const cliArgs = script.split(' ').map(part => part.trim())
+    const configArgIndex = cliArgs.findIndex(
+      arg => arg === '--config' || arg === '-c',
+    )
+
+    return configArgIndex === -1 ? null : cliArgs[configArgIndex + 1]
+  }
+
+  return null
+}
+
+export const RollupTemplate: Template<{ rollupConfigPath: string }> = {
+  message:
+    'It looks like you have custom `rollup.config.js`. We can use it to bundle the components for testing.',
+  getExampleUrl: () =>
+    'https://github.com/bahmutov/cypress-react-unit-test/tree/main/examples/rollup',
+  recommendedComponentFolder: 'src',
+  getPluginsCode: (payload, { cypressProjectRoot }) => {
+    const includeWarnComment = !Boolean(payload)
+    const rollupConfigPath = payload
+      ? path.relative(cypressProjectRoot, payload.rollupConfigPath)
+      : 'rollup.config.js'
+
+    return [
+      `// do not forget to install`,
+      `const rollupPreprocessor = require('@bahmutov/cy-rollup')`,
+      `module.exports = (on, config) => {`,
+      `  on(`,
+      `    'file:preprocessor',`,
+      `    rollupPreprocessor({`,
+      includeWarnComment
+        ? '      // TODO replace with valid rollup config path'
+        : '',
+      `      configFile: '${rollupConfigPath}',`,
+      `    }),`,
+      `  )`,
+      ``,
+      `  require('@cypress/code-coverage/task')(on, config)`,
+      `  // IMPORTANT to return the config object`,
+      `  return config`,
+      `}`,
+    ].join('\n')
+  },
+  printHelper: () => {
+    console.log(
+      `Make sure that it is also required to add some additional configuration to the ${chalk.red(
+        'rollup.config.js',
+      )}. Here is whats required:`,
+    )
+
+    const code = highlight(
+      [
+        `import replace from '@rollup/plugin-replace'`,
+        `import commonjs from '@rollup/plugin-commonjs'`,
+        `import nodeResolve from '@rollup/plugin-node-resolve'`,
+        ``,
+        `export default [`,
+        `  {`,
+        `    plugins: [`,
+        `      nodeResolve(),`,
+        `      // process cypress-react-unit-test-code`,
+        `      commonjs(),`,
+        `      // required for react sources`,
+        `      replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),`,
+        `    ]`,
+        `  }`,
+        `]`,
+      ].join('\n'),
+      { language: 'js' },
+    )
+
+    console.log(`\n${code}\n`)
+  },
+  test: root => {
+    const rollupConfigPath = findUp.sync('rollup.config.js', { cwd: root })
+    if (rollupConfigPath) {
+      return {
+        success: true,
+        payload: { rollupConfigPath },
+      }
+    }
+
+    const packageJsonIterator = createFindPackageJsonIterator(root)
+    return packageJsonIterator.map(({ scripts }, packageJsonPath) => {
+      if (!scripts) {
+        return { continue: true }
+      }
+
+      for (const script of Object.values(scripts)) {
+        const rollupConfigRelativePath = extractRollupConfigPathFromScript(
+          script,
+        )
+
+        if (rollupConfigRelativePath) {
+          const directoryRoot = path.resolve(packageJsonPath, '..')
+          const rollupConfigPath = path.resolve(
+            directoryRoot,
+            rollupConfigRelativePath,
+          )
+
+          return {
+            continue: false,
+            payload: { rollupConfigPath },
+          }
+        }
+      }
+
+      return { continue: true }
+    })
+  },
+}