Examples of how to test Stencil Components using Jest and Puppeteer

Examples of how to test Stencil components... both what works and doesn't!

EventEmitter

✅ can assert events have been raised

Methods

✅ can call methods on elements

Props

✅ can set props on element

✅ can change prop value

Snapshots

📷 can use snapshots

Added bonus!

For VSCode users checkout launch.json for debugging tests

{
    "version": "0.2.0",
    "configurations": [{
            "type": "node",
            "request": "launch",
            "name": "E2E Test Current File",
            "cwd": "${workspaceFolder}",
            "program": "${workspaceFolder}/node_modules/.bin/stencil",
            "args": ["test", "--e2e", "${relativeFile}"],
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "disableOptimisticBPs": true,
            "skipFiles": [
                "${workspaceFolder}/node_modules/**/*.js",
                "<node_internals>/**/*.js"
            ]
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Spec Test Current File",
            "cwd": "${workspaceFolder}",
            "program": "${workspaceFolder}/node_modules/.bin/stencil",
            "args": ["test", "--spec", "${relativeFile}"],
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "disableOptimisticBPs": true,
            "skipFiles": [
                "${workspaceFolder}/node_modules/**/*.js",
                "<node_internals>/**/*.js"
            ]
        }
    ]
}