How to use addImageRedirect method in Cypress

Best JavaScript code snippet using cypress

Run Cypress automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

add-image-redirect.js

Source: add-image-redirect.js Github

copy
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
Full Screen

webpack-helpers.js

Source: webpack-helpers.js Github

copy
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
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Cypress on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)