Rename cypress-react-unit-test with @cypress/react

circle.yml

@@ -1081,6 +1081,8 @@ jobs:
           name: Run tests
           command: yarn workspace @cypress/react test
       - store-npm-logs
+      - persist_to_workspace:
+        root: ~/
 
   npm-react-e2e-example:
     <<: *defaults

npm/react/README.md

@@ -1,4 +1,4 @@
-# cypress-react-unit-test [![CircleCI](https://circleci.com/gh/bahmutov/cypress-react-unit-test/tree/main.svg?style=svg)](https://circleci.com/gh/bahmutov/cypress-react-unit-test/tree/main) [![Cypress.io tests](https://img.shields.io/badge/cypress.io-tests-green.svg?style=flat-square)](https://dashboard.cypress.io/#/projects/z9dxah) [![renovate-app badge][renovate-badge]][renovate-app]
+# @cypress/react [![CircleCI](https://circleci.com/gh/bahmutov/@cypress/react/tree/main.svg?style=svg)](https://circleci.com/gh/bahmutov/@cypress/react/tree/main) [![Cypress.io tests](https://img.shields.io/badge/cypress.io-tests-green.svg?style=flat-square)](https://dashboard.cypress.io/#/projects/z9dxah) [![renovate-app badge][renovate-badge]][renovate-app]
 
 > A little helper to unit test React components in the open source [Cypress.io](https://www.cypress.io/) E2E test runner **v4.5.0+**
 
@@ -21,7 +21,7 @@ Hi there! We are trying to collect feedback from Cypress users who need componen
 ## Comparison
 
 <!-- prettier-ignore-start -->
-Feature | Jest / Enzyme / RTL | Cypress + `cypress-react-unit-test`
+Feature | Jest / Enzyme / RTL | Cypress + `@cypress/react`
 --- | --- | ---
 Test runs in real browser | ❌ | ✅
 Supports shallow mount | ✅ | ❌
@@ -49,49 +49,49 @@ If you are coming from Enzyme world, check out the [enzyme](cypress/component/ba
 
 - [My Vision for Component Tests in Cypress](https://glebbahmutov.com/blog/my-vision-for-component-tests/)
 - [Unit Testing React components with Cypress](https://itnext.io/unit-testing-react-components-with-cypress-4d4cf8cd59a0)
-- [Test React Component with cypress-react-unit-test Example](https://dev.to/bahmutov/test-react-component-with-cypress-react-unit-test-example-4d99)
+- [Test React Component with @cypress/react Example](https://dev.to/bahmutov/test-react-component-with-@cypress/react-example-4d99)
 - [Tic-Tac-Toe Component Tests](https://glebbahmutov.com/blog/tic-tac-toe-component-tests/)
 - [Using .env and .env.test from React component tests](https://medium.com/@bahmutov/using-env-and-env-test-from-react-component-tests-c11aa2040bc8)
 - [Visual testing for React components using open source tools](https://glebbahmutov.com/blog/open-source-visual-testing-of-components/)
-- [12 Recipes for testing React applications using cypress-react-unit-test](https://dev.to/bahmutov/12-recipes-for-testing-react-applications-using-cypress-react-unit-test-46g6) (compare to [12 Recipes for testing React applications using Testing Library](https://dev.to/jooforja/12-recipes-for-testing-react-applications-using-testing-library-1bh2#portal))
+- [12 Recipes for testing React applications using @cypress/react](https://dev.to/bahmutov/12-recipes-for-testing-react-applications-using-@cypress/react-46g6) (compare to [12 Recipes for testing React applications using Testing Library](https://dev.to/jooforja/12-recipes-for-testing-react-applications-using-testing-library-1bh2#portal))
 - [Cypress Unit Testing React Components With TypeScript](https://medium.com/swlh/cypress-unit-testing-react-components-with-typescript-77b38e5043b3)
-- [Test The Interface Not The Implementation](https://glebbahmutov.com/blog/test-the-interface/) compares Jest + React Testing Library to cypress-react-unit-test + Cypress Testing Library
+- [Test The Interface Not The Implementation](https://glebbahmutov.com/blog/test-the-interface/) compares Jest + React Testing Library to @cypress/react + Cypress Testing Library
 - [Components People Test](https://glebbahmutov.com/blog/components-people-test/) about testing a component inside a Next.js-powered blog
 
 ## Known problems
 
-See issues labeled [v4](https://github.com/bahmutov/cypress-react-unit-test/labels/v4)
+See issues labeled [v4](https://github.com/bahmutov/@cypress/react/labels/v4)
 
 ## Install
 
 Requires [Node](https://nodejs.org/en/) version 8 or above.
 
 ```sh
-npm install --save-dev cypress cypress-react-unit-test
+npm install --save-dev cypress @cypress/react
 ```
 
 ## Init
 
 You can use our command line wizard to give you instructions on configuring this plugin. It will try to determine which framework or bundling tool you are using and give you instructions on right configuration.
 
 ```sh
-cypress-react-unit-test init
+@cypress/react init
 ```
 
 Or continue with manual installation:
 
 1. Include this plugin from your project's `cypress/support/index.js`
 
 ```js
-require('cypress-react-unit-test/support')
+require('@cypress/react/support')
 ```
 
 2. Tell Cypress how your React application is transpiled or bundled (using Webpack), so Cypress can load your components. For example, if you use `react-scripts` (even after ejecting) do:
 
 ```js
 // cypress/plugins/index.js
 module.exports = (on, config) => {
-  require('cypress-react-unit-test/plugins/react-scripts')(on, config)
+  require('@cypress/react/plugins/react-scripts')(on, config)
   // IMPORTANT to return the config object
   // with the any changed environment variables
   return config
@@ -120,7 +120,7 @@ See [Recipes](./docs/recipes.md) for more examples.
 
 ```js
 import React from 'react'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 import { HelloWorld } from './hello-world.jsx'
 describe('HelloWorld component', () => {
   it('works', () => {
@@ -255,14 +255,14 @@ Repo | Description
 [mobx-react-typescript-boilerplate](https://github.com/bahmutov/mobx-react-typescript-boilerplate) | Fork of the official Mobx example, shows clock control
 [bahmutov/test-react-hook-form](https://github.com/bahmutov/test-react-hook-form) | Testing forms created using [react-hook-form](https://github.com/react-hook-form/react-hook-form)
 [bahmutov/react-with-rollup](https://github.com/bahmutov/react-with-rollup) | Testing a React application bundled with Rollup by using [@bahmutov/cy-rollup](https://github.com/bahmutov/cy-rollup) preprocessor
-[bahmutov/testing-react-example](https://github.com/bahmutov/testing-react-example) | Described in blog post [Test React Component with cypress-react-unit-test Example](https://dev.to/bahmutov/test-react-component-with-cypress-react-unit-test-example-4d99)
+[bahmutov/testing-react-example](https://github.com/bahmutov/testing-react-example) | Described in blog post [Test React Component with @cypress/react Example](https://dev.to/bahmutov/test-react-component-with-@cypress/react-example-4d99)
 [ejected-react-scripts-example](https://github.com/bahmutov/ejected-react-scripts-example) | Using component testing after ejecting `react-scripts`
 [tic-tac-toe](https://github.com/bahmutov/react-tic-tac-toe-example) | Component and unit tests for Tic-Tac-Toe, read [Tic-Tac-Toe Component Tests](https://glebbahmutov.com/blog/tic-tac-toe-component-tests/)
 [react-hooks-file-upload](https://github.com/bahmutov/react-hooks-file-upload) | Upload a file from the component while stubbing the server
 [react-query-example](https://github.com/bahmutov/react-query-example) | Quick test example for components that use `react-query` with mock clock control
 <!-- prettier-ignore-end -->
 
-To find more examples, see GitHub topic [cypress-react-unit-test-example](https://github.com/topics/cypress-react-unit-test-example)
+To find more examples, see GitHub topic [@cypress/react-example](https://github.com/topics/@cypress/react-example)
 
 ## Options
 
@@ -301,7 +301,7 @@ If your React and React DOM libraries are installed in non-standard paths (think
 ```json
 {
   "env": {
-    "cypress-react-unit-test": {
+    "@cypress/react": {
       "react": "node_modules/react/umd/react.development.js",
       "react-dom": "node_modules/react-dom/umd/react-dom.development.js"
     }
@@ -392,7 +392,7 @@ const webpackOptions = {
 }
 ```
 
-Keep your eye on issue [#156](https://github.com/bahmutov/cypress-react-unit-test/issues/156) for more information.
+Keep your eye on issue [#156](https://github.com/bahmutov/@cypress/react/issues/156) for more information.
 
 </details>
 
@@ -401,14 +401,14 @@ Keep your eye on issue [#156](https://github.com/bahmutov/cypress-react-unit-tes
 
 If you are using your custom Webpack, this plugin might be missing code coverage information because the code was not instrumented. We try to insert the `babel-plugin-istanbul` plugin automatically, but your bundling might not use Babel, or configure it differently, preventing plugin insertion. Please let us know by opening an issue with full reproducible details.
 
-See related issue [#141](https://github.com/bahmutov/cypress-react-unit-test/issues/141). You can also debug the plugin's behavior by running it with `DEBUG` environment variable, see [#debugging](#debugging) section.
+See related issue [#141](https://github.com/bahmutov/@cypress/react/issues/141). You can also debug the plugin's behavior by running it with `DEBUG` environment variable, see [#debugging](#debugging) section.
 
 </details>
 
 <details id="gatsby-not-supported">
   <summary>Gatsby.js projects not supported</summary>
 
-Currently, this project cannot find Webpack settings used by Gatsby.js, thus it cannot bundle specs and application code correctly. Keep an eye on [#307](https://github.com/bahmutov/cypress-react-unit-test/issues/307)
+Currently, this project cannot find Webpack settings used by Gatsby.js, thus it cannot bundle specs and application code correctly. Keep an eye on [#307](https://github.com/bahmutov/@cypress/react/issues/307)
 
 </details>
 
@@ -429,23 +429,23 @@ See [docs/development.md](./docs/development.md)
 You can see verbose logs from this plugin by running with environment variable
 
 ```
-DEBUG=cypress-react-unit-test
+DEBUG=@cypress/react
 ```
 
 Because finding and modifying Webpack settings while running this plugin is done by [find-webpack](https://github.com/bahmutov/find-webpack) module, you might want to enable its debug messages too.
 
 ```
-DEBUG=cypress-react-unit-test,find-webpack
+DEBUG=@cypress/react,find-webpack
 ```
 
 ## Migration guide
 
 ### From v3 to v4
 
-The old v3 `main` branch is available as branch [v3](https://github.com/bahmutov/cypress-react-unit-test/tree/v3)
+The old v3 `main` branch is available as branch [v3](https://github.com/bahmutov/@cypress/react/tree/v3)
 
-- the `cy.mount` is now simply `import { mount } from 'cypress-react-unit-test'`
-- the support file is simply `require('cypress-react-unit-test/support')`
+- the `cy.mount` is now simply `import { mount } from '@cypress/react'`
+- the support file is simply `require('@cypress/react/support')`
 
 ## Related tools
 

npm/react/babel.config.js

@@ -21,7 +21,7 @@ module.exports = {
       'module-resolver',
       {
         alias: {
-          'cypress-react-unit-test': './dist',
+          '@cypress/react': './dist',
         },
       },
     ],

npm/react/cypress/component/advanced/api-test/spec.js

@@ -3,7 +3,7 @@
 /// <reference types="@bahmutov/cy-api" />
 import { Users } from './users.jsx'
 import React from 'react'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 // adds cy.api command
 import '@bahmutov/cy-api/support'
 

npm/react/cypress/component/advanced/app-action-example/counter-spec.js

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 import React from 'react'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 import { Counter } from './counter.jsx'
 
 /* eslint-env mocha */

npm/react/cypress/component/advanced/context/App-spec.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 import App from './App.jsx'
 
 describe('Context example', () => {

npm/react/cypress/component/advanced/context/Mock-context-spec.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 import { ThemeContext } from './context'
 import { Toolbar } from './Toolbar.jsx'
 

npm/react/cypress/component/advanced/context/README.md

@@ -5,7 +5,7 @@
 We can also create children elements with mock context around them right from the test file. See [Mock-context-spec.js](Mock-context-spec.js) file.
 
 ```js
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 import { ThemeContext } from './context'
 import { Toolbar } from './Toolbar.jsx'
 

npm/react/cypress/component/advanced/custom-command/spec.js

@@ -1,9 +1,9 @@
 /// <reference types="cypress" />
 /// <reference types="../../lib" />
 import React from 'react'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 
-// https://github.com/bahmutov/cypress-react-unit-test/issues/184
+// https://github.com/bahmutov/@cypress/react/issues/184
 Cypress.Commands.add('myMount', () => {
   return mount(<div>My mount</div>)
 })

npm/react/cypress/component/advanced/forward-ref/forward-ref.spec.js

@@ -2,7 +2,7 @@
 /// <reference types="../../lib" />
 
 import React from 'react'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 import Button from './forward-ref.jsx'
 
 /* eslint-env mocha */

npm/react/cypress/component/advanced/framer-motion/Motion.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Motion } from './Motion'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 
 describe('framer-motion', () => {
   it('Renders component and retries the animation', () => {
@@ -10,7 +10,7 @@ describe('framer-motion', () => {
     cy.get('[data-testid=\'motion\']').should('have.css', 'border-radius', '20%')
   })
 
-  // NOTE: looks like cy.tick issue. Refer to the https://github.com/bahmutov/cypress-react-unit-test/issues/420
+  // NOTE: looks like cy.tick issue. Refer to the https://github.com/bahmutov/@cypress/react/issues/420
   it.skip('Mocks setTimeout and requestAnimationFrame', () => {
     cy.clock()
     mount(<Motion />)

npm/react/cypress/component/advanced/hooks/counter-with-hooks.spec.js

@@ -3,7 +3,7 @@
 
 import React from 'react'
 import ReactDom from 'react-dom'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 import CounterWithHooks from './counter-with-hooks.jsx'
 
 describe('CounterWithHooks component', function () {

npm/react/cypress/component/advanced/hooks/counter2-with-hooks.spec.js

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import ReactDom from 'react-dom'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 import Counter2WithHooks from './counter2-with-hooks.jsx'
 
 describe('Counter2WithHooks', function () {

npm/react/cypress/component/advanced/hooks/use-counter.spec.js

@@ -1,7 +1,7 @@
 // @ts-check
 /// <reference types="cypress" />
 import { useState, useCallback } from 'react'
-import { mountHook } from 'cypress-react-unit-test'
+import { mountHook } from '@cypress/react'
 
 // testing example hook function from
 // https://dev.to/jooforja/12-recipes-for-testing-react-applications-using-testing-library-1bh2#hooks

npm/react/cypress/component/advanced/i18n/i18next-spec.js

@@ -2,7 +2,7 @@
 import * as React from 'react'
 import i18n from './i18n'
 import { LocalizedComponent } from './LocalizedComponent'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 import { I18nextProvider } from 'react-i18next'
 
 describe('i18n', () => {

npm/react/cypress/component/advanced/lazy-loaded-suspense/lazy-loaded-suspense.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { LazyComponent } from './LazyComponent'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 
 // NOTE: It doesn't work because of chunk splitting issue with webpack
 describe.skip('React.lazy component with <Suspense />', () => {

npm/react/cypress/component/advanced/lazy-loaded/app-spec.js

@@ -1,8 +1,8 @@
 import React from 'react'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 import App from './App'
 
-// NOTE: https://github.com/bahmutov/cypress-react-unit-test/issues/136
+// NOTE: https://github.com/bahmutov/@cypress/react/issues/136
 describe.skip('App loads', () => {
   it('renders lazy component', () => {
     mount(<App />)

npm/react/cypress/component/advanced/lazy-loaded/lazy-load-spec.js

@@ -1,4 +1,4 @@
-// NOTE: https://github.com/bahmutov/cypress-react-unit-test/issues/136
+// NOTE: https://github.com/bahmutov/@cypress/react/issues/136
 // dynamic imports like this work in example projects, but not inside this repo
 // probably due to webpack plugins not set up correctly ☹️
 describe.skip('dynamic import', () => {

npm/react/cypress/component/advanced/lazy-loaded/other-spec.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 import OtherComponent from './OtherComponent'
 
 describe('Other component by itself', () => {

npm/react/cypress/component/advanced/material-ui-example/autocomplete-spec.js

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 // select example from
 // https://material-ui.com/components/autocomplete/
 

npm/react/cypress/component/advanced/material-ui-example/button-spec.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 import Button from '@material-ui/core/Button'
 
 it('renders a button', () => {

npm/react/cypress/component/advanced/material-ui-example/checkbox-labels-spec.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 import CheckboxLabels from './checkbox-labels'
 
 it('renders checkboxes', () => {

npm/react/cypress/component/advanced/material-ui-example/list-item-spec.js

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 import React from 'react'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 import ListItem from '@material-ui/core/ListItem'
 import { ListItemText } from '@material-ui/core'
 import SimpleList from './list-demo'

npm/react/cypress/component/advanced/material-ui-example/select-spec.js

@@ -1,4 +1,4 @@
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 // select example from
 // https://material-ui.com/components/selects/
 import React from 'react'

npm/react/cypress/component/advanced/material-ui-example/simple-rating-spec.js

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 // select example from
 // https://material-ui.com/components/rating/
 

npm/react/cypress/component/advanced/mobx-v6/timer-spec.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 import { Timer } from './Timer'
 import { TimerView } from './timer-view'
 

npm/react/cypress/component/advanced/mock-fetch/fetch-spec.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 import User from './user'
 
 it('renders user data', () => {

npm/react/cypress/component/advanced/mocking-axios/1-users.spec.js

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 import React from 'react'
-import { mount } from 'cypress-react-unit-test'
+import { mount } from '@cypress/react'
 import { Users } from './1-users.jsx'
 // to mock CommonJS module loaded from `node_modules` use "require" in spec file
 const Axios = require('axios')
@@ -11,7 +11,7 @@ describe('Mocking Axios', () => {
     cy.get('li').should('have.length', 3)
   })
 
-  // https://github.com/bahmutov/cypress-react-unit-test/issues/338
+  // https://github.com/bahmutov/@cypress/react/issues/338
   it('mocks axios.get', () => {
     cy.stub(Axios, 'get')
     .resolves({