I ended up having to add react/jsx-runtime to external in the rollup.config.js

// rollup.config.js
import commonjs from 'rollup-plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import resolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';

export default [
  {
    input: 'src/Icons/index.ts',
    output: [
      {
        file: 'src/Icons/dist/index.js',
        format: 'cjs',
        exports: 'named',
        sourcemap: true,
      },
      {
        file: 'src/Icons/dist/index.es.js',
        format: 'es',
        exports: 'named',
        sourcemap: true,
      },
    ],
    external: [ 'react', 'react-is', 'react-router', 'react/jsx-runtime' ],
    plugins: [
      external(),
      resolve(),
      typescript({
        rollupCommonJSResolveHack: true,
        exclude: ['**/__tests__/**', '**/*.stories.*'],
        clean: true,
      }),
      commonjs({
        include: /node_modules/,
        namedExports: {
          'node_modules/react-js/index.js': ['isValidElementType'],
        },
      }),
    ],
  },
];

This is a late answer but you can achieve this by creating the variable in Plugins (https://docs.cypress.io/guides/guides/environment-variables#Option-5-Plugins)

Documentation states:

// .env file
USER_NAME=aTester

/

// plugins/index.js
require('dotenv').config()

module.exports = (on, config) => {
  // copy any needed variables from process.env to config.env
  config.env.username = process.env.USER_NAME

  // do not forget to return the changed config object!
  return config
}

// integration/spec.js
it('has username to use', () => {
  expect(Cypress.env('username')).to.be.a('string')
})

You can conditionally return different fixtures based on the response, using req.reply()

cy.intercept(
  'GET',
  '**/foo/*',
  (req) => {
    req.reply({
      status: 200,
      fixture: req.url.endsWith('/bar') ? 'bar.json' : 'foo.json'
    });
  });

In the above, we're doing a simple ternary to determine whether to return bar.json or foo.json. If there is more complicated logic, you could extract that part out to a constant above the req.reply().

You can use the Cypress.config() command.

To get baseUrl value use Cypress.config().baseUrl or Cypress.config('baseUrl').

I have updated our recipe for static resource loading, see https://github.com/cypress-io/cypress-example-recipes/pull/363

To check if an image has finished loading, the simplest way is to check the image's naturalWidth or naturalHeight property.

// we can wait for the <img> element to appear
// but the image has not been loaded yet.
cy.get('[alt="delayed image"]')
.should('be.visible')
.and(($img) => {
  // "naturalWidth" and "naturalHeight" are set when the image loads
  expect($img[0].naturalWidth).to.be.greaterThan(0)
})

Alternatively, you can use performance entries to confirm that any static resource has finished loading, see the above pull request for the details.

This is sadly currently not supported with cy.server.

The issue is being tracked here : https://github.com/cypress-io/cypress/issues/521

Workaround

Use standard javascript mocking. You can run this mocks in tests by using cypress onBeforeLoad, mentioned a few times in the linked issue. Its not pretty. Hopefully cypress gets native support in cy.server.

From cypress documentation here:

Any environment variable on your machine that starts with either CYPRESS_ or cypress_ will automatically be added and made available to you.

Conflicting values will override values from cypress.json and cypress.env.json files.

Cypress will strip off the CYPRESS_ when adding your environment variables.

Exporting cypress env variables from the command line:

export CYPRESS_HOST=laura.dev.local

export cypress_api_server=http://localhost:8888/api/v1/

If you're using Windows you can set env variables using set or setx commands.

And in your test files you can call this:

Cypress.env()             // {HOST: "laura.dev.local", api_server: "http://localhost:8888/api/v1"}
Cypress.env("HOST")       // "laura.dev.local"
Cypress.env("api_server") // "http://localhost:8888/api/v1/"

I just came across this article that explains how and why you store a variable and then use it later in the "Cypress way":

https://www.stevenhicks.me/blog/2020/02/working-with-variables-in-cypress-tests/

In respect to how it should work, here is my example which first, collects the message (the message is shown for only 3 secs then disappears). Secondly, it gets the value using the @ sign. Lastly my code passes the stored message through to an empty function constructed to assert that the value Portsmouth is contained within the message.

it('Current Port change', () => {
  cy.get('#viewport').find('div[id=message]').then(message => {
    let wags = message;
    cy.wrap(wags).as('wags')
  });

  cy.get('@wags').then(wags => {
     expect(wags).to.contain("Portsmouth")
  });
});

let me know if you need further clarification

You'll have to return the entire chain command of the subject you want to return.

Cypress.Commands.add('readContactInfo', (companyName) => {
  return cy.get('.simple-table__cell:nth-child(1)')
    .contains(companyName)
    .parent()
    // find command limited to previous subject
    .find('div')
    .eq(2)
    // will invoke .text() and return it
    .invoke('text')
})

Now whenever you use the custom command, the text will be returned.

cy.readContactInfo('Magazzini Alimentari Riuniti')
  .should('eq', 'text you want to verify here')