This package provides utilities to use App Config with Cypress.io.
Install:
yarn add -D @app-config/cypressAdd to ./cypress/support/index.js:
require('@app-config/cypress').register();In your integration tests:
// this import will import the types for setAppConfig!
import '@app-config/cypress';
describe('Config Loading', () => {
it('should mock the configuration value', () => {
cy.setAppConfig({
foo: 'https://overwritten.com',
bar: 'some configuration value',
});
// be sure to setAppConfig before calling visit()
cy.visit('/');
});
});Use the Webpack Preprocessor with the App Config Plugin.
Cypress only allows one preprocessor at once, so we can't provide a preprocessor to do this.
Example ./cypress/plugins/index.js:
const webpackPreprocessor = require('@cypress/webpack-preprocessor');
const { default: AppConfigPlugin } = require('@app-config/webpack');
module.exports = (on) => {
const options = {
webpackOptions: {
mode: 'development',
module: {
rules: [
{ test: AppConfigPlugin.regex, use: { loader: AppConfigPlugin.loader } },
{
test: /\.jsx?$/,
exclude: [/node_modules/],
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
],
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
plugins: [new AppConfigPlugin()],
},
};
on('file:preprocessor', webpackPreprocessor(options));
};This allows you to use @app-config/main imports in your tests, hassle free.