How to use addImageRedirect method in Cypress

1// @ts-check
2const debug = require('debug')('@cypress/react')
3
4/**
5 * Note: modifies the input options object
6 */
7function addImageRedirect (webpackOptions) {
8  if (!webpackOptions.module) {
9    debug('webpack options has no "module"')
10
11    return
12  }
13
14  if (!Array.isArray(webpackOptions.module.rules)) {
15    debug('webpack module rules is not an array')
16
17    return
18  }
19
20  debug('adding image redirect to %o', webpackOptions)
21
22  // we need to handle static images and redirect them to
23  // the existing files. Cypress has fallthrough static server
24  // for anything like "/_root/<path>" which is perfect - because
25  // importing a static image gives us that <path>!
26  // insert our loader first before any built-in loaders kick in
27  const loaderRules = webpackOptions.module.rules.find((rule) => {
28    return Array.isArray(rule.oneOf)
29  })
30
31  const imageRedirectLoaderRule = {
32    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
33    loader: require.resolve('./redirect-image-resource'),
34  }
35
36  if (loaderRules) {
37    debug('found oneOf rule %o', loaderRules.oneOf)
38    debug('adding our static image loader')
39    loaderRules.oneOf.unshift(imageRedirectLoaderRule)
40
41    // while we are here, let's change file loader
42    // to point it at the /__root/... path
43    const fileLoader = loaderRules.oneOf[loaderRules.oneOf.length - 1]
44
45    if (
46      fileLoader &&
47      fileLoader.loader &&
48      fileLoader.loader.includes('file-loader')
49    ) {
50      if (fileLoader.options && fileLoader.options.name) {
51        debug('setting file-loader to output /__root')
52        fileLoader.options.name = '/__root/[path][name].[ext]'
53        debug('file loader %o', fileLoader)
54      }
55    }
56  } else {
57    debug('could not find oneOf rules, inserting directly into rules')
58    webpackOptions.module.rules.unshift(imageRedirectLoaderRule)
59  }
60}
61
62module.exports = { addImageRedirect }
63

Source: add-image-redirect.js

// @ts-check
const debug = require('debug')('@cypress/react')

/**
 * Note: modifies the input options object
 */
function addImageRedirect (webpackOptions) {
  if (!webpackOptions.module) {
    debug('webpack options has no "module"')

    return
  }

  if (!Array.isArray(webpackOptions.module.rules)) {
    debug('webpack module rules is not an array')

    return
  }

  debug('adding image redirect to %o', webpackOptions)

  // we need to handle static images and redirect them to
  // the existing files. Cypress has fallthrough static server
  // for anything like "/_root/<path>" which is perfect - because
  // importing a static image gives us that <path>!
  // insert our loader first before any built-in loaders kick in
  const loaderRules = webpackOptions.module.rules.find((rule) => {
    return Array.isArray(rule.oneOf)
  })

  const imageRedirectLoaderRule = {
    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
    loader: require.resolve('./redirect-image-resource'),
  }

  if (loaderRules) {
    debug('found oneOf rule %o', loaderRules.oneOf)
    debug('adding our static image loader')
    loaderRules.oneOf.unshift(imageRedirectLoaderRule)

    // while we are here, let's change file loader
    // to point it at the /__root/... path
    const fileLoader = loaderRules.oneOf[loaderRules.oneOf.length - 1]

    if (
      fileLoader &&
      fileLoader.loader &&
      fileLoader.loader.includes('file-loader')
    ) {
      if (fileLoader.options && fileLoader.options.name) {
        debug('setting file-loader to output /__root')
        fileLoader.options.name = '/__root/[path][name].[ext]'
        debug('file loader %o', fileLoader)
      }
    }
  } else {
    debug('could not find oneOf rules, inserting directly into rules')
    webpackOptions.module.rules.unshift(imageRedirectLoaderRule)
  }
}

module.exports = { addImageRedirect }

