Support CRA config overrides via react-app-rewired and customize-cra

[Relaxe111]

I have set create-react-app with react app rewired absolute path like: config-overrides.js: also configured tsconfig.paths.json to use aboslute paths: I also configured cypress to to start through react-app-rewired(overrides react-scripts without ejecting): package.json: I import in MyComponentToTest.tsx another component with absolute path : MyComponentToTest.tsx: when i run yarn cypress:open and run cypress/integration/App.spec.tsx it work as expected. However when i try to run component test MyComponentToTest.tsx i get error that it was unable to solve the path :

My question is how i can learn cypress to use absolute paths for unit testing too?

my example app: cypres-unit-test.zip

[bahmutov]

We don't have a react-scripts rewired example, it probably would require creating its own preprocessor loader, like did for react-scripts and webpack and others.

[Relaxe111]

Ok so there is no solution for now to use aliases ?

[bahmutov]

I don't think so. What would be useful is to have an example repository set up that shows your use case (simple hello world with rewired and aliases), that we could fork and play with to see how to implement this.

[Relaxe111]

project is attached as zip file last line of the initial coment can add one more time: cypres-unit-test (1).zip

[Relaxe111]

Or shall i open a git repo?

[bahmutov]

Do you mind if we include that app in this repo?

[Relaxe111]

Of course you can add it to this repo, if it will be useful for someone. Hope for me as well)

[bahmutov]

so really there are three issues here:

• [x] how to use path aliases when doing import X from '@someplace/X' - that is taken care of by Webpack during bundling, I have already extended the webpack example app
• [x] how to tell TypeScript so that it understands that X is imported from @someplace/X, similar to https://glebbahmutov.com/blog/using-ts-aliases-in-cypress-tests/
• [ ] and how to use this adaptor with customize-cra / rewrite-create-app situations

[tkharuk]

@bahmutov this remains as it was - no way to feed cypress the config-overrides.js? we use it to initiate addBabelPlugin('babel-plugin-transform-react-qa-classes') which is a useful utility for us to add data-qa tags automatically based on component name

[MohoiNad]

Does this situation changes after v10? For now we have some different way to config cypress's webpack.

I have similar problem with my repo here: https://github.com/MohoiNad/cypress-issue

So my cypress test failed, but testing library not

[binginsin]

I had the same issue, my solution was the following cypress.config.js file: Note: the project structure is: Project -- cypress ---- tsconfig.json -- src -- tsconfig.json -- config-overrides.js -- cypress.config.js

//this doesn't work
process.env.NODE_ENV = 'development';
const path = require('path');
const { babelInclude, override } = require('customize-cra');
//Get webpack from react-app-rewired - this finds the original webpack and then uses config-overrides.json to override
const webpackOverride = require('react-app-rewired/overrides/webpack');

//our config-overrides.json has babelInclude([path.resolve('./src')]) which means our cypress files are not included in the webpack
//so override it to include both src and cypress
const overrideBabel = override(babelInclude([path.resolve('./src'), path.resolve('./cypress')]));

//Construct the new webpack
const webpack = overrideBabel(webpackOverride());

//Not sure why this is required but is false (boolean) by default and webpack wants a string
webpack.output.devtoolModuleFilenameTemplate = '[name].js';

module.exports = {
    e2e: {
        devServer: {
            framework: 'react',
            bundler: 'webpack',
            webpackConfig: webpack,
        },
        baseUrl: 'http://localhost:5000',
    },

    component: {
        devServer: {
            framework: 'react',
            bundler: 'webpack',
            webpackConfig: webpack,
        },
    },
};

Note that I only tested the component config as I didn't have any e2e tests setup

[bencergazda]

@binginsin Thanks for sharing your solution. Unfortunately it didn't work for me out of the box, but helped me understanding the problem and creating the final setup. It looks like this:

import { defineConfig } from 'cypress';

/**
 * "Rewire" the webpack config before `loadWebpackConfig` accesses it through `react-scripts`
 * @see @cypress/webpack-dev-server/dist/helpers/createReactAppHandler.js:41
 */
process.env.NODE_ENV = 'test';
process.env.BABEL_ENV = 'test';
require('react-app-rewired/config/webpack.config')('development');

export default defineConfig({
  component: {
    devServer: {
      framework: 'create-react-app',
      bundler: 'webpack',
    },
  },
});

Ref: #22521 #8723

[Falcowoski]

import { defineConfig } from 'cypress';

/**
 * "Rewire" the webpack config before `loadWebpackConfig` accesses it through `react-scripts`
 * @see @cypress/webpack-dev-server/dist/helpers/createReactAppHandler.js:41
 */
process.env.NODE_ENV = 'test';
process.env.BABEL_ENV = 'test';
require('react-app-rewired/config/webpack.config')('development');

export default defineConfig({
  component: {
    devServer: {
      framework: 'create-react-app',
      bundler: 'webpack',
    },
  },
});

Thank you so much @bencergazda! :rocket: :heart:

I've been trying to troubleshoot webpack errors while running a component test for more than 3 hours, and I finally found this issue and its answer, which completely solved my problem!

My error was in relation to using absolute paths inside the component that was being tested.

Module not found: Error: Can't resolve '@lib/Animations

In my case, BABEL_ENV didn't seem to be needed, so I removed it.

Also, I replaced "test" with "development" in NODE_ENV.

The TypeScript compiler was reporting an error when assigning a value to a read only variable, which forced me to use @ts-ignore.

// @ts-ignore
process.env.NODE_ENV = 'development';

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[cypress-app-bot]

This issue has been closed due to inactivity.