mirror/cypress
1
0
Fork 0
mirror of https://github.com/cypress-io/cypress.git synced 2026-02-22 06:59:30 -06:00
Code Issues Packages Projects Releases Wiki Activity

breaking: remove support for create react app for component testing as it is no longer maintained [run ci] (#30558)

Browse Source
This commit is contained in:
Bill Glesias
2024-11-07 18:02:04 -05:00
committed by GitHub
parent c0acbe9a87
commit 37b944f9b4
138 changed files with 217 additions and 71707 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.circleci/cache-version.txt
View File

@@ -1,3 +1,3 @@
# Bump this version to force CI to re-create the cache from scratch.
11-06-24-angular-signals-removal
11-07-24-cra-removal

1
.gitignore vendored
View File

@@ -298,7 +298,6 @@ dist/
# Uncomment the public line if your project uses Gatsby
# https://nextjs.org/blog/next-9-1#public-directory-support
# https://create-react-app.dev/docs/using-the-public-folder/#docsNav
# public
# Storybook build outputs

1
cli/CHANGELOG.md
View File

@@ -22,6 +22,7 @@ _Released 12/3/2024 (PENDING)_
- Cypress Component Testing no longer supports `Next.js` versions 10, 11, 12, and 13. Addresses [#29583](https://github.com/cypress-io/cypress/issues/29583).
- Cypress Component Testing no longer supports `Angular` versions 13, 14, 15, and 16. The minimum supported version is now `17.2.0` in order to fully support Angular [signals](https://angular.dev/guide/signals). Addresses [#29582](https://github.com/cypress-io/cypress/issues/29582). Addressed in [#30539](https://github.com/cypress-io/cypress/pull/30539).
- The `cypress/angular-signals` test harness is no longer included in the Cypress binary. Instead, signals support is now shipped with `cypress/angular`! This requires `rxjs` to be installed as a `peerDependency`. Addresses [#29606](https://github.com/cypress-io/cypress/issues/29606).
- Cypress Component Testing no longer supports `create-react-app`. Addresses [#30028](https://github.com/cypress-io/cypress/issues/30028).
**Deprecations:**

21
cli/types/cypress.d.ts vendored
View File

@@ -3340,19 +3340,19 @@ declare namespace Cypress {
interface CypressComponentDependency {
/**
* Unique identifier.
* @example 'reactscripts'
* @example 'react'
*/
type: string
/**
* Name to display in the user interface.
* @example "React Scripts"
* @example "React.js"
*/
name: string
/**
* Package name on npm.
* @example react-scripts
* @example react
*/
package: string
@@ -3363,21 +3363,20 @@ declare namespace Cypress {
*
* @example `react`
* @example `react@18`
* @example `react-scripts`
*/
installer: string
/**
* Description shown in UI. It is recommended to use the same one the package uses on npm.
* @example 'Create React apps with no build configuration'
* @example 'A JavaScript library for building user interfaces'
*/
description: string
/**
* Minimum version supported. Should conform to Semantic Versioning as used in `package.json`.
* @see https://docs.npmjs.com/cli/v9/configuring-npm/package-json#dependencies
* @example '^=4.0.0 || ^=5.0.0'
* @example '^2.0.0'
* @example '^=17.0.0 || ^=8.0.0'
* @example '^4.0.0'
*/
minVersion: string
}
@@ -3386,7 +3385,7 @@ declare namespace Cypress {
/**
* A semantic, unique identifier.
* Must begin with `cypress-ct-` or `@org/cypress-ct-` for third party implementations.
* @example 'reactscripts'
* @example 'react'
* @example 'nextjs'
* @example 'cypress-ct-solid-js'
*/
@@ -3400,7 +3399,7 @@ declare namespace Cypress {
* export default {
* component: {
* devServer: {
* framework: 'create-react-app' // can be 'next', 'create-react-app', etc etc.
* framework: 'react' // can be 'next', 'vue', etc etc.
* }
* }
* }
@@ -3415,7 +3414,7 @@ declare namespace Cypress {
/**
* Name displayed in Launchpad when doing initial setup.
* @example 'Solid.js'
* @example 'Create React App'
* @example 'React.js'
*/
name: string
@@ -3516,7 +3515,7 @@ declare namespace Cypress {
type DevServerConfigOptions = {
bundler: 'webpack'
framework: 'react' | 'vue' | 'vue-cli' | 'create-react-app' | 'next' | 'svelte'
framework: 'react' | 'vue' | 'vue-cli' | 'next' | 'svelte'
webpackConfig?: ConfigHandler<PickConfigOpt<'webpackConfig'>>
} | {
bundler: 'vite'

9
cli/types/tests/cypress-npm-api-test.ts
View File

@@ -114,15 +114,6 @@ const componentConfigVueCliWebpack: Cypress.ConfigOptions = {
}
}
const componentConfigCRAWebpack: Cypress.ConfigOptions = {
component: {
devServer: {
bundler: 'webpack',
framework: 'create-react-app',
}
}
}
const componentConfigViteReact: Cypress.ConfigOptions = {
component: {
devServer: {

3
npm/react/examples.env
View File

@@ -1,11 +1,8 @@
/examples/nextjs
# /examples/nextjs-webpack-5
/examples/react-scripts
/examples/react-scripts-typescript
/examples/find-webpack
/examples/webpack-file
/examples/react-scripts-folder
/examples/using-babel-typescript
/examples/webpack-options
/examples/sass-and-ts

2
npm/vite-dev-server/README.md
View File

@@ -12,7 +12,7 @@ import { defineConfig } from 'cypress'
export default defineConfig({
component: {
devServer: {
framework: 'create-react-app',
framework: 'react',
bundler: 'vite',
// viteConfig?: Will try to infer, if passed it will be used as is
}

5
npm/webpack-dev-server/README.md
View File

@@ -12,7 +12,7 @@ import { defineConfig } from 'cypress'
export default defineConfig({
component: {
devServer: {
framework: 'create-react-app',
framework: 'react',
bundler: 'webpack',
// webpackConfig?: Will try to infer, if passed it will be used as is
}
@@ -31,7 +31,7 @@ export default defineConfig({
devServer(devServerConfig) {
return devServer({
...devServerConfig,
framework: 'create-react-app',
framework: 'react',
webpackConfig: require('./webpack.config.js')
})
}
@@ -50,7 +50,6 @@ This module should be primarily covered by system-tests / open-mode tests. All s
- webpack4_wds4-react
- webpack5_wds5-react
- webpack4_wds4-next-11
- webpack4_wds4-create-react-app
## Architecture

89
npm/webpack-dev-server/cypress/e2e/create-react-app.cy.ts
View File

@@ -1,89 +0,0 @@
/// <reference path="../support/e2e.ts" />
import type { ProjectFixtureDir } from '@tooling/system-tests/lib/fixtureDirs'
const WEBPACK_REACT: ProjectFixtureDir[] = ['cra-5', 'cra-ejected']
// Add to this list to focus on a particular permutation
const ONLY_PROJECTS: ProjectFixtureDir[] = []
for (const project of WEBPACK_REACT) {
if (ONLY_PROJECTS.length && !ONLY_PROJECTS.includes(project)) {
continue
}
describe(`Working with ${project}`, () => {
beforeEach(() => {
cy.scaffoldProject(project)
cy.openProject(project, ['--component'])
cy.startAppServer('component')
})
it('should mount a passing test', () => {
cy.visitApp()
cy.specsPageIsVisible()
cy.contains('App.cy.js').click()
cy.waitForSpecToFinish({ passCount: 1 })
})
it('should live-reload on src changes', () => {
cy.visitApp()
cy.specsPageIsVisible()
cy.contains('App.cy.js').click()
cy.waitForSpecToFinish({ passCount: 1 })
cy.withCtx(async (ctx) => {
await ctx.actions.file.writeFileInProject(
ctx.path.join('src', 'App.js'),
(await ctx.file.readFileInProject(ctx.path.join('src', 'App.js'))).replace('Learn React', 'Want to learn React?'),
)
})
cy.waitForSpecToFinish({ failCount: 1 })
cy.get('.test-err-code-frame').should('be.visible')
cy.withCtx(async (ctx) => {
await ctx.actions.file.writeFileInProject(
ctx.path.join('src', 'App.cy.js'),
(await ctx.file.readFileInProject(ctx.path.join('src', 'App.cy.js'))).replace('Learn React', 'Want to learn React?'),
)
})
cy.waitForSpecToFinish({ passCount: 1 })
})
it('should show compilation errors on src changes', () => {
cy.visitApp()
cy.specsPageIsVisible()
cy.contains('App.cy.js').click()
cy.waitForSpecToFinish({ passCount: 1 })
cy.withCtx(async (ctx) => {
await ctx.actions.file.writeFileInProject(
ctx.path.join('src', 'App.js'),
(await ctx.file.readFileInProject(ctx.path.join('src', 'App.js'))).replace('export', 'expart'),
)
})
// The test should fail and the stack trace should appear in the command log
cy.waitForSpecToFinish({ failCount: 1 })
cy.contains('The following error originated from your test code, not from Cypress.').should('exist')
})
it('should detect new spec', () => {
cy.visitApp()
cy.specsPageIsVisible()
cy.withCtx(async (ctx) => {
await ctx.actions.file.writeFileInProject(
ctx.path.join('src', 'New.cy.js'),
await ctx.file.readFileInProject(ctx.path.join('src', 'App.cy.js')),
)
})
cy.contains('New.cy.js').click()
cy.waitForSpecToFinish({ passCount: 1 })
})
})
}

4
npm/webpack-dev-server/src/devServer.ts
View File

@@ -8,7 +8,6 @@ import type { Compiler, Configuration } from 'webpack'
import { createWebpackDevServer } from './createWebpackDevServer'
import debugLib from 'debug'
import { vueCliHandler } from './helpers/vueCliHandler'
import { createReactAppHandler } from './helpers/createReactAppHandler'
import { nextHandler } from './helpers/nextHandler'
import { sourceDefaultWebpackDependencies, SourceRelativeWebpackResult } from './helpers/sourceRelativeWebpackModules'
import { angularHandler } from './helpers/angularHandler'
@@ -108,9 +107,6 @@ async function getPreset (devServerConfig: WebpackDevServerConfig): Promise<Opti
}
switch (devServerConfig.framework) {
case 'create-react-app':
return createReactAppHandler(devServerConfig)
case 'vue-cli':
return await vueCliHandler(devServerConfig)

415
npm/webpack-dev-server/src/helpers/createReactAppHandler.ts
View File

@@ -1,415 +0,0 @@
import debugLib from 'debug'
import type { Configuration, ResolvePluginInstance, RuleSetRule } from 'webpack'
import path from 'path'
import type { PresetHandlerResult, WebpackDevServerConfig } from '../devServer'
import { sourceDefaultWebpackDependencies } from './sourceRelativeWebpackModules'
const debug = debugLib('cypress:webpack-dev-server:create-react-app')
/**
* Sourcing the config for create-react-app
*/
export function createReactAppHandler (devServerConfig: WebpackDevServerConfig): PresetHandlerResult {
const sourceWebpackModulesResult = sourceDefaultWebpackDependencies(devServerConfig)
// this is required because
// 1) we use our own HMR and we don't need react-refresh transpiling overhead
// 2) it doesn't work with process.env=test @see https://github.com/cypress-io/cypress-realworld-app/pull/832
process.env.FAST_REFRESH = 'false'
const webpackConfig = loadWebpackConfig(devServerConfig)
addCypressToWebpackEslintRulesInPlace(webpackConfig)
getTranspileFolders(devServerConfig.cypressConfig).forEach((folder) => {
allowModuleSourceInPlace(folder, webpackConfig)
addFolderToBabelLoaderTranspileInPlace(folder, webpackConfig)
})
if (sourceWebpackModulesResult.webpack.majorVersion === 5) {
debug('Modifying configuration for react-scripts@5')
reactScriptsFiveModifications(webpackConfig)
}
return {
frameworkConfig: webpackConfig,
sourceWebpackModulesResult,
}
}
function loadWebpackConfig (devServerConfig: WebpackDevServerConfig): Configuration {
let webpackConfigPath: string
const envName = 'test'
process.env.NODE_ENV = envName
process.env.BABEL_ENV = envName
try {
// Search for react-scripts webpack config
webpackConfigPath = require.resolve('react-scripts/config/webpack.config.js', {
paths: [devServerConfig.cypressConfig.projectRoot],
})
debug('Found react-scripts webpack config at %s', webpackConfigPath)
} catch (err) {
// Might be an ejected cra app, search for common webpack configs
const ejectedWebpackConfigPath = path.join(devServerConfig.cypressConfig.projectRoot, 'config', 'webpack.config.js')
try {
webpackConfigPath = require.resolve(ejectedWebpackConfigPath)
} catch (err) {
throw new Error(`Failed to find webpack at ${ejectedWebpackConfigPath}. We looked in this location as we could not find the "react-scripts" dependency and are assuming an ejected create-react-app.`)
}
}
try {
let webpackConfig = require(webpackConfigPath)
if (webpackConfig.default) {
// we probably loaded TS file
debug('loaded webpack options has .default - taking that as the config')
webpackConfig = webpackConfig.default
}
if (typeof webpackConfig === 'function') {
debug('calling webpack function with environment "%s"', envName)
webpackConfig = webpackConfig('development')
}
return webpackConfig
} catch (err) {
throw new Error(`Failed to require webpack config at ${webpackConfigPath} with error: ${err}`)
}
}
export const cypressGlobals = ['cy', 'Cypress', 'before', 'after', 'context']
function addCypressToWebpackEslintRulesInPlace (webpackConfig: Configuration) {
const eslintPlugin = webpackConfig.plugins?.find((plugin) => plugin.constructor.name === 'ESLintWebpackPlugin') as ESLintWebpackPlugin
if (eslintPlugin) {
const cypressGlobalsRules = cypressGlobals
.reduce<Record<string, string>>((acc, global) => {
acc[global] = 'writable'
return acc
}, {})
eslintPlugin.options.baseConfig = {
...eslintPlugin.options.baseConfig,
globals: {
...eslintPlugin.options.baseConfig?.globals,
...cypressGlobalsRules,
},
}
debug('Found ESLintWebpackPlugin, modified eslint config %o', eslintPlugin.options.baseConfig)
}
}
function getTranspileFolders (cypressConfig: Cypress.PluginConfigOptions) {
const rawFolders: string[] = (cypressConfig as any).addTranspiledFolders ?? []
const folders = rawFolders.map((folder) => path.resolve(cypressConfig.projectRoot, folder))
// ensure path is absolute
const ensureAbs = (folder: string) => {
if (!path.isAbsolute(folder)) {
return path.resolve(folder)
}
return folder
}
if (cypressConfig.fixturesFolder) {
folders.push(ensureAbs(cypressConfig.fixturesFolder))
}
if (cypressConfig.supportFolder) {
folders.push(ensureAbs(cypressConfig.supportFolder))
}
// attempt to add directories based on spec pattern
let componentDirs = cypressConfig.specPattern || ''
// can be string or array
if (typeof componentDirs === 'string') {
componentDirs = [componentDirs]
}
const dirsFromSpecPattern = componentDirs.reduce((acc, curr) => {
// glob
if (curr.includes('*')) {
const parts = curr.slice(0, curr.indexOf('*') - 1)
const joined = parts.split(path.sep)
const dir = path.join(...joined)
return acc.concat(path.resolve(cypressConfig.projectRoot, dir))
}
return acc
}, [] as string[])
return folders.concat(...dirsFromSpecPattern, path.resolve('cypress'))
}
/**
* Finds the ModuleScopePlugin plugin and adds given folder
* to that list. This allows react-scripts to import folders
* outside of the default "/src" folder.
* WARNING modifies the input webpack options argument.
* @see https://github.com/bahmutov/cypress-react-unit-test/issues/289
* @param {string} folderName Folder to add, should be absolute
*/
function allowModuleSourceInPlace (folderName: string, webpackConfig: Configuration) {
if (!folderName) {
return
}
if (!webpackConfig.resolve) {
return
}
if (!Array.isArray(webpackConfig.resolve.plugins)) {
return
}
const moduleSourcePlugin = webpackConfig.resolve.plugins.find((plugin) => {
return typeof plugin !== 'string' && Array.isArray(plugin.appSrcs)
}) as ResolvePluginInstance | undefined
if (!moduleSourcePlugin) {
debug('cannot find module source plugin')
return
}
debug('found module source plugin %o', moduleSourcePlugin)
if (!moduleSourcePlugin.appSrcs.includes(folderName)) {
moduleSourcePlugin.appSrcs.push(folderName)
debug('added folder %s to allowed sources', folderName)
}
}
/**
* Returns true if the provided loader path includes "babel-loader".
* Uses current OS path separator to split the loader path correctly.
*/
const isBabelLoader = (loaderPath: string) => {
if (!loaderPath) {
return false
}
const loaderPathParts = loaderPath.split(path.sep)
return loaderPathParts.some((pathPart) => pathPart === 'babel-loader')
}
type BabelRule = { options?: { plugins?: [] }, include?: string | string[] }
const findBabelRule = (webpackConfig: Configuration) => {
if (!webpackConfig) {
return
}
if (!webpackConfig.module) {
return
}
debug('webpackConfig.module %o', webpackConfig.module)
if (!Array.isArray(webpackConfig.module.rules)) {
return
}
const oneOfRule = webpackConfig.module.rules.find((rule) => {
return typeof rule !== 'string' && Array.isArray(rule.oneOf)
}) as RuleSetRule | undefined
if (!oneOfRule || !oneOfRule.oneOf) {
debug('could not find oneOfRule')
return
}
debug('looking through oneOf rules')
debug('oneOfRule.oneOf %o', oneOfRule.oneOf)
oneOfRule.oneOf.forEach((rule) => debug('rule %o', rule))
const babelRule = oneOfRule.oneOf.find(
(rule) => rule.loader && isBabelLoader(rule.loader),
)
return babelRule as BabelRule
}
// see https://github.com/bahmutov/find-webpack/issues/7
const findBabelLoaderRule = (webpackConfig: Configuration) => {
debug('looking for babel-loader rule')
if (!webpackConfig) {
return
}
if (!webpackConfig.module) {
return
}
debug('webpackConfig.module %o', webpackConfig.module)
if (!Array.isArray(webpackConfig.module.rules)) {
return
}
debug('webpack module rules')
webpackConfig.module.rules.forEach((rule) => {
debug('rule %o', rule)
})
const babelRule = webpackConfig.module.rules.find(
(rule) => typeof rule !== 'string' && rule.loader === 'babel-loader',
) as RuleSetRule | undefined
if (!babelRule || !babelRule.test) {
debug('could not find babel rule')
return
}
debug('found Babel rule that applies to %s', babelRule.test.toString())
return babelRule as BabelRule
}
const findBabelLoaderUseRule = (webpackConfig: Configuration) => {
debug('looking for babel-loader rule with use property')
if (!webpackConfig) {
return
}
if (!webpackConfig.module) {
return
}
debug('webpackConfig.module %o', webpackConfig.module)
if (!Array.isArray(webpackConfig.module.rules)) {
return
}
debug('webpack module rules')
webpackConfig.module.rules.forEach((rule) => {
debug('rule %o', rule)
})
const isBabelLoader = (rule: any) => rule?.use?.loader === 'babel-loader'
const isNextBabelLoader = (rule: any) => rule?.use?.loader === 'next-babel-loader'
const babelRule = webpackConfig.module.rules.find(
(rule) => isBabelLoader(rule) || isNextBabelLoader(rule),
) as RuleSetRule | undefined
if (!babelRule) {
debug('could not find babel rule')
return
}
debug('found Babel use rule that applies to %s', babelRule.test?.toString())
return babelRule.use as BabelRule
}
const findBabelRuleWrap = (webpackConfig: Configuration) => {
let babelRule = findBabelRule(webpackConfig)
if (!babelRule) {
debug('could not find Babel rule using oneOf')
babelRule = findBabelLoaderRule(webpackConfig)
}
if (!babelRule) {
debug('could not find Babel rule directly')
babelRule = findBabelLoaderUseRule(webpackConfig)
}
if (!babelRule) {
debug('could not find Babel rule')
return
}
return babelRule
}
function addFolderToBabelLoaderTranspileInPlace (folder: string, webpackConfig: Configuration) {
if (!folder) {
debug('no extra folder to transpile using Babel')
return
}
debug(
'trying to transpile additional folder %s using Babel',
folder,
)
const babelRule = findBabelRuleWrap(webpackConfig)
if (!babelRule) {
debug('could not find Babel rule')
return
}
debug('babel rule %o', babelRule)
if (!babelRule.include) {
debug('could not find Babel include condition')
return
}
if (typeof babelRule.include === 'string') {
babelRule.include = [babelRule.include]
}
if (babelRule.include.includes(folder)) {
// do not double include the same folder
debug('babel includes rule for folder %s', folder)
return
}
babelRule.include.push(folder)
debug('added folder %s to babel rules', folder)
}
type DefinePlugin =
| { definitions: Record<string, Record<string, any>> }
| undefined;
type ESLintWebpackPlugin =
| { options: { baseConfig?: { globals?: Record<string, any> } } }
| undefined;
export function reactScriptsFiveModifications (webpackConfig: Configuration) {
// React-Scripts sets the webpack target to ["browserslist"] which tells
// webpack to target the browsers found within the browserslist config
// depending on the environment (process.env.NODE_ENV). Since we set
// process.env.NODE_ENV = "test", webpack is unable to find any browsers and errors.
// We set BROWSERSLIST_ENV = "development" to override the default NODE_ENV search of browsers.
if (!process.env.BROWSERSLIST_ENV) {
process.env.BROWSERSLIST_ENV = 'development'
}
// We use the "development" configuration of the react-scripts webpack config.
// There is a conflict when settings process.env.NODE_ENV = "test" since DefinePlugin
// uses the "development" configuration and expects process.env.NODE_ENV = "development".
const definePlugin: DefinePlugin = webpackConfig.plugins?.find(
(plugin) => plugin.constructor.name === 'DefinePlugin',
) as unknown as DefinePlugin
if (definePlugin) {
const processEnv = definePlugin.definitions['process.env']
processEnv.NODE_ENV = JSON.stringify('development')
debug('Found "DefinePlugin", modified "process.env" definition %o', processEnv)
}
}

1
npm/webpack-dev-server/src/helpers/sourceRelativeWebpackModules.ts
View File

@@ -66,7 +66,6 @@ export const cypressWebpackPath = (config: WebpackDevServerConfig) => {
type FrameworkWebpackMapper = { [Property in Frameworks]: string | undefined }
const frameworkWebpackMapper: FrameworkWebpackMapper = {
'create-react-app': 'react-scripts',
'vue-cli': '@vue/cli-service',
react: undefined,
vue: undefined,

92
npm/webpack-dev-server/test/handlers/createReactAppHandler.spec.ts
View File

@@ -1,92 +0,0 @@
import { scaffoldMigrationProject } from '../test-helpers/scaffoldProject'
import { expect } from 'chai'
import { createReactAppHandler, cypressGlobals } from '../../src/helpers/createReactAppHandler'
import { WebpackDevServerConfig } from '../../src/devServer'
import { Configuration } from 'webpack'
import * as path from 'path'
import '../support'
const expectEslintModifications = (webpackConfig: Configuration) => {
const eslintPlugin: any = webpackConfig.plugins?.find((plugin) => plugin.constructor.name === 'ESLintWebpackPlugin')
if (!eslintPlugin) {
throw new Error('Expected to find ESLintWebpackPlugin in webpack config')
}
cypressGlobals.forEach((global) => expect(global in eslintPlugin.options.baseConfig.globals).to.be.true)
}
const expectModuleSourceInPlaceModifications = (webpackConfig: Configuration, projectRoot: string) => {
const moduleSourcePlugin: any = webpackConfig.resolve?.plugins?.find((plugin) => plugin.constructor.name === 'ModuleScopePlugin')
if (!moduleSourcePlugin) {
throw new Error('Expected to find ModuleScopePlugin in webpack config')
}
expect(moduleSourcePlugin.appSrcs).to.contain(path.join(projectRoot, 'cypress'))
}
const expectBabelRuleModifications = (webpackConfig: Configuration, projectRoot: string) => {
const babelRule: any = (webpackConfig.module?.rules as any)?.find((rule) => rule.oneOf)?.oneOf.find((oneOf) => oneOf.loader?.includes('babel-loader'))
if (!babelRule) {
throw new Error('Expected to find BabelRule in webpack config')
}
expect(babelRule.include).to.contain(path.join(projectRoot, 'cypress'))
}
const expectReactScriptsFiveModifications = (webpackConfig: Configuration) => {
const definePlugin: any = webpackConfig.plugins?.find((plugin) => plugin.constructor.name === 'DefinePlugin')
if (!definePlugin) {
throw new Error('Expected to find DefinePlugin in webpack config')
}
expect(process.env.BROWSERSLIST_ENV).eq('development')
expect(definePlugin.definitions['process.env']).to.have.property('NODE_ENV', JSON.stringify('development'))
}
describe('createReactAppHandler', function () {
this.timeout(1000 * 60)
it('sources the config from react-scripts v5', async () => {
const projectRoot = await scaffoldMigrationProject('cra-5')
process.chdir(projectRoot)
const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = createReactAppHandler({
cypressConfig: { projectRoot } as Cypress.PluginConfigOptions,
framework: 'create-react-app',
} as WebpackDevServerConfig)
expect(webpackConfig.mode).eq('development')
expectEslintModifications(webpackConfig)
expectModuleSourceInPlaceModifications(webpackConfig, projectRoot)
expectBabelRuleModifications(webpackConfig, projectRoot)
expectReactScriptsFiveModifications(webpackConfig)
expect(sourceWebpackModulesResult.framework?.importPath).to.include('react-scripts')
expect(sourceWebpackModulesResult.webpack.majorVersion).eq(5)
})
it('sources the config from ejected cra', async () => {
const projectRoot = await scaffoldMigrationProject('cra-ejected')
process.chdir(projectRoot)
const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = createReactAppHandler({
cypressConfig: { projectRoot } as Cypress.PluginConfigOptions,
framework: 'create-react-app',
} as WebpackDevServerConfig)
expect(webpackConfig.mode).eq('development')
expectEslintModifications(webpackConfig)
expectModuleSourceInPlaceModifications(webpackConfig, projectRoot)
expectBabelRuleModifications(webpackConfig, projectRoot)
expectReactScriptsFiveModifications(webpackConfig)
expect(sourceWebpackModulesResult.framework).to.be.null
expect(sourceWebpackModulesResult.webpack.majorVersion).eq(5)
})
})

1
packages/app/cypress/e2e/runner/reporter-ct-mount-hover.cy.ts
View File

@@ -6,7 +6,6 @@ const PROJECTS: {projectName: ProjectDirs[number], test: string}[] = [
{ projectName: 'angular-18', test: 'app.component' },
{ projectName: 'react-vite-ts-configured', test: 'App.cy' },
{ projectName: 'react18', test: 'App.cy' },
{ projectName: 'create-react-app-configured', test: 'App.cy' },
{ projectName: 'vueclivue3-configured', test: 'HelloWorld.cy' },
]

1
packages/app/src/specs/banners/ComponentTestingAvailableBanner.cy.tsx
View File

@@ -5,7 +5,6 @@ import type Sinon from 'sinon'
const frameworks = [
{ name: 'React', type: 'react' },
{ name: 'Create React App', type: 'reactscripts' },
{ name: 'Vue', type: 'vue3' },
{ name: 'Angular', type: 'angular' },
{ name: 'Next.js', type: 'nextjs' },

2
packages/data-context/src/data/ProjectConfigManager.ts
View File

@@ -192,7 +192,7 @@ export class ProjectConfigManager {
const bundler = WIZARD_BUNDLERS.find((x) => x.type === devServerOptions.bundler)
// Use a map since sometimes the same dependency can appear in `bundler` and `framework`,
// for example webpack appears in both `bundler: 'webpack', framework: 'react-scripts'`
// for example webpack appears in both `bundler: 'webpack', framework: 'next.js'`
const unsupportedDeps = new Map<Cypress.DependencyToInstall['dependency']['type'], Cypress.DependencyToInstall>()
if (!bundler) {

14
packages/data-context/test/unit/codegen/spec-options.spec.ts
View File

@@ -89,7 +89,7 @@ describe('spec-options', () => {
codeGenPath: `${tmpPath}/MyComponent.vue`,
codeGenType: 'component',
isDefaultSpecPattern: true,
framework: CT_FRAMEWORKS[1],
framework: CT_FRAMEWORKS[0],
specPattern: [defaultSpecPattern.component],
})
@@ -108,7 +108,7 @@ describe('spec-options', () => {
codeGenPath: `${tmpPath}/MyComponent.vue`,
codeGenType: 'component',
isDefaultSpecPattern: true,
framework: CT_FRAMEWORKS[1],
framework: CT_FRAMEWORKS[0],
specPattern: [defaultSpecPattern.component],
})
@@ -127,7 +127,7 @@ describe('spec-options', () => {
codeGenPath: `${tmpPath}/Counter.tsx`,
codeGenType: 'component',
isDefaultSpecPattern: true,
framework: CT_FRAMEWORKS[0],
framework: CT_FRAMEWORKS[3],
specPattern: [defaultSpecPattern.component],
componentName: 'Counter',
isDefault: true,
@@ -146,7 +146,7 @@ describe('spec-options', () => {
codeGenPath: `${tmpPath}/Counter.tsx`,
codeGenType: 'component',
isDefaultSpecPattern: true,
framework: CT_FRAMEWORKS[0],
framework: CT_FRAMEWORKS[3],
specPattern: [defaultSpecPattern.component],
componentName: 'View',
})
@@ -166,7 +166,7 @@ describe('spec-options', () => {
codeGenPath: `${tmpPath}/Counter.tsx`,
codeGenType: 'component',
isDefaultSpecPattern: true,
framework: CT_FRAMEWORKS[0],
framework: CT_FRAMEWORKS[3],
specPattern: [defaultSpecPattern.component],
componentName: 'View',
})
@@ -212,7 +212,7 @@ describe('spec-options', () => {
codeGenPath: `${tmpPath}/${componentPath}`,
codeGenType: 'component',
isDefaultSpecPattern: false,
framework: CT_FRAMEWORKS[1],
framework: CT_FRAMEWORKS[0],
specPattern,
specs,
})
@@ -322,7 +322,7 @@ describe('spec-options', () => {
codeGenType: 'component',
isDefaultSpecPattern: true,
specPattern: [defaultSpecPattern.component],
framework: CT_FRAMEWORKS[1],
framework: CT_FRAMEWORKS[0],
})
await fs.outputFile(`${tmpPath}/${fileName}`, '// foo')

15
packages/data-context/test/unit/sources/WizardDataSource.spec.ts
View File

@@ -15,21 +15,6 @@ describe('packagesToInstall', () => {
removeCommonNodeModules()
})
it('create-react-app-unconfigured', async () => {
const ctx = createTestDataContext()
const projectPath = await scaffoldMigrationProject('create-react-app-unconfigured')
ctx.update((coreData) => {
coreData.currentProject = projectPath
coreData.wizard.chosenFramework = findFramework('reactscripts')
coreData.wizard.chosenBundler = findBundler('webpack')
})
const actual = await ctx.wizard.installDependenciesCommand()
expect(actual).to.eq(`npm install -D react-scripts react-dom react`)
})
it('vueclivue3-unconfigured', async () => {
const ctx = createTestDataContext()

2
packages/errors/__snapshot-html__/CONFIG_FILE_DEV_SERVER_IS_NOT_VALID.html generated
View File

@@ -41,7 +41,7 @@
<span style="color:#e05561"><span style="color:#4ec4ff">{<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#4ec4ff"> component: {<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#4ec4ff"> devServer: {<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#4ec4ff"> framework: &#39;create-react-app&#39;, <span style="color:#4f5666">// Your framework<span style="color:#4ec4ff"><span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#4ec4ff"> framework: &#39;react&#39;, <span style="color:#4f5666">// Your framework<span style="color:#4ec4ff"><span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#4ec4ff"> bundler: &#39;webpack&#39; <span style="color:#4f5666">// Your dev server<span style="color:#4ec4ff"><span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#4ec4ff"> }<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#4ec4ff"> }<span style="color:#e05561"><span style="color:#e6e6e6">

2
packages/errors/src/errors.ts
View File

@@ -1621,7 +1621,7 @@ export const AllCypressErrors = {
{
component: {
devServer: {
framework: 'create-react-app', ${fmt.comment('// Your framework')}
framework: 'react', ${fmt.comment('// Your framework')}
bundler: 'webpack' ${fmt.comment('// Your dev server')}
}
}

18
packages/frontend-shared/cypress/support/mock-graphql/stubgql-Wizard.ts
View File

@@ -28,25 +28,33 @@ export const allBundlers = testBundlers.map((bundler, idx) => {
})
const testFrameworks = [
{ name: 'Create React App (v5)', type: 'reactscripts', supportedBundlers: [testBundlerWebpack], category: 'framework', supportStatus: 'alpha' },
{ name: 'React.js', type: 'react', supportedBundlers: [testBundlerWebpack], category: 'framework', supportStatus: 'full' },
{ name: 'Vue.js (v3)', type: 'vue3', supportedBundlers: [testBundlerVite, testBundlerWebpack], category: 'library', supportStatus: 'full' },
] as const
export const stubWizard: MaybeResolver<Wizard> = {
__typename: 'Wizard',
installDependenciesCommand: `npm install -D ${wizardDeps.WIZARD_DEPENDENCY_REACT_SCRIPTS.package} ${wizardDeps.WIZARD_DEPENDENCY_TYPESCRIPT.package}`,
installDependenciesCommand: `npm install -D ${wizardDeps.WIZARD_DEPENDENCY_REACT.package} ${wizardDeps.WIZARD_DEPENDENCY_REACT_DOM.package} ${wizardDeps.WIZARD_DEPENDENCY_TYPESCRIPT.package}`,
packagesToInstall: [
{
__typename: 'WizardNpmPackage',
id: 'cra',
id: 'react',
satisfied: true,
...wizardDeps.WIZARD_DEPENDENCY_REACT_SCRIPTS,
detectedVersion: '18.3.1',
...wizardDeps.WIZARD_DEPENDENCY_REACT,
},
{
__typename: 'WizardNpmPackage',
id: 'react-dom',
satisfied: true,
detectedVersion: '18.3.1',
...wizardDeps.WIZARD_DEPENDENCY_REACT_DOM,
},
{
__typename: 'WizardNpmPackage',
id: 'typescript',
satisfied: false,
detectedVersion: '2.0.1',
detectedVersion: '5.4.5',
...wizardDeps.WIZARD_DEPENDENCY_TYPESCRIPT,
},
],

1
packages/frontend-shared/src/utils/icons.ts
View File

@@ -13,7 +13,6 @@ export const FrameworkBundlerLogos = {
vueclivue3: LogoVue,
nextjs: LogoNext,
react: LogoReact,
reactscripts: LogoReact,
angular: LogoAngular,
svelte: LogoSvelte,
} as const

2
packages/graphql/schemas/schema.graphql
View File

@@ -2547,7 +2547,7 @@ type WizardErroredFramework implements Node {
"""A frontend framework that we can setup within the app"""
type WizardFrontendFramework implements Node {
"""The category (framework, like react-scripts, or library, like react"""
"""The category (framework, like next.js, or library, like react"""
category: String!
"""Raw SVG icon of framework"""

2
packages/graphql/src/schemaTypes/objectTypes/gql-WizardFrontendFramework.ts
View File

@@ -13,7 +13,7 @@ export const WizardFrontendFramework = objectType({
}),
t.nonNull.string('category', {
description: 'The category (framework, like react-scripts, or library, like react',
description: 'The category (framework, like next.js, or library, like react',
}),
t.nonNull.string('name', {

64
packages/launchpad/cypress/e2e/project-setup.cy.ts
View File

@@ -258,7 +258,7 @@ describe('Launchpad: Setup Project', () => {
verifyScaffoldedFiles('e2e')
cy.findByRole('button', { name: 'Continue' })
.should('not.have.disabled')
.should('not.be.disabled')
.click()
})
@@ -281,7 +281,7 @@ describe('Launchpad: Setup Project', () => {
verifyScaffoldedFiles('e2e')
cy.findByRole('button', { name: 'Continue' })
.should('not.have.disabled')
.should('not.be.disabled')
.click()
verifyChooseABrowserPage()
@@ -322,7 +322,7 @@ describe('Launchpad: Setup Project', () => {
verifyScaffoldedFiles('e2e')
cy.findByRole('button', { name: 'Continue' })
.should('not.have.disabled')
.should('not.be.disabled')
.click()
verifyChooseABrowserPage()
@@ -356,7 +356,7 @@ describe('Launchpad: Setup Project', () => {
verifyScaffoldedFiles('e2e')
cy.findByRole('button', { name: 'Continue' })
.should('not.have.disabled')
.should('not.be.disabled')
.click()
verifyChooseABrowserPage()
@@ -375,25 +375,31 @@ describe('Launchpad: Setup Project', () => {
cy.findByText('Confirm the front-end framework and bundler used in your project.')
cy.contains('Pick a framework').click()
cy.findByRole('option', { name: 'Create React App' }).click()
cy.findByRole('option', { name: 'React.js' }).click()
cy.get('[data-testid="select-bundler"').should('not.exist')
cy.findByRole('button', { name: 'Next step' }).should('not.have.disabled')
cy.contains('Pick a bundler').click()
cy.findByRole('option', { name: 'Vite' }).click()
cy.findByRole('button', { name: 'Next step' }).should('not.be.disabled')
cy.findByRole('button', { name: 'Back' }).click()
cy.get('[data-cy-testingtype="component"]').click()
cy.findByRole('button', { name: 'Next step' }).should('have.disabled')
cy.findByRole('button', { name: 'Next step' }).should('be.disabled')
cy.contains('Pick a framework').click()
cy.findByRole('option', { name: 'Create React App' }).click()
cy.findByRole('button', { name: 'Bundler(dev server) Webpack' }).should('not.exist')
cy.findByRole('button', { name: 'Next step' }).should('not.have.disabled')
cy.findByRole('option', { name: 'React.js' }).click()
cy.findByRole('button', { name: 'Next step' }).should('be.disabled')
// Create-React-Scaffolding was removed in Cypress 14. Users now MUST select a bundler.
cy.contains('Pick a bundler').click()
cy.findByRole('option', { name: 'Webpack' }).click()
cy.findByRole('button', { name: 'Next step' }).should('not.be.disabled')
cy.findByRole('button', { name: 'Next step' }).click()
cy.findByRole('button', { name: 'Waiting for you to install the dependencies...' })
cy.contains('li', 'react-scripts')
cy.contains('li', 'webpack')
cy.contains('li', 'react')
cy.contains('li', 'react-dom')
@@ -404,6 +410,7 @@ describe('Launchpad: Setup Project', () => {
cy.get('@valid').containsPath('cypress/support/component.js')
cy.get('@valid').containsPath('cypress/support/commands.js')
// the files will be scaffolded but an error will eventually throw since we scaffolded with webpack but do NOT have a webpack config present
verifyScaffoldedFiles('component')
})
@@ -496,10 +503,12 @@ describe('Launchpad: Setup Project', () => {
cy.findByText('Confirm the front-end framework and bundler used in your project.')
cy.contains('Pick a framework').click()
cy.findByRole('option', { name: 'Create React App' }).click()
cy.findByRole('option', { name: 'React.js' }).click()
cy.get('[data-testid="select-bundler"').should('not.exist')
cy.findByRole('button', { name: 'Next step' }).should('not.have.disabled')
cy.contains('Pick a bundler').click()
cy.findByRole('option', { name: 'Webpack' }).click()
cy.findByRole('button', { name: 'Next step' }).should('not.be.disabled')
cy.findByRole('button', { name: 'Back' }).click()
cy.get('[data-cy-testingtype="component"]').click()
@@ -510,7 +519,7 @@ describe('Launchpad: Setup Project', () => {
cy.findByRole('button', { name: 'Pick a bundler' }).click()
cy.findByRole('option', { name: 'Vite' }).click()
cy.findByRole('button', { name: 'Next step' }).should('not.have.disabled')
cy.findByRole('button', { name: 'Next step' }).should('not.be.disabled')
cy.findByRole('button', { name: 'Next step' }).click()
cy.findByRole('button', { name: 'Skip' }).click()
@@ -537,7 +546,10 @@ describe('Launchpad: Setup Project', () => {
cy.findByText('Confirm the front-end framework and bundler used in your project.')
cy.contains('Pick a framework').click()
cy.findByRole('option', { name: 'Create React App' }).click()
cy.findByRole('option', { name: 'React.js' }).click()
cy.contains('Pick a bundler').click()
cy.findByRole('option', { name: 'Webpack' }).click()
cy.findByRole('button', { name: 'Next step' }).click()
cy.findByRole('button', { name: 'Skip' }).click()
@@ -563,9 +575,11 @@ describe('Launchpad: Setup Project', () => {
cy.get('[data-cy-testingtype="component"]').click()
cy.get('[data-testid="select-framework"]').click()
cy.findByText('Create React App').click()
cy.findByText('React.js').click()
cy.contains('Pick a bundler').click()
cy.findByRole('option', { name: 'Webpack' }).click()
cy.contains('button', 'Next step').should('not.be.disabled').click()
cy.findByDisplayValue('yarn add -D react-scripts react-dom react').should('be.visible')
cy.findByDisplayValue('yarn add -D webpack react react-dom').should('be.visible')
})
it('makes the right command for pnpm', () => {
@@ -575,9 +589,11 @@ describe('Launchpad: Setup Project', () => {
cy.get('[data-cy-testingtype="component"]').click()
cy.get('[data-testid="select-framework"]').click()
cy.findByText('Create React App').click()
cy.findByText('React.js').click()
cy.contains('Pick a bundler').click()
cy.findByRole('option', { name: 'Vite' }).click()
cy.contains('button', 'Next step').should('not.be.disabled').click()
cy.findByDisplayValue('pnpm add -D react-scripts react-dom react')
cy.findByDisplayValue('pnpm add -D vite react react-dom')
})
// TODO: Had to revert due to regression: https://github.com/cypress-io/cypress/pull/26452
@@ -602,9 +618,11 @@ describe('Launchpad: Setup Project', () => {
cy.get('[data-cy-testingtype="component"]').click()
cy.get('[data-testid="select-framework"]').click()
cy.findByText('Create React App').click()
cy.findByText('React.js').click()
cy.contains('Pick a bundler').click()
cy.findByRole('option', { name: 'Webpack' }).click()
cy.contains('button', 'Next step').should('not.be.disabled').click()
cy.findByDisplayValue('npm install -D react-scripts react-dom react')
cy.findByDisplayValue('npm install -D webpack react react-dom')
})
})

13
packages/launchpad/cypress/e2e/scaffold-component-testing.cy.ts
View File

@@ -37,19 +37,6 @@ describe('scaffolding component testing', {
})
})
context('create-react-app', () => {
it('scaffolds component testing for Create React App v5 project', () => {
startSetupFor('create-react-app-unconfigured')
// should detect correctly
cy.get('button').should('be.visible').contains('Create React App(detected)')
cy.get('button').contains('Next step').click()
cy.findByRole('button', { name: 'Continue' }).click()
cy.get('[data-cy="launchpad-Configuration files"]').should('be.visible')
verifyConfigFile(`cypress.config.js`)
})
})
context('react-vite-ts-unconfigured', () => {
it('scaffolds component testing for React and Vite', () => {
startSetupFor('react-vite-ts-unconfigured')

16
packages/launchpad/cypress/e2e/scaffold-project.cy.ts
View File

@@ -79,8 +79,8 @@ function scaffoldAndOpenCTProject (opts: {
cy.contains('Pick a framework').click()
cy.contains(opts.framework).click()
if (opts.bundler) {
cy.contains('Webpack(detected)').click()
cy.contains(opts.bundler).click()
cy.contains('Pick a bundler').click()
cy.contains(Cypress._.startCase(opts.bundler)).click()
}
cy.contains('Next step').click()
@@ -147,22 +147,22 @@ describe('scaffolding new projects', { defaultCommandTimeout: 7000 }, () => {
it('scaffolds CT for a JS project', () => {
const language = 'js'
scaffoldAndOpenCTProject({ name: 'pristine', framework: 'Create React App', removeFixturesFolder: true })
assertScaffoldedFilesAreCorrect({ language, testingType: 'component', ctFramework: 'Create React App (v5)' })
scaffoldAndOpenCTProject({ name: 'pristine', framework: 'React.js', bundler: 'webpack', removeFixturesFolder: true })
assertScaffoldedFilesAreCorrect({ language, testingType: 'component', ctFramework: 'React.js' })
})
it('scaffolds CT for a TS project', () => {
const language = 'ts'
scaffoldAndOpenCTProject({ name: 'pristine-yarn', framework: 'Create React App', removeFixturesFolder: true })
assertScaffoldedFilesAreCorrect({ language, testingType: 'component', ctFramework: 'Create React App (v5)' })
scaffoldAndOpenCTProject({ name: 'pristine-yarn', framework: 'React.js', bundler: 'webpack', removeFixturesFolder: true })
assertScaffoldedFilesAreCorrect({ language, testingType: 'component', ctFramework: 'React.js' })
})
it('scaffolds CT and skip fixtures for a JS project', () => {
const language = 'js'
scaffoldAndOpenCTProject({ name: 'pristine', framework: 'Create React App', removeFixturesFolder: false })
assertScaffoldedFilesAreCorrect({ language, testingType: 'component', ctFramework: 'Create React App (v5)', customDirectory: 'without-fixtures' })
scaffoldAndOpenCTProject({ name: 'pristine', framework: 'React.js', bundler: 'webpack', removeFixturesFolder: false })
assertScaffoldedFilesAreCorrect({ language, testingType: 'component', ctFramework: 'React.js', customDirectory: 'without-fixtures' })
})
// TODO: Fix flaky test

4
packages/launchpad/src/setup/EnvironmentSetup.cy.tsx
View File

@@ -23,7 +23,7 @@ describe('<EnvironmentSetup />', { viewportWidth: 800 }, () => {
.should('have.attr', 'aria-expanded', 'true')
cy.get('li').spread(($firstLi, $secondLi) => {
cy.wrap($firstLi).should('contain', 'Create React App (v5) Support is in Alpha')
cy.wrap($firstLi).should('contain', 'React.js')
cy.wrap($firstLi).find('svg').should('have.attr', 'data-cy', 'react-logo')
cy.wrap($secondLi).should('contain', 'Vue.js (v3)')
@@ -59,7 +59,7 @@ describe('<EnvironmentSetup />', { viewportWidth: 800 }, () => {
expanded: false,
}).click()
cy.findByRole('option', { name: 'Create React App (v5) Support is in Alpha (detected)' }).should('be.visible').click()
cy.findByRole('option', { name: 'React.js (detected)' }).should('be.visible').click()
})
it('shows the description of bundler', () => {

21
packages/launchpad/src/setup/InstallDependencies.cy.tsx
View File

@@ -15,9 +15,13 @@ describe('<InstallDependencies />', () => {
},
})
cy.contains('a', 'react-scripts')
cy.contains('a', 'react')
.should('be.visible')
.and('have.attr', 'href', 'https://www.npmjs.com/package/react-scripts')
.and('have.attr', 'href', 'https://www.npmjs.com/package/react')
cy.contains('a', 'react-dom')
.should('be.visible')
.and('have.attr', 'href', 'https://www.npmjs.com/package/react-dom')
cy.contains('a', 'typescript')
.should('be.visible')
@@ -65,10 +69,17 @@ describe('<InstallDependencies />', () => {
gqlVal.wizard.packagesToInstall = [
{
__typename: 'WizardNpmPackage',
id: 'cra',
id: 'react',
satisfied: true,
detectedVersion: '1.0.1',
...wizardDeps.WIZARD_DEPENDENCY_REACT_SCRIPTS,
detectedVersion: '18.3.1',
...wizardDeps.WIZARD_DEPENDENCY_REACT,
},
{
__typename: 'WizardNpmPackage',
id: 'react-dom',
satisfied: true,
detectedVersion: '18.3.1',
...wizardDeps.WIZARD_DEPENDENCY_REACT_DOM,
},
{
__typename: 'WizardNpmPackage',

6
packages/launchpad/src/setup/ManualInstall.cy.tsx
View File

@@ -17,7 +17,7 @@ describe('<ManualInstall />', () => {
})
it('lists packages and can copy install command to clipboard', { viewportWidth: 800, viewportHeight: 600 }, () => {
const framework = deps.WIZARD_DEPENDENCY_REACT_SCRIPTS
const framework = deps.WIZARD_DEPENDENCY_REACT
const language = deps.WIZARD_DEPENDENCY_TYPESCRIPT
const stubCopy = sinon.stub()
@@ -38,7 +38,7 @@ describe('<ManualInstall />', () => {
})
})
const installCommand = `npm install -D react-scripts typescript`
const installCommand = `npm install -D react react-dom typescript`
cy.findByText(defaultMessages.setupWizard.installDependencies.pasteCommand).should('be.visible')
cy.findByDisplayValue(installCommand).should('be.visible')
@@ -67,6 +67,6 @@ describe('<ManualInstall />', () => {
),
})
cy.findByLabelText('installed').should('be.visible')
cy.get('[aria-label="installed"]').should('be.visible')
})
})

4
packages/scaffold-config/README.md
View File

@@ -2,7 +2,7 @@
Logic related to scaffolding new projects using launchpad, including detecting component frameworks and bundlers, installing dependencies and creating `cypress.config.js` files.
We have integrations for popular code generators like Create React App, Next.js and Vue CLI, and ship a `cypress.config.js` that will work out of the box for those templates.
We have integrations for popular code generators like Next.js and Vue CLI, and ship a `cypress.config.js` that will work out of the box for those templates.
We will also attempt to scaffold a configuration file for projects using React and Vue projects using Vite and Webpack that are not necessarily created using a code generator.
@@ -10,8 +10,6 @@ We will also attempt to scaffold a configuration file for projects using React a
| Name | Version | Dev Server | Version | Library | Component Adaptor | Example Project |
| ---------------- | ------- | ---------- | -------- | ------------ | ----------------------- | ------------------------------------------------------------------- |
| Create React App | 5.x | Webpack | 5.x | React 16, 17 | `@cypress/react@latest` | [TODO] |
| Create React App | 4.x | Webpack | 4.x | React 16, 17 | `@cypress/react@latest` | [Link](../../system-tests/projects/create-react-app-configured) |
| React | - | Vite | 2.x | React 16, 17 | `@cypress/react@latest` | [Link](../../system-tests/projects/react-vite-ts-configured) |
| Vue | - | Vite | 2.x | Vue 3 | `@cypress/vue@latest` | [Link](../../system-tests/projects/vue3-vite-ts-configured) |
| Vue CLI | 4.x | Webpack | 4.x | Vue 3 | `@cypress/vue@latest` | [Link](../../system-tests/projects/vueclivue3-configured) |

11
packages/scaffold-config/src/dependencies.ts
View File

@@ -43,15 +43,6 @@ export const WIZARD_DEPENDENCY_TYPESCRIPT = {
minVersion: '^3.4.0 || ^4.0.0 || ^5.0.0',
} as const
export const WIZARD_DEPENDENCY_REACT_SCRIPTS = {
type: 'reactscripts',
name: 'React Scripts',
package: 'react-scripts',
installer: 'react-scripts',
description: 'Create React apps with no build configuration',
minVersion: '^5.0.0',
} as const
export const WIZARD_DEPENDENCY_VUE_CLI_SERVICE = {
type: 'vuecliservice',
name: 'Vue CLI',
@@ -136,7 +127,6 @@ export const WIZARD_DEPENDENCY_SVELTE: Cypress.CypressComponentDependency = {
export const WIZARD_DEPENDENCIES = [
WIZARD_DEPENDENCY_WEBPACK,
WIZARD_DEPENDENCY_TYPESCRIPT,
WIZARD_DEPENDENCY_REACT_SCRIPTS,
WIZARD_DEPENDENCY_VUE_CLI_SERVICE,
WIZARD_DEPENDENCY_VITE,
WIZARD_DEPENDENCY_NEXT,
@@ -164,7 +154,6 @@ const componentDependenciesOfInterest = [
'@angular/platform-browser-dynamic',
'react',
'react-dom',
'react-scripts',
'vue',
'@vue/cli-service',
'svelte',

3
packages/scaffold-config/src/detect.ts
View File

@@ -25,7 +25,7 @@ export async function areAllDepsSatisfied (projectPath: string, framework: Cypre
return true
}
// Detect the framework, which can either be a tool like Create React App,
// Detect the framework, which can either be a tool like Next.js,
// in which case we just return the framework. The user cannot change the
// bundler.
@@ -38,7 +38,6 @@ export async function detectFramework (projectPath: string, frameworks: Cypress.
const hasAllDeps = await areAllDepsSatisfied(projectPath, framework)
// so far all the templates we support only have 1 bundler,
// for example CRA only works with webpack,
// but we want to consider in the future, tools like Nuxt ship
// both a webpack and vite dev-env.
// if we support this, we will also need to attempt to infer the dev server of choice.

20
packages/scaffold-config/src/frameworks.ts
View File

@@ -114,26 +114,6 @@ const reactMountModule = async (projectPath: string) => {
export const SUPPORT_STATUSES: Readonly<Cypress.ResolvedComponentFrameworkDefinition['supportStatus'][]> = ['alpha', 'beta', 'full', 'community'] as const
export const CT_FRAMEWORKS: Cypress.ComponentFrameworkDefinition[] = [
{
type: 'reactscripts',
configFramework: 'create-react-app',
category: 'template',
name: 'Create React App',
supportedBundlers: ['webpack'],
detectors: [dependencies.WIZARD_DEPENDENCY_REACT_SCRIPTS],
dependencies: (bundler: WizardBundler['type']): Cypress.CypressComponentDependency[] => {
return [
dependencies.WIZARD_DEPENDENCY_REACT_SCRIPTS,
dependencies.WIZARD_DEPENDENCY_REACT_DOM,
dependencies.WIZARD_DEPENDENCY_REACT,
]
},
codeGenFramework: 'react',
glob: '*.{js,jsx,tsx}',
mountModule: reactMountModule,
supportStatus: 'full',
componentIndexHtml: componentIndexHtmlGenerator(),
},
{
type: 'vueclivue3',
configFramework: 'vue-cli',

9
packages/scaffold-config/test/unit/detect.spec.ts
View File

@@ -75,15 +75,6 @@ export function fakeDepsInNodeModules (cwd: string, deps: Array<DepToFake | DevD
const resolvedCtFrameworks = CT_FRAMEWORKS.map((x) => resolveComponentFrameworkDefinition(x))
describe('detectFramework', () => {
it('Create React App v5', async () => {
const projectPath = await scaffoldMigrationProject('create-react-app-unconfigured')
fakeDepsInNodeModules(projectPath, [{ dependency: 'react-scripts', version: '5.0.0' }])
const actual = await detectFramework(projectPath, resolvedCtFrameworks)
expect(actual.framework?.type).to.eq('reactscripts')
})
it('React App with webpack 5', async () => {
const projectPath = await scaffoldMigrationProject('react-app-webpack-5-unconfigured')

1
system-tests/.eslintignore
View File

@@ -24,7 +24,6 @@ system-tests/projects/outdated-deps-vuecli3
system-tests/projects/e2e/static/jquery.js
# snapshots
system-tests/projects/pristine/expected-cypress-js-component-create-react-app-v5/cypress.config.js
system-tests/projects/pristine/expected-cypress-js-e2e/cypress.config.js
system-tests/projects/pristine/expected-cypress-js-e2e-without-fixtures/cypress.config.js
system-tests/projects/pristine-module/expected-cypress-js-e2e/cypress.config.js

14
system-tests/project-fixtures/cra/cypress.config.ts
View File

@@ -1,14 +0,0 @@
import { defineConfig } from 'cypress'
export default defineConfig({
component: {
experimentalSingleTabRunMode: true,
devServer: {
framework: 'create-react-app',
bundler: 'webpack',
},
},
// These tests should run quickly / fail quickly,
// since we intentionally causing error states for testing
defaultCommandTimeout: 1000,
})

12
system-tests/project-fixtures/cra/cypress/support/component-index.html
View File

@@ -1,12 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Components App</title>
</head>
<body>
<div data-cy-root></div>
</body>
</html>

1
system-tests/project-fixtures/cra/cypress/support/component.ts
View File

@@ -1 +0,0 @@
//

43
system-tests/project-fixtures/cra/public/index.html
View File

@@ -1,43 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

38
system-tests/project-fixtures/cra/src/App.css
View File

@@ -1,38 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

7
system-tests/project-fixtures/cra/src/App.cy.js
View File

@@ -1,7 +0,0 @@
import { mount } from 'cypress/react'
import App from './App'
it('renders App', () => {
mount(<App />)
cy.get('a').contains('Learn React')
})

25
system-tests/project-fixtures/cra/src/App.js
View File

@@ -1,25 +0,0 @@
import logo from './logo.svg'
import './App.css'
function App () {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
)
}
export default App

13
system-tests/project-fixtures/cra/src/index.css
View File

@@ -1,13 +0,0 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

11
system-tests/project-fixtures/cra/src/index.js
View File

@@ -1,11 +0,0 @@
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root'),
)

1
system-tests/project-fixtures/cra/src/logo.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

33
system-tests/projects/cra-5/package.json
View File

@@ -1,33 +0,0 @@
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^17.0.0",
"react-dom": "^17.0.0",
"react-scripts": "5.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"babel": {
"presets": [
"react-app"
]
},
"projectFixtureDirectory": "cra"
}

8460
system-tests/projects/cra-5/yarn.lock
View File

File diff suppressed because it is too large Load Diff

108
system-tests/projects/cra-ejected/config/env.js
View File

@@ -1,108 +0,0 @@
'use strict'
const fs = require('fs')
const path = require('path')
const paths = require('./paths')
// Make sure that including paths.js after env.js will read .env variables.
delete require.cache[require.resolve('./paths')]
const NODE_ENV = process.env.NODE_ENV
if (!NODE_ENV) {
throw new Error(
'The NODE_ENV environment variable is required but was not specified.',
)
}
// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
const dotenvFiles = [
`${paths.dotenv}.${NODE_ENV}.local`,
// Don't include `.env.local` for `test` environment
// since normally you expect tests to produce the same
// results for everyone
NODE_ENV !== 'test' && `${paths.dotenv}.local`,
`${paths.dotenv}.${NODE_ENV}`,
paths.dotenv,
].filter(Boolean)
// Load environment variables from .env* files. Suppress warnings using silent
// if this file is missing. dotenv will never modify any environment variables
// that have already been set. Variable expansion is supported in .env files.
// https://github.com/motdotla/dotenv
// https://github.com/motdotla/dotenv-expand
dotenvFiles.forEach((dotenvFile) => {
if (fs.existsSync(dotenvFile)) {
require('dotenv-expand')(
require('dotenv').config({
path: dotenvFile,
}),
)
}
})
// We support resolving modules according to `NODE_PATH`.
// This lets you use absolute paths in imports inside large monorepos:
// https://github.com/facebook/create-react-app/issues/253.
// It works similar to `NODE_PATH` in Node itself:
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
// Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
// We also resolve them to make sure all tools using them work consistently.
const appDirectory = fs.realpathSync(process.cwd())
process.env.NODE_PATH = (process.env.NODE_PATH || '')
.split(path.delimiter)
.filter((folder) => folder && !path.isAbsolute(folder))
.map((folder) => path.resolve(appDirectory, folder))
.join(path.delimiter)
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
// injected into the application via DefinePlugin in webpack configuration.
const REACT_APP = /^REACT_APP_/i
function getClientEnvironment (publicUrl) {
const raw = Object.keys(process.env)
.filter((key) => REACT_APP.test(key))
.reduce(
(env, key) => {
env[key] = process.env[key]
return env
},
{
// Useful for determining whether we’re running in production mode.
// Most importantly, it switches React into the correct mode.
NODE_ENV: process.env.NODE_ENV || 'development',
// Useful for resolving the correct path to static assets in `public`.
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// This should only be used as an escape hatch. Normally you would put
// images into the `src` and `import` them in code to get their paths.
PUBLIC_URL: publicUrl,
// We support configuring the sockjs pathname during development.
// These settings let a developer run multiple simultaneous projects.
// They are used as the connection `hostname`, `pathname` and `port`
// in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
// and `sockPort` options in webpack-dev-server.
WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
// Whether or not react-refresh is enabled.
// It is defined here so it is available in the webpackHotDevClient.
FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
},
)
// Stringify all values so we can feed into webpack DefinePlugin
const stringified = {
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key])
return env
}, {}),
}
return { raw, stringified }
}
module.exports = getClientEnvironment

70
system-tests/projects/cra-ejected/config/getHttpsConfig.js
View File

@@ -1,70 +0,0 @@
'use strict'
const fs = require('fs')
const path = require('path')
const crypto = require('crypto')
const chalk = require('react-dev-utils/chalk')
const paths = require('./paths')
// Ensure the certificate and key provided are valid and if not
// throw an easy to debug error
function validateKeyAndCerts ({ cert, key, keyFile, crtFile }) {
let encrypted
try {
// publicEncrypt will throw an error with an invalid cert
encrypted = crypto.publicEncrypt(cert, Buffer.from('test'))
} catch (err) {
throw new Error(
`The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`,
)
}
try {
// privateDecrypt will throw an error with an invalid key
crypto.privateDecrypt(key, encrypted)
} catch (err) {
throw new Error(
`The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
err.message
}`,
)
}
}
// Read file and throw an error if it doesn't exist
function readEnvFile (file, type) {
if (!fs.existsSync(file)) {
throw new Error(
`You specified ${chalk.cyan(
type,
)} in your env, but the file "${chalk.yellow(file)}" can't be found.`,
)
}
return fs.readFileSync(file)
}
// Get the https config
// Return cert files if provided in env, otherwise just true or false
function getHttpsConfig () {
const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env
const isHttps = HTTPS === 'true'
if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE)
const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE)
const config = {
cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
}
validateKeyAndCerts({ ...config, keyFile, crtFile })
return config
}
return isHttps
}
module.exports = getHttpsConfig

135
system-tests/projects/cra-ejected/config/modules.js
View File

@@ -1,135 +0,0 @@
'use strict'
const fs = require('fs')
const path = require('path')
const paths = require('./paths')
const chalk = require('react-dev-utils/chalk')
const resolve = require('resolve')
/**
* Get additional module paths based on the baseUrl of a compilerOptions object.
*
* @param {Object} options
*/
function getAdditionalModulePaths (options = {}) {
const baseUrl = options.baseUrl
if (!baseUrl) {
return ''
}
const baseUrlResolved = path.resolve(paths.appPath, baseUrl)
// We don't need to do anything if `baseUrl` is set to `node_modules`. This is
// the default behavior.
if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
return null
}
// Allow the user set the `baseUrl` to `appSrc`.
if (path.relative(paths.appSrc, baseUrlResolved) === '') {
return [paths.appSrc]
}
// If the path is equal to the root directory we ignore it here.
// We don't want to allow importing from the root directly as source files are
// not transpiled outside of `src`. We do allow importing them with the
// absolute path (e.g. `src/Components/Button.js`) but we set that up with
// an alias.
if (path.relative(paths.appPath, baseUrlResolved) === '') {
return null
}
// Otherwise, throw an error.
throw new Error(
chalk.red.bold(
'Your project\'s `baseUrl` can only be set to `src` or `node_modules`.' +
' Create React App does not support other values at this time.',
),
)
}
/**
* Get webpack aliases based on the baseUrl of a compilerOptions object.
*
* @param {*} options
*/
function getWebpackAliases (options = {}) {
const baseUrl = options.baseUrl
if (!baseUrl) {
return {}
}
const baseUrlResolved = path.resolve(paths.appPath, baseUrl)
if (path.relative(paths.appPath, baseUrlResolved) === '') {
return {
src: paths.appSrc,
}
}
}
/**
* Get jest aliases based on the baseUrl of a compilerOptions object.
*
* @param {*} options
*/
function getJestAliases (options = {}) {
const baseUrl = options.baseUrl
if (!baseUrl) {
return {}
}
const baseUrlResolved = path.resolve(paths.appPath, baseUrl)
if (path.relative(paths.appPath, baseUrlResolved) === '') {
return {
'^src/(.*)$': '<rootDir>/src/$1',
}
}
}
function getModules () {
// Check if TypeScript is setup
const hasTsConfig = fs.existsSync(paths.appTsConfig)
const hasJsConfig = fs.existsSync(paths.appJsConfig)
if (hasTsConfig && hasJsConfig) {
throw new Error(
'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.',
)
}
let config
// If there's a tsconfig.json we assume it's a
// TypeScript project and set up the config
// based on tsconfig.json
if (hasTsConfig) {
const ts = require(resolve.sync('typescript', {
basedir: paths.appNodeModules,
}))
config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config
// Otherwise we'll check if there is jsconfig.json
// for non TS projects.
} else if (hasJsConfig) {
config = require(paths.appJsConfig)
}
config = config || {}
const options = config.compilerOptions || {}
const additionalModulePaths = getAdditionalModulePaths(options)
return {
additionalModulePaths,
webpackAliases: getWebpackAliases(options),
jestAliases: getJestAliases(options),
hasTsConfig,
}
}
module.exports = getModules()

75
system-tests/projects/cra-ejected/config/paths.js
View File

@@ -1,75 +0,0 @@
'use strict'
const path = require('path')
const fs = require('fs')
const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath')
// Make sure any symlinks in the project folder are resolved:
// https://github.com/facebook/create-react-app/issues/637
const appDirectory = fs.realpathSync(process.cwd())
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath)
// We use `PUBLIC_URL` environment variable or "homepage" field to infer
// "public path" at which the app is served.
// webpack needs to know it to put the right <script> hrefs into HTML even in
// single-page apps that may serve index.html for nested URLs like /todos/42.
// We can't use a relative path in HTML because we don't want to load something
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
const publicUrlOrPath = getPublicUrlOrPath(
process.env.NODE_ENV === 'development',
require(resolveApp('package.json')).homepage,
process.env.PUBLIC_URL,
)
const buildPath = process.env.BUILD_PATH || 'build'
const moduleFileExtensions = [
'web.mjs',
'mjs',
'web.js',
'js',
'web.ts',
'ts',
'web.tsx',
'tsx',
'json',
'web.jsx',
'jsx',
]
// Resolve file paths in the same order as webpack
const resolveModule = (resolveFn, filePath) => {
const extension = moduleFileExtensions.find((extension) => {
return fs.existsSync(resolveFn(`${filePath}.${extension}`))
})
if (extension) {
return resolveFn(`${filePath}.${extension}`)
}
return resolveFn(`${filePath}.js`)
}
// config after eject: we're in ./config/
module.exports = {
dotenv: resolveApp('.env'),
appPath: resolveApp('.'),
appBuild: resolveApp(buildPath),
appPublic: resolveApp('public'),
appHtml: resolveApp('public/index.html'),
appIndexJs: resolveModule(resolveApp, 'src/index'),
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
appTsConfig: resolveApp('tsconfig.json'),
appJsConfig: resolveApp('jsconfig.json'),
yarnLockFile: resolveApp('yarn.lock'),
testsSetup: resolveModule(resolveApp, 'src/setupTests'),
proxySetup: resolveApp('src/setupProxy.js'),
appNodeModules: resolveApp('node_modules'),
appWebpackCache: resolveApp('node_modules/.cache'),
appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),
swSrc: resolveModule(resolveApp, 'src/service-worker'),
publicUrlOrPath,
}
module.exports.moduleFileExtensions = moduleFileExtensions

758
system-tests/projects/cra-ejected/config/webpack.config.js
View File

@@ -1,758 +0,0 @@
'use strict'
const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
const resolve = require('resolve')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin')
const TerserPlugin = require('terser-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const { WebpackManifestPlugin } = require('webpack-manifest-plugin')
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin')
const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent')
const ESLintPlugin = require('eslint-webpack-plugin')
const paths = require('./paths')
const modules = require('./modules')
const getClientEnvironment = require('./env')
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin')
const ForkTsCheckerWebpackPlugin =
process.env.TSC_COMPILE_ON_ERROR === 'true'
? require('react-dev-utils/ForkTsCheckerWarningWebpackPlugin')
: require('react-dev-utils/ForkTsCheckerWebpackPlugin')
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash')
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'
const reactRefreshRuntimeEntry = require.resolve('react-refresh/runtime')
const reactRefreshWebpackPluginRuntimeEntry = require.resolve(
'@pmmmwh/react-refresh-webpack-plugin',
)
const babelRuntimeEntry = require.resolve('babel-preset-react-app')
const babelRuntimeEntryHelpers = require.resolve(
'@babel/runtime/helpers/esm/assertThisInitialized',
{ paths: [babelRuntimeEntry] },
)
const babelRuntimeRegenerator = require.resolve('@babel/runtime/regenerator', {
paths: [babelRuntimeEntry],
})
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false'
const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true'
const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true'
const imageInlineSizeLimit = parseInt(
process.env.IMAGE_INLINE_SIZE_LIMIT || '10000',
)
// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig)
// Check if Tailwind config exists
const useTailwind = fs.existsSync(
path.join(paths.appPath, 'tailwind.config.js'),
)
// Get the path to the uncompiled service worker (if it exists).
const swSrc = paths.swSrc
// style files regexes
const cssRegex = /\.css$/
const cssModuleRegex = /\.module\.css$/
const sassRegex = /\.(scss|sass)$/
const sassModuleRegex = /\.module\.(scss|sass)$/
const hasJsxRuntime = (() => {
if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
return false
}
try {
require.resolve('react/jsx-runtime')
return true
} catch (e) {
return false
}
})()
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function (webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development'
const isEnvProduction = webpackEnv === 'production'
// Variable used for enabling profiling in Production
// passed into alias object. Uses a flag if passed into the build command
const isEnvProductionProfile =
isEnvProduction && process.argv.includes('--profile')
// We will provide `paths.publicUrlOrPath` to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
// Get environment variables to inject into our app.
const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1))
const shouldUseReactRefresh = env.raw.FAST_REFRESH
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
// css is located in `static/css`, use '../../' to locate index.html folder
// in production `paths.publicUrlOrPath` can be a relative path
options: paths.publicUrlOrPath.startsWith('.')
? { publicPath: '../../' }
: {},
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
postcssOptions: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
config: false,
plugins: !useTailwind
? [
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
},
],
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
'postcss-normalize',
]
: [
'tailwindcss',
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
},
],
],
},
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
},
},
].filter(Boolean)
if (preProcessor) {
loaders.push(
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
root: paths.appSrc,
},
},
{
loader: require.resolve(preProcessor),
options: {
sourceMap: true,
},
},
)
}
return loaders
}
return {
target: ['browserslist'],
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
// Stop compilation early in production
bail: isEnvProduction,
devtool: isEnvProduction
? shouldUseSourceMap
? 'source-map'
: false
: isEnvDevelopment && 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
entry: paths.appIndexJs,
output: {
// The build folder.
path: paths.appBuild,
// Add /* filename */ comments to generated require()s in the output.
pathinfo: isEnvDevelopment,
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/bundle.js',
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
? 'static/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
assetModuleFilename: 'static/media/[name].[hash][ext]',
// webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
// We inferred the "public path" (such as / or /my-project) from homepage.
publicPath: paths.publicUrlOrPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: isEnvProduction
? (info) => {
return path
.relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/')
}
: isEnvDevelopment &&
((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
},
cache: {
type: 'filesystem',
version: createEnvironmentHash(env.raw),
cacheDirectory: paths.appWebpackCache,
store: 'pack',
buildDependencies: {
defaultWebpack: ['webpack/lib/'],
config: [__filename],
tsconfig: [paths.appTsConfig, paths.appJsConfig].filter((f) => {
return fs.existsSync(f)
}),
},
},
infrastructureLogging: {
level: 'none',
},
optimization: {
minimize: isEnvProduction,
minimizer: [
// This is only used in production mode
new TerserPlugin({
terserOptions: {
parse: {
// We want terser to parse ecma 8 code. However, we don't want it
// to apply any minification steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebook/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
// Disabled because of an issue with Terser breaking valid code:
// https://github.com/facebook/create-react-app/issues/5250
// Pending further investigation:
// https://github.com/terser-js/terser/issues/120
inline: 2,
},
mangle: {
safari10: true,
},
// Added for profiling in devtools
keep_classnames: isEnvProductionProfile,
keep_fnames: isEnvProductionProfile,
output: {
ecma: 5,
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true,
},
},
}),
// This is only used in production mode
new CssMinimizerPlugin(),
],
},
resolve: {
// This allows you to set a fallback for where webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ['node_modules', paths.appNodeModules].concat(
modules.additionalModulePaths || [],
),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebook/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: paths.moduleFileExtensions
.map((ext) => `.${ext}`)
.filter((ext) => useTypeScript || !ext.includes('ts')),
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
// Allows for better profiling with ReactDevTools
...(isEnvProductionProfile && {
'react-dom$': 'react-dom/profiling',
'scheduler/tracing': 'scheduler/tracing-profiling',
}),
...(modules.webpackAliases || {}),
},
plugins: [
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [
paths.appPackageJson,
reactRefreshRuntimeEntry,
reactRefreshWebpackPluginRuntimeEntry,
babelRuntimeEntry,
babelRuntimeEntryHelpers,
babelRuntimeRegenerator,
]),
],
},
module: {
strictExportPresence: true,
rules: [
// Handle node_modules packages that contain sourcemaps
shouldUseSourceMap && {
enforce: 'pre',
exclude: /@babel(?:\/|\\{1,2})runtime/,
test: /\.(js|mjs|jsx|ts|tsx|css)$/,
loader: require.resolve('source-map-loader'),
},
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
// TODO: Merge this config once `image/avif` is in the mime-db
// https://github.com/jshttp/mime-db
{
test: [/\.avif$/],
type: 'asset',
mimetype: 'image/avif',
parser: {
dataUrlCondition: {
maxSize: imageInlineSizeLimit,
},
},
},
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: imageInlineSizeLimit,
},
},
},
{
test: /\.svg$/,
use: [
{
loader: require.resolve('@svgr/webpack'),
options: {
prettier: false,
svgo: false,
svgoConfig: {
plugins: [{ removeViewBox: false }],
},
titleProp: true,
ref: true,
},
},
{
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash].[ext]',
},
},
],
issuer: {
and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
},
},
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides',
),
presets: [
[
require.resolve('babel-preset-react-app'),
{
runtime: hasJsxRuntime ? 'automatic' : 'classic',
},
],
],
plugins: [
isEnvDevelopment &&
shouldUseReactRefresh &&
require.resolve('react-refresh/babel'),
].filter(Boolean),
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
compact: isEnvProduction,
},
},
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
// Babel sourcemaps are needed for debugging into node_modules
// code. Without the options below, debuggers like VSCode
// show incorrect code and set breakpoints on the wrong lines.
sourceMaps: shouldUseSourceMap,
inputSourceMap: shouldUseSourceMap,
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'icss',
},
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'local',
getLocalIdent: getCSSModuleLocalIdent,
},
}),
},
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'icss',
},
},
'sass-loader',
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'local',
getLocalIdent: getCSSModuleLocalIdent,
},
},
'sass-loader',
),
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
type: 'asset/resource',
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
],
},
].filter(Boolean),
},
plugins: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined,
),
),
// Inlines the webpack runtime script. This script is too small to warrant
// a network request.
// https://github.com/facebook/create-react-app/issues/5358
isEnvProduction &&
shouldInlineRuntimeChunk &&
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
// It will be an empty string unless you specify "homepage"
// in `package.json`, in which case it will be the pathname of that URL.
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// This gives some necessary context to module not found errors, such as
// the requesting resource.
new ModuleNotFoundPlugin(paths.appPath),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV is set to production
// during a production build.
// Otherwise React will be compiled in the very slow development mode.
new webpack.DefinePlugin(env.stringified),
// Experimental hot reloading for React .
// https://github.com/facebook/react/tree/main/packages/react-refresh
isEnvDevelopment &&
shouldUseReactRefresh &&
new ReactRefreshWebpackPlugin({
overlay: false,
}),
// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebook/create-react-app/issues/240
isEnvDevelopment && new CaseSensitivePathsPlugin(),
isEnvProduction &&
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
// Generate an asset manifest file with the following content:
// - "files" key: Mapping of all asset filenames to their corresponding
// output file so that tools can pick it up without having to parse
// `index.html`
// - "entrypoints" key: Array of files which are included in `index.html`,
// can be used to reconstruct the HTML if necessary
new WebpackManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: paths.publicUrlOrPath,
generate: (seed, files, entrypoints) => {
const manifestFiles = files.reduce((manifest, file) => {
manifest[file.name] = file.path
return manifest
}, seed)
const entrypointFiles = entrypoints.main.filter(
(fileName) => !fileName.endsWith('.map'),
)
return {
files: manifestFiles,
entrypoints: entrypointFiles,
}
},
}),
// Moment.js is an extremely popular library that bundles large locale files
// by default due to how webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/,
}),
// Generate a service worker script that will precache, and keep up to date,
// the HTML & assets that are part of the webpack build.
isEnvProduction &&
fs.existsSync(swSrc) &&
new WorkboxWebpackPlugin.InjectManifest({
swSrc,
dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/],
// Bump up the default maximum size (2mb) that's precached,
// to make lazy-loading failure scenarios less likely.
// See https://github.com/cra-template/pwa/issues/13#issuecomment-722667270
maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
}),
// TypeScript type checking
useTypeScript &&
new ForkTsCheckerWebpackPlugin({
async: isEnvDevelopment,
typescript: {
typescriptPath: resolve.sync('typescript', {
basedir: paths.appNodeModules,
}),
configOverwrite: {
compilerOptions: {
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
skipLibCheck: true,
inlineSourceMap: false,
declarationMap: false,
noEmit: true,
incremental: true,
tsBuildInfoFile: paths.appTsBuildInfoFile,
},
},
context: paths.appPath,
diagnosticOptions: {
syntactic: true,
},
mode: 'write-references',
// profile: true,
},
issue: {
// This one is specifically to match during CI tests,
// as micromatch doesn't match
// '../cra-template-typescript/template/src/App.tsx'
// otherwise.
include: [
{ file: '../**/src/**/*.{ts,tsx}' },
{ file: '**/src/**/*.{ts,tsx}' },
],
exclude: [
{ file: '**/src/**/__tests__/**' },
{ file: '**/src/**/?(*.){spec|test}.*' },
{ file: '**/src/setupProxy.*' },
{ file: '**/src/setupTests.*' },
],
},
logger: {
infrastructure: 'silent',
},
}),
!disableESLintPlugin &&
new ESLintPlugin({
// Plugin options
extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
context: paths.appSrc,
cache: true,
cacheLocation: path.resolve(
paths.appNodeModules,
'.cache/.eslintcache',
),
// ESLint class options
cwd: paths.appPath,
resolvePluginsRelativeTo: __dirname,
baseConfig: {
extends: [require.resolve('eslint-config-react-app/base')],
rules: {
...(!hasJsxRuntime && {
'react/react-in-jsx-scope': 'error',
}),
},
},
}),
].filter(Boolean),
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false,
}
}

10
system-tests/projects/cra-ejected/config/webpack/persistentCache/createEnvironmentHash.js
View File

@@ -1,10 +0,0 @@
'use strict'
const { createHash } = require('crypto')
module.exports = (env) => {
const hash = createHash('md5')
hash.update(JSON.stringify(env))
return hash.digest('hex')
}

128
system-tests/projects/cra-ejected/config/webpackDevServer.config.js
View File

@@ -1,128 +0,0 @@
'use strict'
const fs = require('fs')
const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware')
const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware')
const ignoredFiles = require('react-dev-utils/ignoredFiles')
const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware')
const paths = require('./paths')
const getHttpsConfig = require('./getHttpsConfig')
const host = process.env.HOST || '0.0.0.0'
const sockHost = process.env.WDS_SOCKET_HOST
const sockPath = process.env.WDS_SOCKET_PATH // default: '/ws'
const sockPort = process.env.WDS_SOCKET_PORT
module.exports = function (proxy, allowedHost) {
const disableFirewall =
!proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true'
return {
// WebpackDevServer 2.4.3 introduced a security fix that prevents remote
// websites from potentially accessing local content through DNS rebinding:
// https://github.com/webpack/webpack-dev-server/issues/887
// https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
// However, it made several existing use cases such as development in cloud
// environment or subdomains in development significantly more complicated:
// https://github.com/facebook/create-react-app/issues/2271
// https://github.com/facebook/create-react-app/issues/2233
// While we're investigating better solutions, for now we will take a
// compromise. Since our WDS configuration only serves files in the `public`
// folder we won't consider accessing them a vulnerability. However, if you
// use the `proxy` feature, it gets more dangerous because it can expose
// remote code execution vulnerabilities in backends like Django and Rails.
// So we will disable the host check normally, but enable it if you have
// specified the `proxy` setting. Finally, we let you override it if you
// really know what you're doing with a special environment variable.
// Note: ["localhost", ".localhost"] will support subdomains - but we might
// want to allow setting the allowedHosts manually for more complex setups
allowedHosts: disableFirewall ? 'all' : [allowedHost],
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': '*',
'Access-Control-Allow-Headers': '*',
},
// Enable gzip compression of generated files.
compress: true,
static: {
// By default WebpackDevServer serves physical files from current directory
// in addition to all the virtual build products that it serves from memory.
// This is confusing because those files won’t automatically be available in
// production build folder unless we copy them. However, copying the whole
// project directory is dangerous because we may expose sensitive files.
// Instead, we establish a convention that only files in `public` directory
// get served. Our build script will copy `public` into the `build` folder.
// In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
// <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
// In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
// Note that we only recommend to use `public` folder as an escape hatch
// for files like `favicon.ico`, `manifest.json`, and libraries that are
// for some reason broken when imported through webpack. If you just want to
// use an image, put it in `src` and `import` it from JavaScript instead.
directory: paths.appPublic,
publicPath: [paths.publicUrlOrPath],
// By default files from `contentBase` will not trigger a page reload.
watch: {
// Reportedly, this avoids CPU overload on some systems.
// https://github.com/facebook/create-react-app/issues/293
// src/node_modules is not ignored to support absolute imports
// https://github.com/facebook/create-react-app/issues/1065
ignored: ignoredFiles(paths.appSrc),
},
},
client: {
webSocketURL: {
// Enable custom sockjs pathname for websocket connection to hot reloading server.
// Enable custom sockjs hostname, pathname and port for websocket connection
// to hot reloading server.
hostname: sockHost,
pathname: sockPath,
port: sockPort,
},
overlay: {
errors: true,
warnings: false,
},
},
devMiddleware: {
// It is important to tell WebpackDevServer to use the same "publicPath" path as
// we specified in the webpack config. When homepage is '.', default to serving
// from the root.
// remove last slash so user can land on `/test` instead of `/test/`
publicPath: paths.publicUrlOrPath.slice(0, -1),
},
https: getHttpsConfig(),
host,
historyApiFallback: {
// Paths with dots should still use the history fallback.
// See https://github.com/facebook/create-react-app/issues/387.
disableDotRule: true,
index: paths.publicUrlOrPath,
},
// `proxy` is run between `before` and `after` `webpack-dev-server` hooks
proxy,
onBeforeSetupMiddleware (devServer) {
// Keep `evalSourceMapMiddleware`
// middlewares before `redirectServedPath` otherwise will not have any effect
// This lets us fetch source contents from webpack for the error overlay
devServer.app.use(evalSourceMapMiddleware(devServer))
if (fs.existsSync(paths.proxySetup)) {
// This registers user provided middleware for proxy reasons
require(paths.proxySetup)(devServer.app)
}
},
onAfterSetupMiddleware (devServer) {
// Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
devServer.app.use(redirectServedPath(paths.publicUrlOrPath))
// This service worker file is effectively a 'no-op' that will reset any
// previous service worker registered for the same host:port combination.
// We do this in development to avoid hitting the production cache if
// it used the same host and port.
// https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath))
},
}
}

78
system-tests/projects/cra-ejected/package.json
View File

@@ -1,78 +0,0 @@
{
"name": "cra-ejected",
"version": "0.1.0",
"private": true,
"scripts": {
"build": "node scripts/build.js",
"start": "node scripts/start.js"
},
"dependencies": {
"@babel/core": "^7.16.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
"@svgr/webpack": "^5.5.0",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"babel-jest": "^27.4.2",
"babel-loader": "^8.3.0",
"babel-plugin-named-asset-import": "^0.3.8",
"babel-preset-react-app": "^10.0.1",
"bfj": "^7.0.2",
"browserslist": "^4.18.1",
"camelcase": "^6.2.1",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.2.0",
"dotenv": "^10.0.0",
"dotenv-expand": "^5.1.0",
"eslint": "^8.3.0",
"eslint-config-react-app": "^7.0.0",
"eslint-webpack-plugin": "^3.1.1",
"file-loader": "^6.2.0",
"fs-extra": "^10.0.0",
"html-webpack-plugin": "^5.5.0",
"identity-obj-proxy": "^3.0.0",
"mini-css-extract-plugin": "^2.9.1",
"postcss": "^8.4.4",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-loader": "^6.2.1",
"postcss-normalize": "^10.0.1",
"postcss-preset-env": "^7.0.1",
"prompts": "^2.4.2",
"react": "^18.0.0",
"react-app-polyfill": "^3.0.0",
"react-dev-utils": "^12.0.0",
"react-dom": "^18.0.0",
"react-refresh": "^0.11.0",
"resolve": "^1.20.0",
"resolve-url-loader": "^4.0.0",
"sass-loader": "^12.3.0",
"semver": "^7.5.3",
"source-map-loader": "^3.0.0",
"style-loader": "^3.3.1",
"tailwindcss": "^3.0.2",
"terser-webpack-plugin": "^5.2.5",
"webpack": "^5.64.4",
"webpack-dev-server": "^4.6.0",
"webpack-manifest-plugin": "^4.0.2",
"workbox-webpack-plugin": "^6.4.1"
},
"babel": {
"presets": [
"react-app"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"projectFixtureDirectory": "cra"
}

7606
system-tests/projects/cra-ejected/yarn.lock
View File

File diff suppressed because it is too large Load Diff

70
system-tests/projects/create-react-app-configured/README.md
View File

@@ -1,70 +0,0 @@
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `yarn start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `yarn test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `yarn build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `yarn eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `yarn build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

11
system-tests/projects/create-react-app-configured/cypress.config.js
View File

@@ -1,11 +0,0 @@
const { defineConfig } = require('cypress')
module.exports = defineConfig({
component: {
experimentalSingleTabRunMode: true,
devServer: {
framework: 'create-react-app',
bundler: 'webpack',
},
},
})

12
system-tests/projects/create-react-app-configured/cypress/support/component-index.html
View File

@@ -1,12 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Components App</title>
</head>
<body>
<div data-cy-root></div>
</body>
</html>

24
system-tests/projects/create-react-app-configured/cypress/support/component.js
View File

@@ -1,24 +0,0 @@
// ***********************************************************
// This example support/component.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Alternatively you can use CommonJS syntax:
// require('./commands')
import { mount } from 'cypress/react18'
Cypress.Commands.add('mount', mount)
// Example use:
// cy.mount(<MyComponent />)

32
system-tests/projects/create-react-app-configured/package.json
View File

@@ -1,32 +0,0 @@
{
"name": "create-react-app-unconfigured",
"version": "0.1.0",
"private": true,
"scripts": {
"build": "react-scripts build",
"eject": "react-scripts eject",
"start": "react-scripts start",
"test": "react-scripts test"
},
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

BIN
system-tests/projects/create-react-app-configured/public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

43
system-tests/projects/create-react-app-configured/public/index.html
View File

@@ -1,43 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

BIN
system-tests/projects/create-react-app-configured/public/logo192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

BIN
system-tests/projects/create-react-app-configured/public/logo512.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.4 KiB

25
system-tests/projects/create-react-app-configured/public/manifest.json
View File

@@ -1,25 +0,0 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

3
system-tests/projects/create-react-app-configured/public/robots.txt
View File

@@ -1,3 +0,0 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

38
system-tests/projects/create-react-app-configured/src/App.css
View File

@@ -1,38 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

10
system-tests/projects/create-react-app-configured/src/App.cy.js
View File

@@ -1,10 +0,0 @@
import React from 'react'
import App from './App'
describe('<App />', () => {
it('renders', () => {
// see: https://on.cypress.io/mounting-react
cy.mount(<App />)
cy.contains('Learn React')
})
})

25
system-tests/projects/create-react-app-configured/src/App.js
View File

@@ -1,25 +0,0 @@
import logo from './logo.svg'
import './App.css'
function App () {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
)
}
export default App

9
system-tests/projects/create-react-app-configured/src/App.test.js
View File

@@ -1,9 +0,0 @@
import { render, screen } from '@testing-library/react'
import App from './App'
test('renders learn react link', () => {
render(<App />)
const linkElement = screen.getByText(/learn react/i)
expect(linkElement).toBeInTheDocument()
})

13
system-tests/projects/create-react-app-configured/src/index.css
View File

@@ -1,13 +0,0 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

18
system-tests/projects/create-react-app-configured/src/index.js
View File

@@ -1,18 +0,0 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

1
system-tests/projects/create-react-app-configured/src/logo.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

13
system-tests/projects/create-react-app-configured/src/reportWebVitals.js
View File

@@ -1,13 +0,0 @@
const reportWebVitals = (onPerfEntry) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry)
getFID(onPerfEntry)
getFCP(onPerfEntry)
getLCP(onPerfEntry)
getTTFB(onPerfEntry)
})
}
}
export default reportWebVitals

5
system-tests/projects/create-react-app-configured/src/setupTests.js
View File

@@ -1,5 +0,0 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom'

9842
system-tests/projects/create-react-app-configured/yarn.lock
View File

File diff suppressed because it is too large Load Diff

70
system-tests/projects/create-react-app-custom-index-html/README.md
View File

@@ -1,70 +0,0 @@
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `yarn start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `yarn test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `yarn build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `yarn eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `yarn build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

10
system-tests/projects/create-react-app-custom-index-html/cypress.config.js
View File

@@ -1,10 +0,0 @@
module.exports = {
component: {
experimentalSingleTabRunMode: true,
devServer: {
framework: 'create-react-app',
bundler: 'webpack',
},
indexHtmlFile: 'cypress/support/custom-component-index.html',
},
}

0
system-tests/projects/create-react-app-custom-index-html/cypress/support/component.js
View File

17
system-tests/projects/create-react-app-custom-index-html/cypress/support/custom-component-index.html
View File

@@ -1,17 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Components App</title>
<style>
body {
background-color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<div data-cy-root></div>
</body>
</html>

32
system-tests/projects/create-react-app-custom-index-html/package.json
View File

@@ -1,32 +0,0 @@
{
"name": "create-react-app-custom-index-html",
"version": "0.1.0",
"private": true,
"scripts": {
"build": "react-scripts build",
"eject": "react-scripts eject",
"start": "react-scripts start",
"test": "react-scripts test"
},
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

BIN
system-tests/projects/create-react-app-custom-index-html/public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

43
system-tests/projects/create-react-app-custom-index-html/public/index.html
View File

@@ -1,43 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

BIN
system-tests/projects/create-react-app-custom-index-html/public/logo192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

BIN
system-tests/projects/create-react-app-custom-index-html/public/logo512.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.4 KiB

25
system-tests/projects/create-react-app-custom-index-html/public/manifest.json
View File

@@ -1,25 +0,0 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

3
system-tests/projects/create-react-app-custom-index-html/public/robots.txt
View File

@@ -1,3 +0,0 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

38
system-tests/projects/create-react-app-custom-index-html/src/App.css
View File

@@ -1,38 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

9
system-tests/projects/create-react-app-custom-index-html/src/App.cy.jsx
View File

@@ -1,9 +0,0 @@
import { mount } from 'cypress/react'
import React from 'react'
import App from './App'
it('works', () => {
mount(<App />)
cy.contains('Learn React')
cy.get('body').should('have.css', 'background-color', 'rgb(255, 0, 0)')
})

26
system-tests/projects/create-react-app-custom-index-html/src/App.js
View File

@@ -1,26 +0,0 @@
import React from 'react'
import logo from './logo.svg'
import './App.css'
function App () {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
)
}
export default App

9
system-tests/projects/create-react-app-custom-index-html/src/App.test.js
View File

@@ -1,9 +0,0 @@
import { render, screen } from '@testing-library/react'
import App from './App'
test('renders learn react link', () => {
render(<App />)
const linkElement = screen.getByText(/learn react/i)
expect(linkElement).toBeInTheDocument()
})

13
system-tests/projects/create-react-app-custom-index-html/src/index.css
View File

@@ -1,13 +0,0 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

11
system-tests/projects/create-react-app-custom-index-html/src/index.js
View File

@@ -1,11 +0,0 @@
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root'),
)

1
system-tests/projects/create-react-app-custom-index-html/src/logo.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

5
system-tests/projects/create-react-app-custom-index-html/src/setupTests.js
View File

@@ -1,5 +0,0 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom'

11078
system-tests/projects/create-react-app-custom-index-html/yarn.lock
View File

File diff suppressed because it is too large Load Diff

70
system-tests/projects/create-react-app-unconfigured/README.md
View File

@@ -1,70 +0,0 @@
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `yarn start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `yarn test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `yarn build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `yarn eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `yarn build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

32
system-tests/projects/create-react-app-unconfigured/package.json
View File

@@ -1,32 +0,0 @@
{
"name": "create-react-app-unconfigured",
"version": "0.1.0",
"private": true,
"scripts": {
"build": "react-scripts build",
"eject": "react-scripts eject",
"start": "react-scripts start",
"test": "react-scripts test"
},
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Some files were not shown because too many files have changed in this diff Show More