diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.tests.js
index 4d188c198104..a6c04e206e06 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.tests.js
@@ -48,6 +48,14 @@ const TABS_ICON_POSITION_CLASS = {
     bottom: 'dx-tabs-icon-position-bottom',
     start: 'dx-tabs-icon-position-start',
 };
+const TABS_STYLING_MODE_CLASS = {
+    primary: 'dx-tabs-styling-mode-primary',
+    secondary: 'dx-tabs-styling-mode-secondary',
+};
+const STYLING_MODE = {
+    primary: 'primary',
+    secondary: 'secondary',
+};
 const TABS_WRAPPER_CLASS = 'dx-tabs-wrapper';
 const TABS_NAV_BUTTON_CLASS = 'dx-tabs-nav-button';
 const TABS_NAV_BUTTONS_CLASS = 'dx-tabs-nav-buttons';
@@ -318,6 +326,19 @@ QUnit.module('General', () => {
             assert.ok($element.hasClass(TABS_ICON_POSITION_CLASS[iconPosition]));
         });
     });
+
+    QUnit.test('the tabs element must have a correct styling mode class', function(assert) {
+        const $element = $('#tabs').dxTabs({ items: [1, 2, 3] });
+        const instance = $element.dxTabs('instance');
+
+        assert.strictEqual(instance.option('stylingMode'), STYLING_MODE.primary);
+        assert.strictEqual($element.hasClass(TABS_STYLING_MODE_CLASS.primary), true);
+
+        instance.option({ stylingMode: 'secondary' });
+
+        assert.strictEqual(instance.option('stylingMode'), STYLING_MODE.secondary);
+        assert.strictEqual($element.hasClass(TABS_STYLING_MODE_CLASS.secondary), true);
+    });
 });
 
 QUnit.module('Tab select action', () => {