1// @ts-check
2const debug = require('debug')('@cypress/react')
3
4/**
5 * Note: modifies the input options object
6 */
7function addImageRedirect (webpackOptions) {
8  if (!webpackOptions.module) {
9    debug('webpack options has no "module"')
10
11    return
12  }
13
14  if (!Array.isArray(webpackOptions.module.rules)) {
15    debug('webpack module rules is not an array')
16
17    return
18  }
19
20  debug('adding image redirect to %o', webpackOptions)
21
22  // we need to handle static images and redirect them to
23  // the existing files. Cypress has fallthrough static server
24  // for anything like "/_root/<path>" which is perfect - because
25  // importing a static image gives us that <path>!
26  // insert our loader first before any built-in loaders kick in
27  const loaderRules = webpackOptions.module.rules.find((rule) => {
28    return Array.isArray(rule.oneOf)
29  })
30
31  const imageRedirectLoaderRule = {
32    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
33    loader: require.resolve('./redirect-image-resource'),
34  }
35
36  if (loaderRules) {
37    debug('found oneOf rule %o', loaderRules.oneOf)
38    debug('adding our static image loader')
39    loaderRules.oneOf.unshift(imageRedirectLoaderRule)
40
41    // while we are here, let's change file loader
42    // to point it at the /__root/... path
43    const fileLoader = loaderRules.oneOf[loaderRules.oneOf.length - 1]
44
45    if (
46      fileLoader &&
47      fileLoader.loader &&
48      fileLoader.loader.includes('file-loader')
49    ) {
50      if (fileLoader.options && fileLoader.options.name) {
51        debug('setting file-loader to output /__root')
52        fileLoader.options.name = '/__root/[path][name].[ext]'
53        debug('file loader %o', fileLoader)
54      }
55    }
56  } else {
57    debug('could not find oneOf rules, inserting directly into rules')
58    webpackOptions.module.rules.unshift(imageRedirectLoaderRule)
59  }
60}
61
62/**
63 * Finds the ModuleScopePlugin plugin and adds given folder
64 * to that list. This allows react-scripts to import folders
65 * outside of the default "/src" folder.
66 * WARNING modifies the input webpack options argument.
67 * @see https://github.com/bahmutov/cypress-react-unit-test/issues/289
68 * @param {string} folderName Folder to add, should be absolute
69 */
70function allowModuleSourceInPlace (folderName, webpackOptions) {
71  if (!folderName) {
72    return
73  }
74
75  if (!webpackOptions.resolve) {
76    return
77  }
78
79  if (!Array.isArray(webpackOptions.resolve.plugins)) {
80    return
81  }
82
83  const moduleSourcePlugin = webpackOptions.resolve.plugins.find((plugin) => {
84    return Array.isArray(plugin.appSrcs)
85  })
86
87  if (!moduleSourcePlugin) {
88    debug('cannot find module source plugin')
89
90    return
91  }
92
93  debug('found module source plugin %o', moduleSourcePlugin)
94  if (!moduleSourcePlugin.appSrcs.includes(folderName)) {
95    moduleSourcePlugin.appSrcs.push(folderName)
96    debug('added folder %s to allowed sources', folderName)
97  }
98}
99
100module.exports = { addImageRedirect, allowModuleSourceInPlace }
101

Source: webpack-helpers.js

// @ts-check
const debug = require('debug')('@cypress/react')

/**
 * Note: modifies the input options object
 */
function addImageRedirect (webpackOptions) {
  if (!webpackOptions.module) {
    debug('webpack options has no "module"')

    return
  }

  if (!Array.isArray(webpackOptions.module.rules)) {
    debug('webpack module rules is not an array')

    return
  }

  debug('adding image redirect to %o', webpackOptions)

  // we need to handle static images and redirect them to
  // the existing files. Cypress has fallthrough static server
  // for anything like "/_root/<path>" which is perfect - because
  // importing a static image gives us that <path>!
  // insert our loader first before any built-in loaders kick in
  const loaderRules = webpackOptions.module.rules.find((rule) => {
    return Array.isArray(rule.oneOf)
  })

  const imageRedirectLoaderRule = {
    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
    loader: require.resolve('./redirect-image-resource'),
  }

  if (loaderRules) {
    debug('found oneOf rule %o', loaderRules.oneOf)
    debug('adding our static image loader')
    loaderRules.oneOf.unshift(imageRedirectLoaderRule)

    // while we are here, let's change file loader
    // to point it at the /__root/... path
    const fileLoader = loaderRules.oneOf[loaderRules.oneOf.length - 1]

    if (
      fileLoader &&
      fileLoader.loader &&
      fileLoader.loader.includes('file-loader')
    ) {
      if (fileLoader.options && fileLoader.options.name) {
        debug('setting file-loader to output /__root')
        fileLoader.options.name = '/__root/[path][name].[ext]'
        debug('file loader %o', fileLoader)
      }
    }
  } else {
    debug('could not find oneOf rules, inserting directly into rules')
    webpackOptions.module.rules.unshift(imageRedirectLoaderRule)
  }
}

/**
 * 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, webpackOptions) {
  if (!folderName) {
    return
  }

  if (!webpackOptions.resolve) {
    return
  }

  if (!Array.isArray(webpackOptions.resolve.plugins)) {
    return
  }

  const moduleSourcePlugin = webpackOptions.resolve.plugins.find((plugin) => {
    return Array.isArray(plugin.appSrcs)
  })

  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)
  }
}

module.exports = { addImageRedirect, allowModuleSourceInPlace }