Strato Components Testing

This package contains testing helpers for the @dynatrace/strato-components package.

This package only contains setup support for the @dynatrace/strato-components package. If you are also using components from @dynatrace/strato-components-preview, please use @dynatrace/strato-components-preview-testing for the setup and only import the testing helpers for the @dynatrace/strato-components components from this package.

Jest

Config

This testing package contains a jest preset which will configure jest to work with the @dynatrace/strato-components package. You can add the preset in your jest.config.js file like this:

const {
  stratoPreset,
} = require('@dynatrace/strato-components-testing/jest/preset');

/** @type {import('jest').Config} */
module.exports = {
  ...stratoPreset,
  // your config
  ...
  // your per test setup
  setupFilesAfterEnv: [
    '@dynatrace/strato-components-testing/jest/setup',
  // your per test setup
    "./jest.setup-env.ts"
  ],
  moduleNameMapper: {
    ...stratoPreset.moduleNameMapper,
    // your other moduleNameMappers
  },
};

Setup

The setup is handled in @dynatrace/strato-components-testing/jest/setup, which you configured above.

But you can also setup or clear individual mocks:

import {
  setupScreenSizeMock,
  clearScreenSizeMock,
} from '@dynatrace/strato-components-testing/jest';

// use where needed

Testing Helpers

This package also contains testing helpers.

What are testing helpers?

Testing helpers are functions that help you select and interact with components in tests, so you don’t have to rely on the component’s dom, like role, label, or test-id.

Usage

Please note that this testing package doesn't have helpers yet. Once there are helpers, you would use them like this:

import {
  render,
  getTextInputHelper,
} from '@dynatrace/strato-components-testing/jest';
import { TextInput } from '@dynatrace/strato-components/forms';

it('test', async () => {
  render(
    <TextInput
      aria-label="test input"
      data-testid="text-input-test"
      placeholder="Test input"
    />,
  );

  await getTextInputHelper('text-input-test').type('abc');
  expect(getTextInputHelper('text-input-test').value).toEqual('abc');
});