mirror of
https://github.com/symfony/stimulus-testing.git
synced 2026-03-24 09:02:06 +01:00
Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
2dd8302c75 | ||
|
|
17420a4b7c | ||
|
|
07d2209dd5 | ||
|
|
7194dc04c9 | ||
|
|
25bca2c62e | ||
|
|
0438da3771 | ||
|
|
9588a2bde0 | ||
|
|
edd246b564 | ||
|
|
cc5151bde1 | ||
|
|
b79342d6c4 |
47
README.md
47
README.md
@@ -1,5 +1,48 @@
|
||||
# Symfony UX Stimulus testing
|
||||
|
||||
> [!WARNING]
|
||||
> **Deprecated**: This package is deprecated and will not receive any further updates.
|
||||
|
||||
Because this package only provides very small helpers to help write tests for Stimulus controllers, and is tightly coupled with [Jest](https://jestjs.io/), [jsdom](https://github.com/jsdom/jsdom) and [Testing Library](https://testing-library.com/) dependencies, we can no longer recommend it.
|
||||
|
||||
In 2025, we cannot force developers to install Jest (and [~270 sub-dependencies](https://npmgraph.js.org/?q=jest) including [Babel](https://babeljs.io/)) and the like, since [many test runners exist](https://npmtrends.com/ava-vs-japa-vs-jasmine-vs-jest-vs-karma-vs-mocha-vs-tap-vs-vitest), and many of them are more modern and much faster, like [Vitest](https://vitest.dev/).
|
||||
|
||||
We want to give you the choice to use the best tools for your needs, and not force you to use what we suggested in the past.
|
||||
|
||||
To migrate from `@symfony/stimulus-testing`, you can follow these steps:
|
||||
|
||||
1. Install the dev dependencies `@testing-library/jest-dom @testing-library/dom`;
|
||||
you may also want to install `mutationobserver-shim regenerator-runtime` if you still have
|
||||
legacy code or _architecture_.
|
||||
2. In the file `assets/test/setup.js`, replace imports:
|
||||
```diff
|
||||
-import '@symfony/stimulus-testing/setup';
|
||||
+import '@testing-library/jest-dom';
|
||||
```
|
||||
3. Create the file `assets/test/stimulus-helpers.js` with the following content:
|
||||
```js
|
||||
export function mountDOM(html = '') {
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = html;
|
||||
document.body.appendChild(div);
|
||||
|
||||
return div;
|
||||
}
|
||||
|
||||
export function clearDOM() {
|
||||
document.body.innerHTML = '';
|
||||
}
|
||||
```
|
||||
4. In your tests files, replace imports for `mountDOM` and `clearDOM`:
|
||||
```diff
|
||||
// assets/test/controllers/hello_controller.test.js
|
||||
-import { clearDOM, mountDOM } from '@symfony/stimulus-testing';
|
||||
+import { clearDOM, mountDOM } from '../stimulus-helpers';
|
||||
```
|
||||
5. And finally, remove the `@symfony/stimulus-testing` dependency from your project.
|
||||
|
||||
---
|
||||
|
||||
Symfony UX Stimulus testing is a low-level package to help write tests for Stimulus controllers
|
||||
in applications and reusable packages.
|
||||
|
||||
@@ -28,7 +71,7 @@ To start using Symfony UX Testing, you first need to configure a testing environ
|
||||
2. Create a `assets/test/setup.js` file to initialize Symfony UX Testing:
|
||||
|
||||
```js
|
||||
import '@symfony/ux-testing/setup';
|
||||
import '@symfony/stimulus-testing/setup';
|
||||
```
|
||||
|
||||
3. Create a `assets/jest.config.js` file for Jest configuration:
|
||||
@@ -45,7 +88,7 @@ module.exports = {
|
||||
|
||||
```json
|
||||
{
|
||||
"presets": ["@babel/env"],
|
||||
"presets": ["@babel/preset-env"],
|
||||
"plugins": ["@babel/plugin-proposal-class-properties"]
|
||||
}
|
||||
```
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@symfony/stimulus-testing",
|
||||
"description": "@testing-library integration for Symfony UX",
|
||||
"version": "2.0.0",
|
||||
"version": "2.1.0",
|
||||
"main": "src/index.js",
|
||||
"license": "MIT",
|
||||
"author": "Titouan Galopin <galopintitouan@gmail.com>",
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
'use strict';
|
||||
|
||||
const mountDOM = (htmlString = '') => {
|
||||
module.exports.mountDOM = (htmlString = '') => {
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = htmlString;
|
||||
document.body.appendChild(div);
|
||||
@@ -17,8 +17,6 @@ const mountDOM = (htmlString = '') => {
|
||||
return div;
|
||||
};
|
||||
|
||||
const clearDOM = () => {
|
||||
module.exports.clearDOM = () => {
|
||||
document.body.innerHTML = '';
|
||||
};
|
||||
|
||||
export { clearDOM, mountDOM };
|
||||
|
||||
Reference in New Issue
Block a user