Skip to content

symfony/stimulus-testing

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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/stimulus-testing/setup';
  1. Create a assets/jest.config.js file for Jest configuration:
module.exports = {
    'testRegex': 'test/.*\\.test.js',
    'setupFilesAfterEnv': ['./test/setup.js']
};
  1. 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/preset-env"],
    "plugins": ["@babel/plugin-proposal-class-properties"]
}
  1. 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
});