diff --git a/src/components/views/auth/LoginWithQR.tsx b/src/components/views/auth/LoginWithQR.tsx
index f95e618cc5..3d3f76be95 100644
--- a/src/components/views/auth/LoginWithQR.tsx
+++ b/src/components/views/auth/LoginWithQR.tsx
@@ -370,7 +370,7 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
         }
 
         return (
-            <div className="mx_LoginWithQR">
+            <div data-testid="login-with-qr" className="mx_LoginWithQR">
                 <div className={centreTitle ? "mx_LoginWithQR_centreTitle" : ""}>
                     { backButton ?
                         <AccessibleButton
diff --git a/test/components/views/settings/devices/__snapshots__/LoginWithQR-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/LoginWithQR-test.tsx.snap
index 91fe73abf4..b851a2c686 100644
--- a/test/components/views/settings/devices/__snapshots__/LoginWithQR-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/LoginWithQR-test.tsx.snap
@@ -4,6 +4,7 @@ exports[`<LoginWithQR /> approves login and waits for new device 1`] = `
 <div>
   <div
     class="mx_LoginWithQR"
+    data-testid="login-with-qr"
   >
     <div
       class=""
@@ -61,6 +62,7 @@ exports[`<LoginWithQR /> displays confirmation digits after connected to rendezv
 <div>
   <div
     class="mx_LoginWithQR"
+    data-testid="login-with-qr"
   >
     <div
       class=""
@@ -122,6 +124,7 @@ exports[`<LoginWithQR /> displays error when approving login fails 1`] = `
 <div>
   <div
     class="mx_LoginWithQR"
+    data-testid="login-with-qr"
   >
     <div
       class="mx_LoginWithQR_centreTitle"
@@ -168,6 +171,7 @@ exports[`<LoginWithQR /> displays qr code after it is created 1`] = `
 <div>
   <div
     class="mx_LoginWithQR"
+    data-testid="login-with-qr"
   >
     <div
       class=""
@@ -232,6 +236,7 @@ exports[`<LoginWithQR /> displays unknown error if connection to rendezvous fail
 <div>
   <div
     class="mx_LoginWithQR"
+    data-testid="login-with-qr"
   >
     <div
       class="mx_LoginWithQR_centreTitle"
@@ -278,6 +283,7 @@ exports[`<LoginWithQR /> no content in case of no support 1`] = `
 <div>
   <div
     class="mx_LoginWithQR"
+    data-testid="login-with-qr"
   >
     <div
       class="mx_LoginWithQR_centreTitle"
@@ -324,6 +330,7 @@ exports[`<LoginWithQR /> renders spinner while generating code 1`] = `
 <div>
   <div
     class="mx_LoginWithQR"
+    data-testid="login-with-qr"
   >
     <div
       class=""
diff --git a/test/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx b/test/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx
index 3497f2f161..3fc250facc 100644
--- a/test/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx
+++ b/test/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 
 import SecurityUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/SecurityUserSettingsTab";
@@ -26,6 +26,7 @@ import {
     mockClientMethodsCrypto,
     mockClientMethodsDevice,
     mockPlatformPeg,
+    flushPromises,
 } from '../../../../../test-utils';
 
 describe('<SecurityUserSettingsTab />', () => {
@@ -42,6 +43,12 @@ describe('<SecurityUserSettingsTab />', () => {
         ...mockClientMethodsCrypto(),
         getRooms: jest.fn().mockReturnValue([]),
         getIgnoredUsers: jest.fn(),
+        getVersions: jest.fn().mockResolvedValue({
+            unstable_features: {
+                'org.matrix.msc3882': true,
+                'org.matrix.msc3886': true,
+            },
+        }),
     });
 
     const getComponent = () =>
@@ -70,4 +77,34 @@ describe('<SecurityUserSettingsTab />', () => {
 
         expect(queryByTestId('devices-section')).toBeFalsy();
     });
+
+    it('does not render qr code login section when disabled', () => {
+        settingsValueSpy.mockReturnValue(false);
+        const { queryByText } = render(getComponent());
+
+        expect(settingsValueSpy).toHaveBeenCalledWith('feature_qr_signin_reciprocate_show');
+
+        expect(queryByText('Sign in with QR code')).toBeFalsy();
+    });
+
+    it('renders qr code login section when enabled', async () => {
+        settingsValueSpy.mockImplementation(settingName => settingName === 'feature_qr_signin_reciprocate_show');
+        const { getByText } = render(getComponent());
+
+        // wait for versions call to settle
+        await flushPromises();
+
+        expect(getByText('Sign in with QR code')).toBeTruthy();
+    });
+
+    it('enters qr code login section when show QR code button clicked', async () => {
+        settingsValueSpy.mockImplementation(settingName => settingName === 'feature_qr_signin_reciprocate_show');
+        const { getByText, getByTestId } = render(getComponent());
+        // wait for versions call to settle
+        await flushPromises();
+
+        fireEvent.click(getByText('Show QR code'));
+
+        expect(getByTestId("login-with-qr")).toBeTruthy();
+    });
 });
diff --git a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
index 7826b3cc80..e9dd352903 100644
--- a/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
+++ b/test/components/views/settings/tabs/user/SessionManagerTab-test.tsx
@@ -34,6 +34,7 @@ import {
 import SessionManagerTab from '../../../../../../src/components/views/settings/tabs/user/SessionManagerTab';
 import MatrixClientContext from '../../../../../../src/contexts/MatrixClientContext';
 import {
+    flushPromises,
     flushPromisesWithFakeTimers,
     getMockClientWithEventEmitter,
     mkPusher,
@@ -47,6 +48,7 @@ import {
     ExtendedDevice,
 } from '../../../../../../src/components/views/settings/devices/types';
 import { INACTIVE_DEVICE_AGE_MS } from '../../../../../../src/components/views/settings/devices/filter';
+import SettingsStore from '../../../../../../src/settings/SettingsStore';
 
 mockPlatformPeg();
 
@@ -1142,4 +1144,50 @@ describe('<SessionManagerTab />', () => {
 
         expect(checkbox.getAttribute('aria-checked')).toEqual("false");
     });
+
+    describe('QR code login', () => {
+        const settingsValueSpy = jest.spyOn(SettingsStore, 'getValue');
+
+        beforeEach(() => {
+            settingsValueSpy.mockClear().mockReturnValue(false);
+            // enable server support for qr login
+            mockClient.getVersions.mockResolvedValue({
+                versions: [],
+                unstable_features: {
+                    'org.matrix.msc3882': true,
+                    'org.matrix.msc3886': true,
+                },
+            });
+        });
+
+        it('does not render qr code login section when disabled', () => {
+            settingsValueSpy.mockReturnValue(false);
+            const { queryByText } = render(getComponent());
+
+            expect(settingsValueSpy).toHaveBeenCalledWith('feature_qr_signin_reciprocate_show');
+
+            expect(queryByText('Sign in with QR code')).toBeFalsy();
+        });
+
+        it('renders qr code login section when enabled', async () => {
+            settingsValueSpy.mockImplementation(settingName => settingName === 'feature_qr_signin_reciprocate_show');
+            const { getByText } = render(getComponent());
+
+            // wait for versions call to settle
+            await flushPromises();
+
+            expect(getByText('Sign in with QR code')).toBeTruthy();
+        });
+
+        it('enters qr code login section when show QR code button clicked', async () => {
+            settingsValueSpy.mockImplementation(settingName => settingName === 'feature_qr_signin_reciprocate_show');
+            const { getByText, getByTestId } = render(getComponent());
+            // wait for versions call to settle
+            await flushPromises();
+
+            fireEvent.click(getByText('Show QR code'));
+
+            expect(getByTestId("login-with-qr")).toBeTruthy();
+        });
+    });
 });