wdio-lwc-service
The wdio-lwc-service
wires up WebdriverIO (WDIO) for testing Lightning web components. Integration tests run in the browser context unlike unit tests, so keep tests focused on interactions.
Learn more about Lightning Web Components at lwc.dev.
Installation
Along with installing wdio-lwc-service
, there are several other modules required in package.json
.
wdio-lwc-service
Install npm install wdio-lwc-service --save-dev
package.json
Update If you used npx lwc-create-app
to initialize your project you'll have different dependencies.
Using lwc-create-app
Click to Expand: package.json
for use with lwc-services
Existing Package.json
Click to Expand: package.json
Install Jasmine
Jasmine framework provides test methods to run your integration tests.
npm install @wdio/jasmine-framework --save-dev
Examples are written for Jasmine, but you can use another test framework like Mocha.
Configuration
Next, let's create a wdio.conf.js
file in the root of your project. We recommend to copy the file from examples/basic/wdio.conf.js
in this repo.
Append wdio-lwc-service
to the start of your services array.
// wdio.conf.js
const lwcService = require('wdio-lwc-service');
exports.config = {
// ...
specs: [
'src/**/__wdio__/*.spec.js'
],
exclude: [],
services: [
'selenium-standalone',
[lwcService, {}]
],
// ...
};
Append to the list of scripts in package.json
. This will allow us to run npm run test:wdio
later on.
lwc-create-app
For {
"scripts: {
...,
"test:wdio": "lwc-services test:wdio"
}
}
lwc-create-app
Or without {
"scripts: {
...,
"test:wdio": "wdio"
}
}
ESLint
Your code editor, depending on its configuration, may underline WDIO specific globals in red. To fix this, we need to install the ESLint WDIO plugin.
npm install eslint-plugin-wdio --save-dev
/.eslintrc.json
{
"plugins": [
"wdio"
],
"extends": [
...
"plugin:wdio/recommended"
],
}
Options
Rollup Plugins
The rollup.js library is used for bundling. Since each test is built from scratch Rollup needs context about any plugins you are using.
Type: Array
Default: []
Example:
// wdio.conf.js
const lwcService = require('wdio-lwc-service');
exports.config = {
// ...
services: [
[lwcService, {
plugins: [
labelsResolver(),
]
}]
],
// ...
};
Getting Started
Now that setup is done, let's look at how an integration test can be written. In this example, we're going to verify our component triggers an event.
- Focus our component
<c-search value="foo" onsearch={handleEnter}>
. - Set value to
foobar
. - Press Enter Key
- Assert
<div>
contents are set.
/src/modules /c (namespace) /search (component) /search.js /search.html /__wdio__ /search.spec.js /integration (namespace) /search (spec component) /search.js /search.html /another (another namespace) /helper (component)
This example does not use additional namespaces, but are illustrated above if an integration test requires them.
Component
The search component below offers an input box that wires up an onsearch
event handler.
src/modules/search/search.html
Search
src/modules/search/search.js
; @api value = ""; { thisvalue = eventtargetvalue; } { if eventkey === "Enter" this; } { this; }
Integration Test
Jasmine is used in the integration tests below.
src/modules/search/__wdio__/integrations/search.html
Searched: {searched}
src/modules/search/__wdio__/integrations/search.js
; @track value = "foo"; @track searched = ""; { thissearched = eventtargetvalue; }
src/modules/search/__wdio__/search.spec.js
;
Below is a quick list explaining the methods above.
browser.url
Navigates the page to the test.$
Fetches a single element with a query selector.element.setValue
Focuses element and inputs value.element.getText
Gets visible text.browser.keys
Simulates key presses.browser.debug();
Triggers a breakpoint. Use the console to view variables and continue execution.
Now execute your tests with the script you added earlier in package.json
.
npm run test:wdio
Help
For any questions on integration testing please ask on the Salesforce Stackexchange and tag it with lightning-web-components
.