Symfony UX Stimulus testing

Symfony UX Stimulus testing is a low-level package to help write tests for Stimulus controllers in applications and reusable packages.

Symfony UX Stimulus testing is currently considered experimental.

Installation

yarn add @symfony/stimulus-testing

Usage

Symfony UX Stimulus testing ships several tools to help write tests for Stimulus controllers:

• it uses Jest as test runner ;
• it relies internally on jsdom and mutationobserver-shim to emulate a DOM implementation and allow to execute Stimulus controllers in the console ;
• it provides an integration of Testing Library ;
• it provides helper functions to ease Stimulus tests development in Symfony projects and bundles ;

To start using Symfony UX Testing, you first need to configure a testing environment:

1. Create a assets/test directory ;

2. Create a assets/test/setup.js file to initialize Symfony UX Testing:

import '@symfony/ux-testing/setup';

3. Create a assets/jest.config.js file for Jest configuration:

module.exports = {
    'testRegex': 'test/.*\\.test.js',
    'setupFilesAfterEnv': ['./test/setup.js']
};

4. Create a assets/.babelrc file for Babel configuration (you may need to install Babel, @babel/plugin-proposal-class-properties and @babel/preset-env if you haven't already):

{
    "presets": ["@babel/env"],
    "plugins": ["@babel/plugin-proposal-class-properties"]
}

5. Finally, create your first test, for instance hello_controller.test.js:

import { Application } from '@hotwired/stimulus';
import { clearDOM, mountDOM } from '@symfony/stimulus-testing';
import HelloController from '../controllers/hello_controller.js';

const startStimulus = () => {
    const application = Application.start();
    application.register('hello', HelloController);
};

describe('HelloController', () => {
    let container;

    beforeEach(() => {
        container = mountDOM('<div data-controller="hello"></div>');
    });

    afterEach(() => {
        clearDOM();
    });

    it('connect', async () => {
        startStimulus();

        // Write a test here ...
    });

    // You can create other tests here
});