Strato Components Preview Testing (Deprecated)

::: A simpler way to use Strato

We’re unifying our component packages to make development smoother and more predictable. Switch to strato-components and strato-components-testing. See the release notes for more details.

:::

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

This package contains setup support for the @dynatrace/strato-components-preview and @dynatrace/strato-components packages. Testing helpers for components in @dynatrace/strato-components are in the @dynatrace/strato-components-testing package.

Jest

Config

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

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

/** @type {import('jest').Config} */
module.exports = {
  ...stratoPreset,
  // your config
  ...
  setupFilesAfterEnv: [
    '@dynatrace/strato-components-preview-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-preview-testing/jest/setup, which you configured above.

But you can also setup or clear individual mocks:

import {
  setupScreenSizeMock,
  clearScreenSizeMock,
} from '@dynatrace/strato-components-preview-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

import {
  render,
  getTextInputHelper,
} from '@dynatrace/strato-components-preview-testing/jest';
import { TextInput } from '@dynatrace/strato-components-preview/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');
});