@dynatrace/strato-components-testing 0.85.70 → 0.85.100
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +93 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1 +1,93 @@
|
|
|
1
|
-
# Strato Components Testing
|
|
1
|
+
# Strato Components Testing
|
|
2
|
+
|
|
3
|
+
This package contains testing helpers for the `@dynatrace/strato-components` package.
|
|
4
|
+
|
|
5
|
+
> 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.
|
|
6
|
+
|
|
7
|
+
## Jest
|
|
8
|
+
|
|
9
|
+
### Config
|
|
10
|
+
|
|
11
|
+
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:
|
|
12
|
+
|
|
13
|
+
```js
|
|
14
|
+
const {
|
|
15
|
+
stratoPreset,
|
|
16
|
+
} = require('@dynatrace/strato-components-testing/jest/preset');
|
|
17
|
+
|
|
18
|
+
/** @type {import('jest').Config} */
|
|
19
|
+
module.exports = {
|
|
20
|
+
...stratoPreset,
|
|
21
|
+
// your config
|
|
22
|
+
...
|
|
23
|
+
// your per test setup
|
|
24
|
+
setupFilesAfterEnv: ["./jest.setup-env.ts"],
|
|
25
|
+
moduleNameMapper: {
|
|
26
|
+
...stratoPreset.moduleNameMapper,
|
|
27
|
+
// your other moduleNameMappers
|
|
28
|
+
},
|
|
29
|
+
};
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Setup
|
|
33
|
+
|
|
34
|
+
It also comes with a jest setup which will include mocks needed to test the `@dynatrace/strato-components` package. Call the setup function in your own setup file like this in `./jest.setup-env.ts`:
|
|
35
|
+
|
|
36
|
+
```ts
|
|
37
|
+
import { setup, clear } from '@dynatrace/strato-components-testing/jest';
|
|
38
|
+
import '@testing-library/jest-dom';
|
|
39
|
+
|
|
40
|
+
beforeAll(() => {
|
|
41
|
+
setup();
|
|
42
|
+
// your other mock setups
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
afterAll(() => {
|
|
46
|
+
clear();
|
|
47
|
+
// your other mock clears
|
|
48
|
+
});
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
You can also setup or clear individual mocks:
|
|
52
|
+
|
|
53
|
+
```ts
|
|
54
|
+
import {
|
|
55
|
+
setupScreenSizeMock,
|
|
56
|
+
clearScreenSizeMock,
|
|
57
|
+
} from '@dynatrace/strato-components-testing/jest';
|
|
58
|
+
|
|
59
|
+
// use where needed
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### Testing Helpers
|
|
63
|
+
|
|
64
|
+
This package also contains testing helpers.
|
|
65
|
+
|
|
66
|
+
#### What are testing helpers?
|
|
67
|
+
|
|
68
|
+
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`.
|
|
69
|
+
|
|
70
|
+
#### Usage
|
|
71
|
+
|
|
72
|
+
Please note that this testing package doesn't have helpers yet. Once there are helpers, you would use them like this:
|
|
73
|
+
|
|
74
|
+
```tsx
|
|
75
|
+
import {
|
|
76
|
+
render,
|
|
77
|
+
getTextInputHelper,
|
|
78
|
+
} from '@dynatrace/strato-components-testing/jest';
|
|
79
|
+
import { TextInput } from '@dynatrace/strato-components/forms';
|
|
80
|
+
|
|
81
|
+
it('test', async () => {
|
|
82
|
+
render(
|
|
83
|
+
<TextInput
|
|
84
|
+
aria-label="test input"
|
|
85
|
+
data-testid="text-input-test"
|
|
86
|
+
placeholder="Test input"
|
|
87
|
+
/>,
|
|
88
|
+
);
|
|
89
|
+
|
|
90
|
+
await getTextInputHelper('text-input-test').type('abc');
|
|
91
|
+
expect(getTextInputHelper('text-input-test').value).toEqual('abc');
|
|
92
|
+
});
|
|
93
|
+
```
|