jest-environment-ui5
A Jest test environment named ui5 that boots UI5 from a local HTML file into jsdom, so UI5 unit tests run in Node.js with no web server and no browser.
UI5 code needs the UI5 runtime in the page before a unit test can touch it, which is why such tests usually run in a browser. This package registers a Jest environment named ui5 that boots UI5 from a local HTML file and emulates the browser with jsdom. It is selected with testEnvironment: "ui5" in jest.config.js, where testEnvironmentOptions take the HTML file's path and the UI5 load timeout (default 100 ms), or per test file with a @jest-environment ui5 docblock. It covers unit tests that run in jsdom and does not drive a real browser. The Vitest counterpart by the same author is vitest-environment-ui5vitest-environment-ui5A Vitest environment named ui5 that boots UI5 from a local HTML file into jsdom, so UI5 unit tests run in Node.js with no web server and no browser.independent, ui5.
Facts
Where it sits
Who is behind it
In the atlas: maintains 16, contributes to 41, wrote 4@mauriciolauffermaintainer
What it declares
Every artifact
- Type
- Package
- Origin
- Independently maintained
- Runtime
- Node.js
As a package
- Where it runs
- does not say
- Distributed through
- npm
Connections
Unit, integration and end-to-end tests for UI5 apps
Download
Install
npm add jest-environment-ui5Derived from the package name. No recipe recorded; the README has the configuration.
README
quoted from mauriciolauffer/jest-environment-ui5 under MIT, readjest-environment-ui5
A Jest Test Environment for unit testing UI5 code. Run your unit tests in a blazing fast way! Neither webserver nor browser are required. It runs in Node.js and uses jsdom to emulate browser environment.
See Jest Test Environment and jsdom for more details.
Installation
Install jest-environment-ui5, and jest, as devDependencies:
$ npm i -D jest jest-environment-ui5
Setup
Jest uses node as default test environment. In order to change it to a different environment, jest-environment-ui5, we will either have to define it in jest.config.js or add a Jest Test Environment docblock at the top of the test file. See Jest Config for more details.
jest-environment-ui5 builds jsdom from a local HTML file, no webserver required. The HTML file should contain the UI5 bootstrap, similar to this one: ui5 bootstrap.
You can change the UI5 bootstrap configuration as you wish, just like in your webapp. You can even open the file in a browser to see UI5 being loaded. However, no tests will be executed.
jest Configuration
import type {Config} from 'jest';
const config: Config = {
testEnvironment: "ui5",
testEnvironmentOptions: {
ui5: {
path: "test/ui5-unit-test.html", // Path to the HTML file containing UI5 bootstrap
timeout: 200, // UI5 load timeout in ms, default is 100ms
},
},
};
jest DocBlock
/**
* @jest-environment ui5
* @jest-environment-options { "path": "test/ui5-unit-test.html" }
*/
test("UI5 is loaded", () => {
expect(window.sap).toBeTruthy();
expect(sap).toBeTruthy();
expect(sap.ui.getCore()).toBeTruthy();
expect(sap.ui.version).toBeTruthy();
});
Run
Run the tests with Jest CLI:
$ jest
Don't be afraid
jsdom is not a real browser, but gets the job done for unit testing. All major javascript frameworks use it today: React, Vue, Svelte, and even our old friend jQuery. It has over 20M weekly downloads in NPM!
This package simplifies what was introduced in the blog post Modern JavaScript testing frameworks with Fiori/UI5 – Jest
Author
Mauricio Lauffer
License
This project is licensed under the MIT License - see the LICENSE file for details.
History
Others providing
Compare all 14 on the UI5 testing page →- ui5-test-runnerui5-test-runnerA standalone command line that runs a UI5 project's QUnit and OPA test pages in parallel browser instances, written for suites too large for one browser, and merges their coverage into one report.independent, ui5Command line running UI5 QUnit and OPA tests in parallel
- ui5-middleware-odata-recorderui5-middleware-odata-recorderA UI5 server middleware that records the OData traffic a running app makes against a real backend and writes entity JSON files and metadata.xml that the Fiori elements mock server can replay.independent, ui5UI5 middleware recording OData traffic as mock server datasets
- openui5-smart-mockserveropenui5-smart-mockserverAn extended UI5 MockServer that generates meaningful mock data with Faker.js, from the metadata's sap:semantics annotations or from rules that map an OData property to a Faker method.independent, ui5UI5 MockServer extension generating mock data with Faker.js
- vitest-environment-ui5vitest-environment-ui5A Vitest environment named ui5 that boots UI5 from a local HTML file into jsdom, so UI5 unit tests run in Node.js with no web server and no browser.independent, ui5Vitest environment running UI5 unit tests in Node.js
- wdio-qunit-servicewdio-qunit-serviceA WebdriverIO service that runs QUnit HTML test pages in a browser and reports the results as WebdriverIO test suites, presented as a drop-in replacement for Karma-based QUnit setups.independent, ui5WebdriverIO service running QUnit test pages
- @openui5/sap.ui.core@openui5/sap.ui.coreThe OpenUI5 core: the module loader, the MVC runtime, data binding, routing, theming and the test stack, which is everything a UI5 app does before a single community package is added.sap official, ui5Framework core: module loader, MVC runtime, binding, routing, theming
- karma-ui5-transpilekarma-ui5-transpileA Karma preprocessor that transpiles a UI5 project's sources with the ui5-tooling-transpile configuration in its ui5.yaml.community org, ui5Karma preprocessor transpiling UI5 sources via ui5-tooling-transpile
- ui5-journey-recorderui5-journey-recorderA Chrome extension that records clicks and inputs against a running UI5 app and generates OPA5 or wdi5 end-to-end test code from the recorded journey.community org, ui5Chrome extension generating OPA5 or wdi5 tests from recorded journeys
- wdi5-cucumberwdi5-cucumberA wdi5 plugin that extends wdi5's end-to-end testing with Cucumber-style BDD scenarios, run against UI5 Fiori Elements apps.community org, ui5wdi5 plugin for Cucumber-style BDD tests on Fiori Elements apps
- wdi5-fe-selectorswdi5-fe-selectorsA set of wdi5-flavoured control selectors tuned for locating controls in Fiori Elements apps, extending the selectors wdi5 itself provides.community org, ui5wdi5 selectors for locating controls in Fiori Elements apps
- wdio-ui5-servicewdio-ui5-serviceEnd-to-end testing for UI5 as a WebdriverIO service that drives a real browser through UI5's own test API, so a test addresses controls with OPA5-compatible selectors rather than DOM nodes.community org, ui5End-to-end testing for UI5 on WebdriverIO with UI5 control selectors
- @ui5/middleware-code-coverage@ui5/middleware-code-coverageUI5 CLI server middleware that instruments a project's JavaScript files with Istanbul as the dev server sends them, and generates the coverage report from the records the OpenUI5 QUnit tests send back.sap official, ui5UI5 CLI middleware for Istanbul code coverage
- vscode-ui5-odata-mock-generatorvscode-ui5-odata-mock-generatorVS Code extension that generates JSON mock data files for an OData service from its metadata, with faker.js values, per-set sizes, value lists and values tied to other properties.independent, ui5VS Code extension generating OData mock data from service metadata
Details
Sources
Sources are graph entities: the same page may back several entries, and an unreachable source flags every row that rests on it.
Compatibility and provenance
History in the atlas
- First seen.
For your agent
- Ref
artifact:mauriciolauffer-jest-environment-ui5- JSON
- /artifacts/mauriciolauffer-jest-environment-ui5.json
- MCP
- Connecting an agent