Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About

Get started


  • Guides

    • Get started for designers
    • Get started for developers

  • Resources

    • Design resources

  • Integration

    • Using Cloudscape components
    • Global styles

  • Development guides

    • Collection hooks package
    • Content security policy (CSP)
    • Responsive development
    • State management
    • Z-index
    • Built-in internationalization
    • Bidirectionality

  • Testing

    • Introduction to testing
    • Testing frameworks integration
    • Testing core classes
  1. Cloudscape Design System
    • Get started
    • Testing: Testing frameworks integration
    1. Cloudscape Design System
    2. Get started
    3. Testing: Testing frameworks integration

    Testing frameworks integration

    How to integrate different testing frameworks with Cloudscape components.

    Published: May 13, 2022

    On this page

    1. Using Vitest (recommended)
    2. Using Jest
    3. Using Mocha

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.

    Using Vitest (recommended)

    Our packages do not require any special configuration in this framework.

    For the best testing experience, we recommend combining vitest with the react testing library . After installing respective dependencies, create a testing setup file, tests/setup.js, for example:

    import { expect, afterEach } from 'vitest';
    import { cleanup } from '@testing-library/react';
    
    afterEach(() => {
      cleanup();
    });
    

    Update vite.config.js:

    export default defineConfig({
      // ... your other configuration ...
      test: {
        environment: "jsdom",
        setupFiles: ["./test/setup.js"],
      },
    });
    

    Common errors

    If you receive "SyntaxError: Cannot use import statement outside a module" error coming from our packages, it is likely there is a configuration error in an intermediate dependency. Check this vitest issue , and other similar issues , for more guidance.

    Using Jest

    Preset configuration

    To ensure the compatibility of your tests, you must use our configuration preset  when testing our components with Jest. For example, this preset fixes SyntaxError: Unexpected token 'export', which may occur in your tests.

    For integration instructions, see the package readme .

    Snapshot testing

    By design, our components are not meant to produce stable snapshots. This is because we constantly add new features and improvements. To protect your snapshots from unexpected changes, isolate your tests by mocking the components module.

    If you use main import path

    // in a file with snapshot tests
    jest.mock('@cloudscape-design/components-console', () => {
      const Components = jest.genMockFromModule('@cloudscape-design/components-console');
      for (const componentName of Object.keys(Components)) {
        Components[componentName] = componentName;
      }
      return Components;
    })
    

    If you use individual component imports

    Create a file component-mocks.js:

    // This has to be a separate file because Jest does not support for-loops in the mocks:
    // https://github.com/facebook/jest/issues/11063
    import kebabCase from 'lodash/kebabCase';
    const Components = jest.requireActual('@cloudscape-design/components-console');
    for (const mockComponentName of Object.keys(Components)) {
      jest.mock(`@cloudscape-design/components-console/${kebabCase(mockComponentName).replace('s-3', 's3')}`, () => mockComponentName);
    }
    

    Import it in the test file:

    // this line must be above the source code import
    import './component-mocks';
    import YourComponent from './your-code';
    

    Using Mocha

    Configure require hooks

    Our components are only provided in ES-module format, which requires some preliminary setup. Create a setup.js file and load it to Mocha using the --require option :

    require('ignore-styles');
    require('@babel/register')({
      only: [/node_modules\/@cloudscape-design\//],
      ignore: [/test-utils/],
      plugins: [require.resolve('@babel/plugin-transform-modules-commonjs')],
      sourceMap: 'inline',
    });
    

    The modules used in this file may not be installed in your project. Install them if needed.

    Configure JSDOM

    Mocha does not provide a simulated DOM environment. However, you can get it using global-jsdom  module. Add this line to your setup file:

    require('global-jsdom')(undefined, { pretendToBeVisual: true });
    

    pretendToBeVisual flag is needed to enable a shim for requestAnimationFrame, which is a requirement for React .

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.
    • About
    • Connect
    • Privacy 
    • Site terms 
    • © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved.
    Made with love atAWS