[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`

    </ThemeContext.Provider>,
  )
  // confirm "mocked" value is passed to the Toolbar
})
```

![Mocked context screenshot](images/mock-context.png)

    "@babel/plugin-syntax-dynamic-import": "7.8.3",
    "@babel/preset-env": "7.4.5",
    "@babel/preset-react": "7.0.0",
    "@babel/preset-typescript": "7.10.4",
    "@bahmutov/cy-api": "1.4.2",
    "@bahmutov/cy-rollup": "2.0.0",
    "@date-io/date-fns": "1",
    "@emotion/babel-preset-css-prop": "10.0.27",
    "@emotion/core": "10.0.22",
    "@material-ui/core": "4.9.5",
    "@material-ui/icons": "4.5.1",

**Tip:** you can use [find-webpack](https://github.com/bahmutov/find-webpack) utility to find the Webpack config options provided by common tools: `react-scripts`, Vue CLI.

## Chunks and dynamic imports

 * @function   mount
 * @param      {React.ReactElement}  jsx - component to mount
 * @param      {MountOptions}  [options] - options, like alias, styles
 * @see https://github.com/bahmutov/@cypress/react
 * @see https://glebbahmutov.com/blog/my-vision-for-component-tests/
 * @example
 ```
  import Hello from './hello.jsx'
  import {mount} from '@cypress/react'
  it('works', () => {

  // IMPORTANT to return the config object
  // with the any changed environment variables
  return config
}
```

See example repo [bahmutov/try-cra-with-unit-test](https://github.com/bahmutov/try-cra-with-unit-test) or included example in the folder [examples/react-scripts](examples/react-scripts).

**Tip:** `plugins/react-scripts` is just loading `plugins/cra-v3`.

## Next.js

```js

// NOTE: https://github.com/bahmutov/cypress-react-unit-test/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', () => {
  it('loads', () => {
    // cy.wrap(import('./lazy-add'))
  })

// load file preprocessor that comes with this plugin
// https://github.com/bahmutov/cypress-react-unit-test#install
const preprocessor = require('@cypress/react/plugins/react-scripts')

module.exports = (on, config) => {
  preprocessor(on, config)

  // IMPORTANT to return the config object
  // with the any changed environment variables
  return config

import React from 'react'
import { mount } from '@cypress/react'
import MyComponent from './my-component.jsx'

// example from https://github.com/bahmutov/@cypress/react/issues/172
it('is a test', () => {
  mount(<MyComponent name="some text" />)
  cy.contains('Hello').should('be.visible')

// load file preprocessor that comes with this plugin
// https://github.com/bahmutov/cypress-react-unit-test#install
const preprocessor = require('@cypress/react/plugins/react-scripts')
const happoTask = require('happo-cypress/task')

module.exports = (on, config) => {
  on('task', happoTask)
  preprocessor(on, config)

  // IMPORTANT to return the config object
  // with the any changed environment variables
  return config