diff --git a/packages/components/src/internal/components/domainproperties/LookupFieldOptions.spec.tsx b/packages/components/src/internal/components/domainproperties/LookupFieldOptions.spec.tsx
deleted file mode 100644
index 8d5d53b9e7..0000000000
--- a/packages/components/src/internal/components/domainproperties/LookupFieldOptions.spec.tsx
+++ /dev/null
@@ -1,517 +0,0 @@
-import React from 'react';
-import { mount, ReactWrapper } from 'enzyme';
-
-import { MockLookupProvider } from '../../../test/MockLookupProvider';
-
-import { createFormInputId, createFormInputName } from './utils';
-import {
-    DOMAIN_FIELD_FULLY_LOCKED,
-    DOMAIN_FIELD_LOOKUP_CONTAINER,
-    DOMAIN_FIELD_LOOKUP_QUERY,
-    DOMAIN_FIELD_LOOKUP_SCHEMA,
-    DOMAIN_FIELD_NOT_LOCKED,
-    DOMAIN_FIELD_PARTIALLY_LOCKED,
-    INT_RANGE_URI,
-} from './constants';
-import { DomainField } from './models';
-import {
-    FolderSelect,
-    FolderSelectProps,
-    IFolderSelectImplState,
-    ISchemaSelectImplState,
-    ITargetTableSelectImplState,
-    SchemaSelect,
-    SchemaSelectProps,
-    TargetTableSelect,
-    TargetTableSelectProps,
-} from './Lookup/Fields';
-import { LookupFieldOptions } from './LookupFieldOptions';
-import { PropDescType } from './PropDescType';
-
-describe('LookupFieldOptions', () => {
-    const waitForLoad = jest.fn(field => Promise.resolve(!field.state().loading));
-
-    // Helper methods to select fields
-    const folderFieldSelector = (
-        field: ReactWrapper<any>,
-        domainIndex: number,
-        index: number
-    ): ReactWrapper<FolderSelectProps, IFolderSelectImplState> => {
-        return field
-            .find({
-                id: createFormInputId(DOMAIN_FIELD_LOOKUP_CONTAINER, domainIndex, index),
-                name: createFormInputName(DOMAIN_FIELD_LOOKUP_CONTAINER),
-            })
-            .not({ bsClass: 'form-control' })
-            .not({ className: 'form-control' });
-    };
-
-    const schemaFieldSelector = (
-        field: ReactWrapper<any>,
-        domainIndex: number,
-        index: number
-    ): ReactWrapper<SchemaSelectProps, ISchemaSelectImplState> => {
-        return field
-            .find({
-                id: createFormInputId(DOMAIN_FIELD_LOOKUP_SCHEMA, domainIndex, index),
-                name: createFormInputName(DOMAIN_FIELD_LOOKUP_SCHEMA),
-            })
-            .not({ bsClass: 'form-control' })
-            .not({ className: 'form-control' });
-    };
-
-    const queryFieldSelector = (
-        field: ReactWrapper<any>,
-        domainIndex: number,
-        index: number
-    ): ReactWrapper<TargetTableSelectProps, ITargetTableSelectImplState> => {
-        return field
-            .find({
-                id: createFormInputId(DOMAIN_FIELD_LOOKUP_QUERY, domainIndex, index),
-                name: createFormInputName(DOMAIN_FIELD_LOOKUP_QUERY),
-            })
-            .not({ bsClass: 'form-control' })
-            .not({ className: 'form-control' });
-    };
-
-    // Tests
-    test('Lookup field options', () => {
-        const _container = '/StudyVerifyProject/My Study';
-        const _schema = 'exp';
-        const _query = 'Data';
-        const _index = 1;
-        const _domainIndex = 1;
-        const _label = 'Lookup Field Options';
-        const _container0 = 'StudyVerifyProject';
-        const _container1 = 'My Study';
-        const _schema0 = 'exp';
-        const _schema2 = 'study';
-        const _queries1 = 'DataInputs';
-
-        const field = DomainField.create({
-            name: 'key',
-            rangeURI: INT_RANGE_URI,
-            propertyId: 1,
-            propertyURI: 'test',
-        });
-
-        const lookupField = mount(
-            <MockLookupProvider>
-                <LookupFieldOptions
-                    field={
-                        new DomainField({
-                            original: field,
-                            dataType: PropDescType.fromName('lookup'),
-                            lookupSchema: _schema,
-                            lookupQueryValue: _query,
-                            lookupIsValid: true,
-                        })
-                    }
-                    lookupContainer={_container}
-                    onChange={jest.fn()}
-                    onMultiChange={jest.fn()}
-                    index={_index}
-                    domainIndex={_domainIndex}
-                    label={_label}
-                    lockType={DOMAIN_FIELD_NOT_LOCKED}
-                />
-            </MockLookupProvider>
-        );
-
-        // Verify section label
-        const sectionLabel = lookupField.find({ className: 'domain-field-section-heading' });
-        expect(sectionLabel.length).toEqual(1);
-        expect(sectionLabel.text()).toEqual(_label);
-
-        // Folder
-        const folderField = folderFieldSelector(lookupField, _domainIndex, _index);
-
-        expect(folderField.length).toEqual(1);
-
-        return waitForLoad(folderField).then(() => {
-            expect(folderField.props().value).toEqual(_container);
-            expect(folderField.state().containers.size).toEqual(2);
-            expect(folderField.state().containers.get(0).name).toEqual(_container0);
-            expect(folderField.state().containers.get(1).name).toEqual(_container1);
-
-            // Schema
-            const schemaField = schemaFieldSelector(lookupField, _domainIndex, _index);
-
-            expect(schemaField.length).toEqual(1);
-
-            return waitForLoad(schemaField).then(() => {
-                expect(schemaField.props().value).toEqual(_schema);
-                expect(schemaField.state().schemas.length).toEqual(5);
-                expect(schemaField.state().schemas[0].schemaName).toEqual(_schema0);
-                expect(schemaField.state().schemas[4].schemaName).toEqual(_schema2);
-
-                // Query
-                const queryField = queryFieldSelector(lookupField, _domainIndex, _index);
-
-                return waitForLoad(queryField).then(() => {
-                    expect(queryField.props().value).toEqual(_query);
-                    expect(queryField.state().queries.length).toEqual(3);
-                    expect(queryField.state().queries[1].name).toEqual(_queries1);
-
-                    expect(lookupField).toMatchSnapshot();
-                    lookupField.unmount();
-                });
-            });
-        });
-    });
-
-    test('Selected container changes schemas', () => {
-        const _container1 = '/StudyVerifyProject/My Study';
-        const _container2 = '/StudyVerifyProject';
-        const _index = 1;
-        const _domainIndex = 1;
-        const _schema = 'exp';
-        const _query = 'Data';
-        const _label = 'Lookup Field Options';
-        const _newSchema = 'lists';
-
-        const field = DomainField.create({
-            name: 'key',
-            rangeURI: INT_RANGE_URI,
-            propertyId: 1,
-            propertyURI: 'test',
-        });
-
-        const lookupField = mount(
-            <MockLookupProvider>
-                <LookupFieldOptions
-                    field={
-                        new DomainField({
-                            original: field,
-                            dataType: PropDescType.fromName('lookup'),
-                            lookupSchema: _schema,
-                            lookupQueryValue: _query,
-                        })
-                    }
-                    lookupContainer={_container1}
-                    onChange={jest.fn()}
-                    onMultiChange={jest.fn()}
-                    index={_index}
-                    domainIndex={_domainIndex}
-                    label={_label}
-                    lockType={DOMAIN_FIELD_NOT_LOCKED}
-                />
-            </MockLookupProvider>
-        );
-
-        // Get container field and wait for it to populate
-        const container = folderFieldSelector(lookupField, _domainIndex, _index);
-
-        return waitForLoad(container).then(() => {
-            expect(container.props().value).toEqual(_container1);
-
-            // Get schema field and wait for load
-            const schema = schemaFieldSelector(lookupField, _domainIndex, _index);
-
-            return waitForLoad(schema).then(() => {
-                expect(schema.props().value).toEqual(_schema);
-                expect(schema.state().schemas.length).toEqual(5);
-
-                lookupField.setProps({
-                    children: (
-                        <LookupFieldOptions
-                            field={
-                                new DomainField({
-                                    original: field,
-                                    dataType: PropDescType.fromName('lookup'),
-                                    lookupSchema: '',
-                                    lookupQueryValue: '',
-                                })
-                            }
-                            lookupContainer={_container2}
-                            onChange={jest.fn()}
-                            onMultiChange={jest.fn()}
-                            index={_index}
-                            domainIndex={_domainIndex}
-                            label={_label}
-                            lockType={DOMAIN_FIELD_NOT_LOCKED}
-                        />
-                    ),
-                });
-
-                return waitForLoad(container).then(() => {
-                    // Wait for schema to load and verify values updated
-                    return waitForLoad(schema).then(() => {
-                        expect(schema.state().schemas.length).toEqual(1);
-                        expect(schema.state().schemas[0].schemaName).toEqual(_newSchema);
-
-                        expect(lookupField).toMatchSnapshot();
-                        lookupField.unmount();
-                    });
-                });
-            });
-        });
-    });
-
-    test('Selected schema changes queries', () => {
-        const _container = '/StudyVerifyProject/My Study';
-        const _schema1 = 'exp';
-        const _schema2 = 'study';
-        const _query1 = 'Data';
-        const _query2 = 'Treatment';
-        const _label = 'Lookup Field Options';
-        const _index = 1;
-        const _domainIndex = 1;
-
-        const field = DomainField.create({
-            name: 'key',
-            rangeURI: INT_RANGE_URI,
-            propertyId: 1,
-            propertyURI: 'test',
-        });
-
-        const lookupField = mount(
-            <MockLookupProvider>
-                <LookupFieldOptions
-                    field={
-                        new DomainField({
-                            original: field,
-                            dataType: PropDescType.fromName('lookup'),
-                            lookupSchema: _schema1,
-                            lookupQueryValue: _query1,
-                        })
-                    }
-                    lookupContainer={_container}
-                    onChange={jest.fn()}
-                    onMultiChange={jest.fn()}
-                    index={_index}
-                    domainIndex={_domainIndex}
-                    label={_label}
-                    lockType={DOMAIN_FIELD_NOT_LOCKED}
-                />
-            </MockLookupProvider>
-        );
-
-        // Folder
-        const folderField = folderFieldSelector(lookupField, _domainIndex, _index);
-
-        return waitForLoad(folderField).then(() => {
-            expect(folderField.props().value).toEqual(_container);
-
-            // Schema
-            const schemaField = schemaFieldSelector(lookupField, _domainIndex, _index);
-
-            return waitForLoad(schemaField).then(() => {
-                expect(schemaField.props().value).toEqual(_schema1);
-
-                // Query
-                let queryField = queryFieldSelector(lookupField, _domainIndex, _index);
-                return waitForLoad(queryField).then(() => {
-                    expect(queryField.state().queries.length).toEqual(4);
-
-                    lookupField.setProps({
-                        children: (
-                            <LookupFieldOptions
-                                field={
-                                    new DomainField({
-                                        original: field,
-                                        dataType: PropDescType.fromName('lookup'),
-                                        lookupSchema: _schema2,
-                                        lookupQueryValue: '',
-                                        lookupIsValid: true,
-                                    })
-                                }
-                                lookupContainer={_container}
-                                onChange={jest.fn()}
-                                onMultiChange={jest.fn()}
-                                index={_index}
-                                domainIndex={_domainIndex}
-                                label={_label}
-                                lockType={DOMAIN_FIELD_NOT_LOCKED}
-                            />
-                        ),
-                    });
-
-                    queryField = queryFieldSelector(lookupField, _domainIndex, _index);
-                    return waitForLoad(schemaField).then(() => {
-                        return waitForLoad(queryField).then(() => {
-                            // Verify query field
-                            expect(queryField.state().queries.length).toEqual(1);
-                            expect(queryField.state().queries[0].name).toEqual(_query2);
-
-                            expect(lookupField).toMatchSnapshot();
-                            lookupField.unmount();
-                        });
-                    });
-                });
-            });
-        });
-    });
-
-    test('Selected container changes queries', () => {
-        const _container1 = '/StudyVerifyProject/My Study';
-        const _container2 = '/StudyVerifyProject';
-        const _schema1 = 'exp';
-        const _query1 = 'Data';
-        const _label = 'Lookup Field Options';
-        const _index = 1;
-        const _domainIndex = 1;
-
-        const field = DomainField.create({
-            name: 'key',
-            rangeURI: INT_RANGE_URI,
-            propertyId: 1,
-            propertyURI: 'test',
-        });
-
-        const lookupField = mount(
-            <MockLookupProvider>
-                <LookupFieldOptions
-                    field={
-                        new DomainField({
-                            original: field,
-                            dataType: PropDescType.fromName('lookup'),
-                            lookupSchema: _schema1,
-                            lookupQueryValue: _query1,
-                            lookupIsValid: true,
-                        })
-                    }
-                    lookupContainer={_container1}
-                    onChange={jest.fn()}
-                    onMultiChange={jest.fn()}
-                    index={_index}
-                    domainIndex={_domainIndex}
-                    label={_label}
-                    lockType={DOMAIN_FIELD_NOT_LOCKED}
-                />
-            </MockLookupProvider>
-        );
-
-        // Folder
-        const folderField = folderFieldSelector(lookupField, _domainIndex, _index);
-        let queryField = queryFieldSelector(lookupField, _domainIndex, _index);
-        expect(queryField.state().queries).toBeUndefined();
-        return waitForLoad(folderField).then(() => {
-            expect(folderField.props().value).toEqual(_container1);
-
-            return waitForLoad(queryField).then(() => {
-                expect(queryField.state().queries.length).toEqual(3);
-
-                lookupField.setProps({
-                    children: (
-                        <LookupFieldOptions
-                            field={
-                                new DomainField({
-                                    original: field,
-                                    dataType: PropDescType.fromName('lookup'),
-                                    lookupSchema: '',
-                                    lookupQueryValue: '',
-                                    lookupIsValid: true,
-                                })
-                            }
-                            lookupContainer={_container2}
-                            onChange={jest.fn()}
-                            onMultiChange={jest.fn()}
-                            index={_index}
-                            domainIndex={_domainIndex}
-                            label={_label}
-                            lockType={DOMAIN_FIELD_NOT_LOCKED}
-                        />
-                    ),
-                });
-
-                return waitForLoad(folderField).then(() => {
-                    // Query
-                    queryField = queryFieldSelector(lookupField, _domainIndex, _index);
-                    return waitForLoad(queryField).then(() => {
-                        queryField = queryFieldSelector(lookupField, _domainIndex, _index);
-                        // Verify query field
-                        expect(queryField.props().value).toEqual('');
-                        expect(queryField.state().queries.length).toBe(0);
-
-                        expect(lookupField).toMatchSnapshot();
-                        lookupField.unmount();
-                    });
-                });
-            });
-        });
-    });
-
-    test('lockType', () => {
-        const base = {
-            field: new DomainField({
-                original: {},
-                dataType: PropDescType.fromName('string'),
-                lookupSchema: 'schema',
-                lookupQueryValue: 'query',
-            }),
-            lookupContainer: 'container',
-            onMultiChange: jest.fn,
-            onChange: jest.fn,
-            index: 0,
-            domainIndex: 0,
-            label: 'Foo',
-        };
-
-        function validateDisabled(lockType: string, expectDisabled: boolean) {
-            const component = (
-                <MockLookupProvider>
-                    <LookupFieldOptions {...base} lockType={lockType} />
-                </MockLookupProvider>
-            );
-            const wrapper = mount(component);
-            expect(wrapper.find(FolderSelect).prop('disabled')).toBe(expectDisabled);
-            expect(wrapper.find(SchemaSelect).prop('disabled')).toBe(expectDisabled);
-            expect(wrapper.find(TargetTableSelect).prop('disabled')).toBe(expectDisabled);
-            wrapper.unmount();
-        }
-
-        validateDisabled(DOMAIN_FIELD_NOT_LOCKED, false);
-        validateDisabled(DOMAIN_FIELD_PARTIALLY_LOCKED, true);
-        validateDisabled(DOMAIN_FIELD_FULLY_LOCKED, true);
-    });
-
-    test('Invalid lookup', () => {
-        const _index = 1;
-        const _domainIndex = 1;
-        const _invalidLookup = 'rangeURI|InvalidLookup';
-
-        const field = DomainField.create({
-            name: 'key',
-            rangeURI: INT_RANGE_URI,
-            propertyId: 1,
-            propertyURI: 'test',
-        });
-
-        const lookupField = mount(
-            <MockLookupProvider>
-                <LookupFieldOptions
-                    field={
-                        new DomainField({
-                            original: field,
-                            dataType: PropDescType.fromName('int'),
-                            lookupSchema: 'exp',
-                            lookupQueryValue: _invalidLookup,
-                            lookupIsValid: false,
-                        })
-                    }
-                    lookupContainer="/StudyVerifyProject"
-                    onChange={jest.fn()}
-                    onMultiChange={jest.fn()}
-                    index={_index}
-                    domainIndex={_domainIndex}
-                    label="Lookup Field Options"
-                    lockType={DOMAIN_FIELD_NOT_LOCKED}
-                />
-            </MockLookupProvider>
-        );
-
-        const folderField = folderFieldSelector(lookupField, _domainIndex, _index);
-        return waitForLoad(folderField).then(() => {
-            // Query
-            const queryField = queryFieldSelector(lookupField, _domainIndex, _index);
-
-            return waitForLoad(queryField).then(() => {
-                // Verify query field
-                expect(queryField.state().queries.length).toEqual(4); // exp queries plus unknown query
-                expect(queryField.props().value).toEqual(_invalidLookup);
-                lookupField.unmount();
-            });
-        });
-    });
-});
diff --git a/packages/components/src/internal/components/domainproperties/LookupFieldOptions.test.tsx b/packages/components/src/internal/components/domainproperties/LookupFieldOptions.test.tsx
new file mode 100644
index 0000000000..6de4f79524
--- /dev/null
+++ b/packages/components/src/internal/components/domainproperties/LookupFieldOptions.test.tsx
@@ -0,0 +1,404 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+
+import { MockLookupProvider } from '../../../test/MockLookupProvider';
+
+import { createFormInputId } from './utils';
+import {
+    DOMAIN_FIELD_FULLY_LOCKED,
+    DOMAIN_FIELD_LOOKUP_CONTAINER,
+    DOMAIN_FIELD_LOOKUP_QUERY,
+    DOMAIN_FIELD_LOOKUP_SCHEMA,
+    DOMAIN_FIELD_NOT_LOCKED,
+    DOMAIN_FIELD_PARTIALLY_LOCKED,
+    INT_RANGE_URI,
+} from './constants';
+import { DomainField } from './models';
+import { LookupFieldOptions } from './LookupFieldOptions';
+import { PropDescType } from './PropDescType';
+
+describe('LookupFieldOptions', () => {
+    function getFolderSelect(domainIndex: number, index: number): HTMLSelectElement {
+        return document.getElementById(
+            createFormInputId(DOMAIN_FIELD_LOOKUP_CONTAINER, domainIndex, index)
+        ) as HTMLSelectElement;
+    }
+
+    function getSchemaSelect(domainIndex: number, index: number): HTMLSelectElement {
+        return document.getElementById(
+            createFormInputId(DOMAIN_FIELD_LOOKUP_SCHEMA, domainIndex, index)
+        ) as HTMLSelectElement;
+    }
+
+    function getQuerySelect(domainIndex: number, index: number): HTMLSelectElement {
+        return document.getElementById(
+            createFormInputId(DOMAIN_FIELD_LOOKUP_QUERY, domainIndex, index)
+        ) as HTMLSelectElement;
+    }
+
+    test('Lookup field options', async () => {
+        const _container = '/StudyVerifyProject/My Study';
+        const _schema = 'exp';
+        const _index = 1;
+        const _domainIndex = 1;
+        const _label = 'Lookup Field Options';
+
+        const field = DomainField.create({
+            name: 'key',
+            rangeURI: INT_RANGE_URI,
+            propertyId: 1,
+            propertyURI: 'test',
+        });
+
+        render(
+            <MockLookupProvider>
+                <LookupFieldOptions
+                    field={
+                        new DomainField({
+                            original: field,
+                            dataType: PropDescType.fromName('lookup'),
+                            lookupSchema: _schema,
+                            lookupQueryValue: 'Data',
+                            lookupIsValid: true,
+                        })
+                    }
+                    lookupContainer={_container}
+                    onChange={jest.fn()}
+                    onMultiChange={jest.fn()}
+                    index={_index}
+                    domainIndex={_domainIndex}
+                    label={_label}
+                    lockType={DOMAIN_FIELD_NOT_LOCKED}
+                />
+            </MockLookupProvider>
+        );
+
+        // Verify section label
+        expect(document.querySelector('.domain-field-section-heading')).toHaveTextContent(_label);
+
+        // Folder: wait for 2 containers to load (plus the "Current Folder" option = 3 total)
+        await waitFor(() => expect(getFolderSelect(_domainIndex, _index).options.length).toBeGreaterThan(1));
+        const folderOptions = Array.from(getFolderSelect(_domainIndex, _index).options).map(o => o.text);
+        expect(folderOptions).toHaveLength(3);
+        expect(folderOptions).toContain('/StudyVerifyProject');
+        expect(folderOptions).toContain('/StudyVerifyProject/My Study');
+
+        // Schema: wait for 5 schemas to load for /StudyVerifyProject/My Study (sorted by fullyQualifiedName)
+        await waitFor(() => expect(getSchemaSelect(_domainIndex, _index).options.length).toBe(5));
+        expect(getSchemaSelect(_domainIndex, _index).options[0].value).toBe('exp');
+        expect(getSchemaSelect(_domainIndex, _index).options[4].value).toBe('study');
+
+        // Query: wait for 3 queries to load for exp schema
+        await waitFor(() => expect(getQuerySelect(_domainIndex, _index).options.length).toBe(3));
+        const queryOptions = Array.from(getQuerySelect(_domainIndex, _index).options).map(o => o.text);
+        expect(queryOptions[1]).toContain('DataInputs');
+    });
+
+    test('Selected container changes schemas', async () => {
+        const _container1 = '/StudyVerifyProject/My Study';
+        const _container2 = '/StudyVerifyProject';
+        const _index = 1;
+        const _domainIndex = 1;
+        const _schema = 'exp';
+        const _label = 'Lookup Field Options';
+
+        const field = DomainField.create({
+            name: 'key',
+            rangeURI: INT_RANGE_URI,
+            propertyId: 1,
+            propertyURI: 'test',
+        });
+
+        const { rerender } = render(
+            <MockLookupProvider>
+                <LookupFieldOptions
+                    field={
+                        new DomainField({
+                            original: field,
+                            dataType: PropDescType.fromName('lookup'),
+                            lookupSchema: _schema,
+                            lookupQueryValue: 'Data',
+                        })
+                    }
+                    lookupContainer={_container1}
+                    onChange={jest.fn()}
+                    onMultiChange={jest.fn()}
+                    index={_index}
+                    domainIndex={_domainIndex}
+                    label={_label}
+                    lockType={DOMAIN_FIELD_NOT_LOCKED}
+                />
+            </MockLookupProvider>
+        );
+
+        // Wait for initial schemas to load for /StudyVerifyProject/My Study (5 schemas)
+        await waitFor(() => expect(getSchemaSelect(_domainIndex, _index).options.length).toBe(5));
+        expect(getSchemaSelect(_domainIndex, _index).options[0].value).toBe('exp');
+        expect(getSchemaSelect(_domainIndex, _index).options[1].value).toBe('exp.data');
+        expect(getSchemaSelect(_domainIndex, _index).options[2].value).toBe('exp.materials');
+        expect(getSchemaSelect(_domainIndex, _index).options[3].value).toBe('lists');
+        expect(getSchemaSelect(_domainIndex, _index).options[4].value).toBe('study');
+
+        // Re-render with the new container
+        rerender(
+            <MockLookupProvider>
+                <LookupFieldOptions
+                    field={
+                        new DomainField({
+                            original: field,
+                            dataType: PropDescType.fromName('lookup'),
+                            lookupSchema: '',
+                            lookupQueryValue: '',
+                        })
+                    }
+                    lookupContainer={_container2}
+                    onChange={jest.fn()}
+                    onMultiChange={jest.fn()}
+                    index={_index}
+                    domainIndex={_domainIndex}
+                    label={_label}
+                    lockType={DOMAIN_FIELD_NOT_LOCKED}
+                />
+            </MockLookupProvider>
+        );
+
+        // Schema count should update to 1 for /StudyVerifyProject (only 'lists')
+        await waitFor(() => expect(getSchemaSelect(_domainIndex, _index).options.length).toBe(2));
+        expect(getSchemaSelect(_domainIndex, _index).options[0].value).toBe('');
+        expect(getSchemaSelect(_domainIndex, _index).options[1].value).toBe('lists');
+    });
+
+    test('Selected schema changes queries', async () => {
+        const _container = '/StudyVerifyProject/My Study';
+        const _schema1 = 'exp';
+        const _schema2 = 'study';
+        const _label = 'Lookup Field Options';
+        const _index = 1;
+        const _domainIndex = 1;
+
+        const field = DomainField.create({
+            name: 'key',
+            rangeURI: INT_RANGE_URI,
+            propertyId: 1,
+            propertyURI: 'test',
+        });
+
+        const { rerender } = render(
+            <MockLookupProvider>
+                <LookupFieldOptions
+                    field={
+                        new DomainField({
+                            original: field,
+                            dataType: PropDescType.fromName('lookup'),
+                            lookupSchema: _schema1,
+                            lookupQueryValue: 'Data',
+                        })
+                    }
+                    lookupContainer={_container}
+                    onChange={jest.fn()}
+                    onMultiChange={jest.fn()}
+                    index={_index}
+                    domainIndex={_domainIndex}
+                    label={_label}
+                    lockType={DOMAIN_FIELD_NOT_LOCKED}
+                />
+            </MockLookupProvider>
+        );
+
+        // Wait for initial query options (4: 3 from exp + 1 prepended for invalid lookup since lookupIsValid is not set)
+        await waitFor(() => expect(getQuerySelect(_domainIndex, _index).options.length).toBe(4));
+        expect(getSchemaSelect(_domainIndex, _index).options[0].value).toBe('exp');
+        expect(getSchemaSelect(_domainIndex, _index).options[1].value).toBe('exp.data');
+        expect(getSchemaSelect(_domainIndex, _index).options[2].value).toBe('exp.materials');
+        expect(getSchemaSelect(_domainIndex, _index).options[3].value).toBe('lists');
+
+        // Re-render with the new schema (study)
+        rerender(
+            <MockLookupProvider>
+                <LookupFieldOptions
+                    field={
+                        new DomainField({
+                            original: field,
+                            dataType: PropDescType.fromName('lookup'),
+                            lookupSchema: _schema2,
+                            lookupQueryValue: '',
+                            lookupIsValid: true,
+                        })
+                    }
+                    lookupContainer={_container}
+                    onChange={jest.fn()}
+                    onMultiChange={jest.fn()}
+                    index={_index}
+                    domainIndex={_domainIndex}
+                    label={_label}
+                    lockType={DOMAIN_FIELD_NOT_LOCKED}
+                />
+            </MockLookupProvider>
+        );
+
+        // Query options should update to 1 (study schema has 1 query: Treatment)
+        await waitFor(() => expect(getQuerySelect(_domainIndex, _index).options.length).toBe(2));
+        expect(getQuerySelect(_domainIndex, _index).options[0].text).toContain('');
+        expect(getQuerySelect(_domainIndex, _index).options[1].text).toContain('Treatment');
+    });
+
+    test('Selected container changes queries', async () => {
+        const _container1 = '/StudyVerifyProject/My Study';
+        const _container2 = '/StudyVerifyProject';
+        const _schema1 = 'exp';
+        const _label = 'Lookup Field Options';
+        const _index = 1;
+        const _domainIndex = 1;
+
+        const field = DomainField.create({
+            name: 'key',
+            rangeURI: INT_RANGE_URI,
+            propertyId: 1,
+            propertyURI: 'test',
+        });
+
+        const { rerender } = render(
+            <MockLookupProvider>
+                <LookupFieldOptions
+                    field={
+                        new DomainField({
+                            original: field,
+                            dataType: PropDescType.fromName('lookup'),
+                            lookupSchema: _schema1,
+                            lookupQueryValue: 'Data',
+                            lookupIsValid: true,
+                        })
+                    }
+                    lookupContainer={_container1}
+                    onChange={jest.fn()}
+                    onMultiChange={jest.fn()}
+                    index={_index}
+                    domainIndex={_domainIndex}
+                    label={_label}
+                    lockType={DOMAIN_FIELD_NOT_LOCKED}
+                />
+            </MockLookupProvider>
+        );
+
+        // Wait for initial query options (3 queries for exp in /StudyVerifyProject/My Study)
+        await waitFor(() => expect(getQuerySelect(_domainIndex, _index).options.length).toBe(3));
+
+        // Re-render with the new container and empty schema/query
+        rerender(
+            <MockLookupProvider>
+                <LookupFieldOptions
+                    field={
+                        new DomainField({
+                            original: field,
+                            dataType: PropDescType.fromName('lookup'),
+                            lookupSchema: '',
+                            lookupQueryValue: '',
+                            lookupIsValid: true,
+                        })
+                    }
+                    lookupContainer={_container2}
+                    onChange={jest.fn()}
+                    onMultiChange={jest.fn()}
+                    index={_index}
+                    domainIndex={_domainIndex}
+                    label={_label}
+                    lockType={DOMAIN_FIELD_NOT_LOCKED}
+                />
+            </MockLookupProvider>
+        );
+
+        // No schema selected → no queries; the select shows a disabled "(No tables)" option
+        await waitFor(() =>
+            expect(
+                document.querySelector(
+                    `#${createFormInputId(DOMAIN_FIELD_LOOKUP_QUERY, _domainIndex, _index)} option[disabled]`
+                )
+            ).toHaveTextContent('(No tables)')
+        );
+    });
+
+    test('lockType', async () => {
+        const base = {
+            field: new DomainField({
+                original: {},
+                dataType: PropDescType.fromName('string'),
+                lookupSchema: 'schema',
+                lookupQueryValue: 'query',
+            }),
+            lookupContainer: 'container',
+            onMultiChange: jest.fn,
+            onChange: jest.fn,
+            index: 0,
+            domainIndex: 0,
+            label: 'Foo',
+        };
+
+        async function validateDisabled(lockType: string, expectDisabled: boolean): Promise<void> {
+            const { unmount } = render(
+                <MockLookupProvider>
+                    <LookupFieldOptions {...base} lockType={lockType} />
+                </MockLookupProvider>
+            );
+
+            if (expectDisabled) {
+                expect(getFolderSelect(0, 0)).toBeDisabled();
+                expect(getSchemaSelect(0, 0)).toBeDisabled();
+                expect(getQuerySelect(0, 0)).toBeDisabled();
+            } else {
+                // Wait for async loading to complete before checking enabled state
+                await waitFor(() => expect(getFolderSelect(0, 0)).not.toBeDisabled());
+                expect(getSchemaSelect(0, 0)).not.toBeDisabled();
+            }
+
+            unmount();
+        }
+
+        await validateDisabled(DOMAIN_FIELD_NOT_LOCKED, false);
+        await validateDisabled(DOMAIN_FIELD_PARTIALLY_LOCKED, true);
+        await validateDisabled(DOMAIN_FIELD_FULLY_LOCKED, true);
+    });
+
+    test('Invalid lookup', async () => {
+        const _index = 1;
+        const _domainIndex = 1;
+        const _invalidLookup = 'rangeURI|InvalidLookup';
+
+        const field = DomainField.create({
+            name: 'key',
+            rangeURI: INT_RANGE_URI,
+            propertyId: 1,
+            propertyURI: 'test',
+        });
+
+        render(
+            <MockLookupProvider>
+                <LookupFieldOptions
+                    field={
+                        new DomainField({
+                            original: field,
+                            dataType: PropDescType.fromName('int'),
+                            lookupSchema: 'exp',
+                            lookupQueryValue: _invalidLookup,
+                            lookupIsValid: false,
+                        })
+                    }
+                    lookupContainer="/StudyVerifyProject"
+                    onChange={jest.fn()}
+                    onMultiChange={jest.fn()}
+                    index={_index}
+                    domainIndex={_domainIndex}
+                    label="Lookup Field Options"
+                    lockType={DOMAIN_FIELD_NOT_LOCKED}
+                />
+            </MockLookupProvider>
+        );
+
+        // Wait for queries to load: exp queries plus the invalid/unknown query prepended = 4 total
+        await waitFor(() => expect(getQuerySelect(_domainIndex, _index).options.length).toBe(4));
+
+        // The invalid lookup entry is prepended with 'Unknown' label
+        const firstOption = getQuerySelect(_domainIndex, _index).options[0].text;
+        expect(firstOption).toContain('InvalidLookup');
+        expect(firstOption).toContain('Unknown');
+    });
+});
diff --git a/packages/components/src/internal/components/domainproperties/TextFieldOptions.spec.tsx b/packages/components/src/internal/components/domainproperties/TextFieldOptions.spec.tsx
deleted file mode 100644
index 5b36c5d217..0000000000
--- a/packages/components/src/internal/components/domainproperties/TextFieldOptions.spec.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import { mount } from 'enzyme';
-import React from 'react';
-
-import { createFormInputId } from './utils';
-import {
-    DOMAIN_FIELD_CUSTOM_LENGTH,
-    DOMAIN_FIELD_MAX_LENGTH,
-    DOMAIN_FIELD_NOT_LOCKED,
-    DOMAIN_FIELD_SCALE,
-    MAX_TEXT_LENGTH,
-} from './constants';
-
-import { TextFieldOptions, TextFieldState } from './TextFieldOptions';
-
-const SCANNABLE_OPTION_CLASS = '.domain-text-option-scannable';
-
-describe('TextFieldOptions', () => {
-    test('Text data type', () => {
-        const maxLengthRadio = { id: createFormInputId(DOMAIN_FIELD_MAX_LENGTH, 1, 1) };
-        const customLengthRadio = { id: createFormInputId(DOMAIN_FIELD_CUSTOM_LENGTH, 1, 1) };
-        const scaleInput = {
-            id: createFormInputId(DOMAIN_FIELD_SCALE, 1, 1),
-            className: 'form-control domain-text-length-field',
-        };
-
-        const _section = 'Text Field Options';
-        const _scale0 = MAX_TEXT_LENGTH;
-        const _scale1 = 4001; // using a value larger then the max length of 4000, will revert back to unlimited
-        const _scale2 = 200;
-
-        const props0 = {
-            index: 1,
-            domainIndex: 1,
-            label: _section,
-            scale: _scale0,
-            onChange: jest.fn(),
-            lockType: DOMAIN_FIELD_NOT_LOCKED,
-        };
-
-        let textField = mount(<TextFieldOptions {...props0} />);
-
-        // Verify label
-        const sectionLabel = textField.find({ className: 'domain-field-section-heading' });
-        expect(sectionLabel.length).toEqual(1);
-        expect(sectionLabel.text()).toEqual(_section);
-
-        // Verify max length is not set for scale 4000
-        const maxLength = textField.find(maxLengthRadio).not({ bsClass: 'form-control' });
-        expect(maxLength.length).toEqual(1);
-        expect(maxLength.props().checked).toEqual(false);
-
-        // Custom length is checked for scale 4000
-        const customLength = textField.find(customLengthRadio).not({ bsClass: 'form-control' });
-        expect(customLength.length).toEqual(1);
-        expect(customLength.props().checked).toEqual(true);
-
-        // Custom value
-        const lengthField0 = textField.find(scaleInput);
-        expect(lengthField0.length).toEqual(1);
-        expect(lengthField0.props().value).toEqual(MAX_TEXT_LENGTH);
-
-        // Change scale to a value larger then max allowed and verify radio buttons
-        const props1 = {
-            index: 1,
-            domainIndex: 1,
-            label: _section,
-            scale: _scale1,
-            onChange: jest.fn(),
-            lockType: DOMAIN_FIELD_NOT_LOCKED,
-        };
-        textField = mount(<TextFieldOptions {...props1} />);
-        const radioState1 = textField.state() as TextFieldState;
-        expect(radioState1.radio).toEqual(DOMAIN_FIELD_MAX_LENGTH);
-
-        // Custom value
-        const lengthField1 = textField.find(scaleInput);
-        expect(lengthField1.length).toEqual(1);
-        expect(lengthField1.props().value).toEqual(MAX_TEXT_LENGTH);
-
-        // Change scale and verify radio buttons
-        const props2 = {
-            index: 1,
-            domainIndex: 1,
-            label: _section,
-            scale: _scale2,
-            onChange: jest.fn(),
-            lockType: DOMAIN_FIELD_NOT_LOCKED,
-        };
-        textField = mount(<TextFieldOptions {...props2} />);
-        const radioState2 = textField.state() as TextFieldState;
-        expect(radioState2.radio).toEqual(DOMAIN_FIELD_CUSTOM_LENGTH);
-
-        // Custom value
-        const lengthField2 = textField.find(scaleInput);
-        expect(lengthField2.length).toEqual(1);
-        expect(lengthField2.props().value).toEqual(_scale2);
-
-        expect(textField).toMatchSnapshot();
-        textField.unmount();
-    });
-
-    test('Scannable Option field not shown', () => {
-        const props = {
-            index: 1,
-            domainIndex: 1,
-            label: 'Text Field Options',
-            scale: 4000,
-            onChange: jest.fn(),
-            lockType: DOMAIN_FIELD_NOT_LOCKED,
-        };
-
-        // All cases below should not display the field
-        const textField = mount(<TextFieldOptions {...props} showScannableOption={false} appPropertiesOnly={false} />);
-        expect(textField.find(SCANNABLE_OPTION_CLASS)).toHaveLength(0);
-        textField.unmount();
-
-        const textField2 = mount(<TextFieldOptions {...props} showScannableOption={true} appPropertiesOnly={false} />);
-        expect(textField2.find(SCANNABLE_OPTION_CLASS)).toHaveLength(0);
-        textField2.unmount();
-
-        const textField3 = mount(<TextFieldOptions {...props} showScannableOption={false} appPropertiesOnly={true} />);
-        expect(textField3.find(SCANNABLE_OPTION_CLASS)).toHaveLength(0);
-        textField3.unmount();
-    });
-
-    test('Scannable Option field shown and default false', () => {
-        const props = {
-            index: 1,
-            domainIndex: 1,
-            label: 'Text Field Options',
-            scale: 4000,
-            onChange: jest.fn(),
-            lockType: DOMAIN_FIELD_NOT_LOCKED,
-        };
-
-        const textField = mount(<TextFieldOptions {...props} appPropertiesOnly={true} showScannableOption={true} />);
-        const scannable = textField.find(SCANNABLE_OPTION_CLASS).not({ bsClass: 'form-control' });
-        expect(scannable.length).toEqual(1);
-        expect(scannable.props().checked).toEqual(false);
-        textField.unmount();
-    });
-
-    test('Scannable Option value', () => {
-        const props = {
-            index: 1,
-            domainIndex: 1,
-            label: 'Text Field Options',
-            scale: 4000,
-            onChange: jest.fn(),
-            lockType: DOMAIN_FIELD_NOT_LOCKED,
-            showScannableOption: true,
-            appPropertiesOnly: true,
-        };
-
-        const textField = mount(<TextFieldOptions {...props} scannable={true} />);
-        const scannable = textField.find(SCANNABLE_OPTION_CLASS).not({ bsClass: 'form-control' });
-        expect(scannable.length).toEqual(1);
-        expect(scannable.props().checked).toEqual(true);
-        textField.unmount();
-
-        const textField2 = mount(<TextFieldOptions {...props} scannable={false} />);
-        const scannable2 = textField2.find(SCANNABLE_OPTION_CLASS).not({ bsClass: 'form-control' });
-        expect(scannable2.length).toEqual(1);
-        expect(scannable2.props().checked).toEqual(false);
-        textField2.unmount();
-    });
-});
diff --git a/packages/components/src/internal/components/domainproperties/TextFieldOptions.test.tsx b/packages/components/src/internal/components/domainproperties/TextFieldOptions.test.tsx
new file mode 100644
index 0000000000..d9214dd337
--- /dev/null
+++ b/packages/components/src/internal/components/domainproperties/TextFieldOptions.test.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+
+import { renderWithAppContext } from '../../test/reactTestLibraryHelpers';
+import { createFormInputId } from './utils';
+import {
+    DOMAIN_FIELD_CUSTOM_LENGTH,
+    DOMAIN_FIELD_MAX_LENGTH,
+    DOMAIN_FIELD_NOT_LOCKED,
+    DOMAIN_FIELD_SCALE,
+    MAX_TEXT_LENGTH,
+} from './constants';
+
+import { TextFieldOptions } from './TextFieldOptions';
+
+const SCANNABLE_OPTION_SELECTOR = '.domain-text-option-scannable';
+
+describe('TextFieldOptions', () => {
+    const DEFAULT_PROPS = {
+        index: 1,
+        domainIndex: 1,
+        label: 'Text Field Options',
+        scale: MAX_TEXT_LENGTH,
+        onChange: jest.fn(),
+        lockType: DOMAIN_FIELD_NOT_LOCKED,
+    };
+
+    const maxLengthId = `#${createFormInputId(DOMAIN_FIELD_MAX_LENGTH, 1, 1)}`;
+    const customLengthId = `#${createFormInputId(DOMAIN_FIELD_CUSTOM_LENGTH, 1, 1)}`;
+    const scaleId = `#${createFormInputId(DOMAIN_FIELD_SCALE, 1, 1)}`;
+
+    test('Text data type - scale MAX_TEXT_LENGTH', () => {
+        renderWithAppContext(<TextFieldOptions {...DEFAULT_PROPS} scale={MAX_TEXT_LENGTH} />);
+
+        // Verify label
+        expect(document.querySelector('.domain-field-section-heading')).toHaveTextContent('Text Field Options');
+
+        // Verify max length is not checked for scale 4000
+        expect(document.querySelector(maxLengthId)).not.toBeChecked();
+
+        // Custom length is checked for scale 4000
+        expect(document.querySelector(customLengthId)).toBeChecked();
+
+        // Custom value
+        expect(document.querySelector(scaleId)).toHaveValue(MAX_TEXT_LENGTH);
+    });
+
+    test('Text data type - scale > MAX_TEXT_LENGTH reverts to unlimited', () => {
+        // using a value larger than the max length of 4000, will revert back to unlimited
+        renderWithAppContext(<TextFieldOptions {...DEFAULT_PROPS} scale={4001} />);
+
+        // max length radio should be checked (radio state = DOMAIN_FIELD_MAX_LENGTH)
+        expect(document.querySelector(maxLengthId)).toBeChecked();
+
+        // Scale input shows MAX_TEXT_LENGTH
+        expect(document.querySelector(scaleId)).toHaveValue(MAX_TEXT_LENGTH);
+    });
+
+    test('Text data type - custom scale', () => {
+        renderWithAppContext(<TextFieldOptions {...DEFAULT_PROPS} scale={200} />);
+
+        // custom length radio should be checked (radio state = DOMAIN_FIELD_CUSTOM_LENGTH)
+        expect(document.querySelector(customLengthId)).toBeChecked();
+
+        // Scale input shows 200
+        expect(document.querySelector(scaleId)).toHaveValue(200);
+    });
+
+    test('Scannable Option field not shown - showScannableOption false, appPropertiesOnly false', () => {
+        renderWithAppContext(
+            <TextFieldOptions {...DEFAULT_PROPS} showScannableOption={false} appPropertiesOnly={false} />
+        );
+        expect(document.querySelectorAll(SCANNABLE_OPTION_SELECTOR)).toHaveLength(0);
+    });
+
+    test('Scannable Option field not shown - showScannableOption true, appPropertiesOnly false', () => {
+        renderWithAppContext(
+            <TextFieldOptions {...DEFAULT_PROPS} showScannableOption={true} appPropertiesOnly={false} />
+        );
+        expect(document.querySelectorAll(SCANNABLE_OPTION_SELECTOR)).toHaveLength(0);
+    });
+
+    test('Scannable Option field not shown - showScannableOption false, appPropertiesOnly true', () => {
+        renderWithAppContext(
+            <TextFieldOptions {...DEFAULT_PROPS} showScannableOption={false} appPropertiesOnly={true} />
+        );
+        expect(document.querySelectorAll(SCANNABLE_OPTION_SELECTOR)).toHaveLength(0);
+    });
+
+    test('Scannable Option field shown and default false', () => {
+        renderWithAppContext(
+            <TextFieldOptions {...DEFAULT_PROPS} appPropertiesOnly={true} showScannableOption={true} />
+        );
+        const scannable = document.querySelector(SCANNABLE_OPTION_SELECTOR);
+        expect(scannable).toBeInTheDocument();
+        expect(scannable).not.toBeChecked();
+    });
+
+    test('Scannable Option value - scannable true', () => {
+        renderWithAppContext(
+            <TextFieldOptions {...DEFAULT_PROPS} showScannableOption={true} appPropertiesOnly={true} scannable={true} />
+        );
+        expect(document.querySelector(SCANNABLE_OPTION_SELECTOR)).toBeChecked();
+    });
+
+    test('Scannable Option value - scannable false', () => {
+        renderWithAppContext(
+            <TextFieldOptions
+                {...DEFAULT_PROPS}
+                showScannableOption={true}
+                appPropertiesOnly={true}
+                scannable={false}
+            />
+        );
+        expect(document.querySelector(SCANNABLE_OPTION_SELECTOR)).not.toBeChecked();
+    });
+});
diff --git a/packages/components/src/internal/components/domainproperties/__snapshots__/LookupFieldOptions.spec.tsx.snap b/packages/components/src/internal/components/domainproperties/__snapshots__/LookupFieldOptions.spec.tsx.snap
deleted file mode 100644
index 47757e4302..0000000000
--- a/packages/components/src/internal/components/domainproperties/__snapshots__/LookupFieldOptions.spec.tsx.snap
+++ /dev/null
@@ -1,2301 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LookupFieldOptions Lookup field options 1`] = `
-<MockLookupProvider>
-  <LookupFieldOptions
-    domainIndex={1}
-    field={
-      Immutable.Record {
-        "conceptURI": undefined,
-        "conditionalFormats": Immutable.List [],
-        "defaultScale": undefined,
-        "defaultValueType": undefined,
-        "defaultValue": undefined,
-        "defaultDisplayValue": undefined,
-        "description": undefined,
-        "dimension": undefined,
-        "excludeFromShifting": false,
-        "format": undefined,
-        "hidden": false,
-        "importAliases": undefined,
-        "label": undefined,
-        "lookupContainer": undefined,
-        "lookupQuery": undefined,
-        "lookupSchema": "exp",
-        "lookupValidator": undefined,
-        "lookupIsValid": true,
-        "measure": undefined,
-        "mvEnabled": false,
-        "name": undefined,
-        "PHI": undefined,
-        "propertyId": undefined,
-        "propertyURI": undefined,
-        "propertyValidators": Immutable.List [],
-        "rangeValidators": Immutable.List [],
-        "rangeURI": undefined,
-        "regexValidators": Immutable.List [],
-        "textChoiceValidator": undefined,
-        "recommendedVariable": false,
-        "uniqueConstraint": false,
-        "required": false,
-        "scale": 4000,
-        "URL": undefined,
-        "shownInDetailsView": true,
-        "shownInInsertView": true,
-        "shownInUpdateView": true,
-        "visible": true,
-        "dataType": Immutable.Record {
-          "conceptURI": undefined,
-          "display": "Lookup",
-          "name": "lookup",
-          "rangeURI": undefined,
-          "alternateRangeURI": undefined,
-          "shortDisplay": undefined,
-          "lookupSchema": undefined,
-          "lookupQuery": undefined,
-        },
-        "lookupQueryValue": "Data",
-        "lookupType": undefined,
-        "original": Immutable.Record {
-          "conceptURI": undefined,
-          "conditionalFormats": Immutable.List [],
-          "defaultScale": undefined,
-          "defaultValueType": undefined,
-          "defaultValue": undefined,
-          "defaultDisplayValue": undefined,
-          "description": undefined,
-          "dimension": undefined,
-          "excludeFromShifting": false,
-          "format": undefined,
-          "hidden": false,
-          "importAliases": undefined,
-          "label": undefined,
-          "lookupContainer": undefined,
-          "lookupQuery": undefined,
-          "lookupSchema": undefined,
-          "lookupValidator": undefined,
-          "lookupIsValid": undefined,
-          "measure": undefined,
-          "mvEnabled": false,
-          "name": "key",
-          "PHI": undefined,
-          "propertyId": 1,
-          "propertyURI": "test",
-          "propertyValidators": Immutable.List [],
-          "rangeValidators": Immutable.List [],
-          "rangeURI": "http://www.w3.org/2001/XMLSchema#int",
-          "regexValidators": Immutable.List [],
-          "textChoiceValidator": undefined,
-          "recommendedVariable": false,
-          "uniqueConstraint": false,
-          "required": false,
-          "scale": 4000,
-          "URL": undefined,
-          "shownInDetailsView": true,
-          "shownInInsertView": true,
-          "shownInUpdateView": true,
-          "visible": true,
-          "dataType": Immutable.Record {
-            "conceptURI": undefined,
-            "display": "Integer",
-            "name": "int",
-            "rangeURI": "http://www.w3.org/2001/XMLSchema#int",
-            "alternateRangeURI": "xsd:int",
-            "shortDisplay": undefined,
-            "lookupSchema": undefined,
-            "lookupQuery": undefined,
-          },
-          "lookupQueryValue": undefined,
-          "lookupType": Immutable.Record {
-            "conceptURI": undefined,
-            "display": "Lookup",
-            "name": "lookup",
-            "rangeURI": "http://www.w3.org/2001/XMLSchema#int",
-            "alternateRangeURI": undefined,
-            "shortDisplay": undefined,
-            "lookupSchema": undefined,
-            "lookupQuery": undefined,
-          },
-          "original": {
-            "conceptURI": undefined,
-            "dataType": Immutable.Record {
-              "conceptURI": undefined,
-              "display": "Integer",
-              "name": "int",
-              "rangeURI": "http://www.w3.org/2001/XMLSchema#int",
-              "alternateRangeURI": "xsd:int",
-              "shortDisplay": undefined,
-              "lookupSchema": undefined,
-              "lookupQuery": undefined,
-            },
-            "name": "key",
-            "rangeURI": "http://www.w3.org/2001/XMLSchema#int",
-          },
-          "updatedField": false,
-          "isPrimaryKey": false,
-          "lockType": "NotLocked",
-          "wrappedColumnName": undefined,
-          "valueExpression": undefined,
-          "disablePhiLevel": false,
-          "lockExistingField": false,
-          "sourceOntology": undefined,
-          "conceptSubtree": undefined,
-          "conceptLabelColumn": undefined,
-          "conceptImportColumn": undefined,
-          "principalConceptCode": undefined,
-          "derivationDataScope": undefined,
-          "selected": false,
-          "scannable": false,
-        },
-        "updatedField": false,
-        "isPrimaryKey": false,
-        "lockType": "NotLocked",
-        "wrappedColumnName": undefined,
-        "valueExpression": undefined,
-        "disablePhiLevel": false,
-        "lockExistingField": false,
-        "sourceOntology": undefined,
-        "conceptSubtree": undefined,
-        "conceptLabelColumn": undefined,
-        "conceptImportColumn": undefined,
-        "principalConceptCode": undefined,
-        "derivationDataScope": undefined,
-        "selected": false,
-        "scannable": false,
-      }
-    }
-    index={1}
-    label="Lookup Field Options"
-    lockType="NotLocked"
-    lookupContainer="/StudyVerifyProject/My Study"
-    onChange={[MockFunction]}
-    onMultiChange={[MockFunction]}
-  >
-    <div>
-      <div
-        className="row"
-      >
-        <div
-          className="col-xs-12"
-        >
-          <div
-            className="domain-field-section-heading"
-          >
-            Lookup Field Options
-          </div>
-        </div>
-      </div>
-      <div
-        className="row"
-      >
-        <div
-          className="col-xs-2"
-        >
-          <div
-            className="domain-field-label"
-          >
-            Target Folder
-          </div>
-          <FolderSelect
-            disabled={false}
-            id="domainpropertiesrow-lookupContainer-1-1"
-            key="domainpropertiesrow-lookupContainer-1-1"
-            onChange={[Function]}
-            value="/StudyVerifyProject/My Study"
-          >
-            <FolderSelectImpl
-              context={
-                {
-                  "activeContainer": Container {
-                    "activeModules": [],
-                    "effectivePermissions": [],
-                    "folderType": "",
-                    "formats": {
-                      "dateFormat": "",
-                      "dateTimeFormat": "",
-                      "numberFormat": "",
-                      "timeFormat": "",
-                    },
-                    "hasRestrictedActiveModule": false,
-                    "iconHref": "",
-                    "id": "e0ea3e55-3420-1035-8057-68fea9bfb3a0",
-                    "isContainerTab": false,
-                    "isWorkbook": false,
-                    "name": "My Study",
-                    "parentId": "",
-                    "parentPath": "",
-                    "path": "/StudyVerifyProject/My Study",
-                    "sortOrder": 0,
-                    "startUrl": "",
-                    "title": "",
-                    "type": "",
-                  },
-                  "fetchContainers": [Function],
-                  "fetchQueries": [Function],
-                  "fetchSchemas": [Function],
-                  "getExcludedSchemaQueryNames": [Function],
-                }
-              }
-              disabled={false}
-              id="domainpropertiesrow-lookupContainer-1-1"
-              name="domainpropertiesrow-lookupContainer"
-              onChange={[Function]}
-              value="/StudyVerifyProject/My Study"
-            >
-              <select
-                className="form-control"
-                context={
-                  {
-                    "activeContainer": Container {
-                      "activeModules": [],
-                      "effectivePermissions": [],
-                      "folderType": "",
-                      "formats": {
-                        "dateFormat": "",
-                        "dateTimeFormat": "",
-                        "numberFormat": "",
-                        "timeFormat": "",
-                      },
-                      "hasRestrictedActiveModule": false,
-                      "iconHref": "",
-                      "id": "e0ea3e55-3420-1035-8057-68fea9bfb3a0",
-                      "isContainerTab": false,
-                      "isWorkbook": false,
-                      "name": "My Study",
-                      "parentId": "",
-                      "parentPath": "",
-                      "path": "/StudyVerifyProject/My Study",
-                      "sortOrder": 0,
-                      "startUrl": "",
-                      "title": "",
-                      "type": "",
-                    },
-                    "fetchContainers": [Function],
-                    "fetchQueries": [Function],
-                    "fetchSchemas": [Function],
-                    "getExcludedSchemaQueryNames": [Function],
-                  }
-                }
-                disabled={false}
-                id="domainpropertiesrow-lookupContainer-1-1"
-                name="domainpropertiesrow-lookupContainer"
-                onChange={[Function]}
-                value="/StudyVerifyProject/My Study"
-              >
-                <option
-                  key="_current"
-                  value=""
-                >
-                  Current 
-                  Folder
-                </option>
-              </select>
-            </FolderSelectImpl>
-          </FolderSelect>
-        </div>
-        <div
-          className="col-xs-2"
-        >
-          <div
-            className="domain-field-label"
-          >
-            Target Schema
-          </div>
-          <SchemaSelect
-            containerPath="/StudyVerifyProject/My Study"
-            disabled={false}
-            id="domainpropertiesrow-lookupSchema-1-1"
-            key="domainpropertiesrow-lookupSchema-1-1"
-            onChange={[Function]}
-            value="exp"
-          >
-            <SchemaSelectImpl
-              containerPath="/StudyVerifyProject/My Study"
-              context={
-                {
-                  "activeContainer": Container {
-                    "activeModules": [],
-                    "effectivePermissions": [],
-                    "folderType": "",
-                    "formats": {
-                      "dateFormat": "",
-                      "dateTimeFormat": "",
-                      "numberFormat": "",
-                      "timeFormat": "",
-                    },
-                    "hasRestrictedActiveModule": false,
-                    "iconHref": "",
-                    "id": "e0ea3e55-3420-1035-8057-68fea9bfb3a0",
-                    "isContainerTab": false,
-                    "isWorkbook": false,
-                    "name": "My Study",
-                    "parentId": "",
-                    "parentPath": "",
-                    "path": "/StudyVerifyProject/My Study",
-                    "sortOrder": 0,
-                    "startUrl": "",
-                    "title": "",
-                    "type": "",
-                  },
-                  "fetchContainers": [Function],
-                  "fetchQueries": [Function],
-                  "fetchSchemas": [Function],
-                  "getExcludedSchemaQueryNames": [Function],
-                }
-              }
-              disabled={false}
-              id="domainpropertiesrow-lookupSchema-1-1"
-              name="domainpropertiesrow-lookupSchema"
-              onChange={[Function]}
-              value="exp"
-            >
-              <select
-                className="form-control"
-                disabled={false}
-                id="domainpropertiesrow-lookupSchema-1-1"
-                name="domainpropertiesrow-lookupSchema"
-                onChange={[Function]}
-                placeholder="Select Schema"
-                value="exp"
-              >
-                <option
-                  disabled={true}
-                  key="_loading"
-                  value="exp"
-                >
-                  Loading...
-                </option>
-              </select>
-            </SchemaSelectImpl>
-          </SchemaSelect>
-        </div>
-        <div
-          className="col-xs-2"
-        >
-          <div
-            className="domain-field-label"
-          >
-            Target Table
-          </div>
-          <TargetTableSelect
-            containerPath="/StudyVerifyProject/My Study"
-            disabled={false}
-            id="domainpropertiesrow-lookupQueryValue-1-1"
-            key="domainpropertiesrow-lookupQueryValue-1-1"
-            lookupIsValid={true}
-            lookupURI="http://www.w3.org/2001/XMLSchema#int"
-            onChange={[Function]}
-            schemaName="exp"
-            shouldDisableNonExists={true}
-            value="Data"
-          >
-            <TargetTableSelectImpl
-              containerPath="/StudyVerifyProject/My Study"
-              context={
-                {
-                  "activeContainer": Container {
-                    "activeModules": [],
-                    "effectivePermissions": [],
-                    "folderType": "",
-                    "formats": {
-                      "dateFormat": "",
-                      "dateTimeFormat": "",
-                      "numberFormat": "",
-                      "timeFormat": "",
-                    },
-                    "hasRestrictedActiveModule": false,
-                    "iconHref": "",
-                    "id": "e0ea3e55-3420-1035-8057-68fea9bfb3a0",
-                    "isContainerTab": false,
-                    "isWorkbook": false,
-                    "name": "My Study",
-                    "parentId": "",
-                    "parentPath": "",
-                    "path": "/StudyVerifyProject/My Study",
-                    "sortOrder": 0,
-                    "startUrl": "",
-                    "title": "",
-                    "type": "",
-                  },
-                  "fetchContainers": [Function],
-                  "fetchQueries": [Function],
-                  "fetchSchemas": [Function],
-                  "getExcludedSchemaQueryNames": [Function],
-                }
-              }
-              disabled={false}
-              id="domainpropertiesrow-lookupQueryValue-1-1"
-              lookupIsValid={true}
-              lookupURI="http://www.w3.org/2001/XMLSchema#int"
-              name="domainpropertiesrow-lookupQueryValue"
-              onChange={[Function]}
-              schemaName="exp"
-              shouldDisableNonExists={true}
-              value="Data"
-            >
-              <select
-                className="form-control"
-                disabled={true}
-                id="domainpropertiesrow-lookupQueryValue-1-1"
-                name="domainpropertiesrow-lookupQueryValue"
-                onChange={[Function]}
-                value="Data"
-              >
-                <option
-                  disabled={true}
-                  key="_loading"
-                  value="Data"
-                >
-                  Loading...
-                </option>
-              </select>
-            </TargetTableSelectImpl>
-          </TargetTableSelect>
-        </div>
-        <div
-          className="col-xs-6"
-        >
-          <div
-            className="domain-field-label"
-          >
-            Lookup Validator
-          </div>
-          <Memo()
-            checked={false}
-            className="domain-field-checkbox-margin"
-            id="domainpropertiesrow-lookupValidator-1-1"
-            name="domainpropertiesrow-lookupValidator"
-            onChange={[Function]}
-          >
-            <div
-              className="checkbox domain-field-checkbox-margin"
-            >
-              <label>
-                <input
-                  checked={false}
-                  id="domainpropertiesrow-lookupValidator-1-1"
-                  name="domainpropertiesrow-lookupValidator"
-                  onChange={[Function]}
-                  type="checkbox"
-                />
-                <span
-                  className="domain-lookup-validator-text"
-                >
-                  Ensure Value Exists in Lookup Target
-                </span>
-                <LabelHelpTip
-                  title="Lookup Validator"
-                >
-                  <OverlayTrigger
-                    id="label-help-tip0"
-                    overlay={
-                      <Popover
-                        id="label-help-tip-popover"
-                        title="Lookup Validator"
-                      >
-                        <div>
-                          Lookup validators allow you to require that any value is present in the lookup's target table or query
-                        </div>
-                      </Popover>
-                    }
-                  >
-                    <div
-                      className="overlay-trigger"
-                      onClick={[Function]}
-                      onMouseEnter={[Function]}
-                      onMouseLeave={[Function]}
-                    >
-                      <span
-                        className="label-help-target"
-                      >
-                        <span
-                          className="label-help-icon fa fa-question-circle"
-                        />
-                      </span>
-                    </div>
-                  </OverlayTrigger>
-                </LabelHelpTip>
-              </label>
-            </div>
-          </Memo()>
-        </div>
-      </div>
-    </div>
-  </LookupFieldOptions>
-</MockLookupProvider>
-`;
-
-exports[`LookupFieldOptions Selected container changes queries 1`] = `
-<MockLookupProvider>
-  <LookupFieldOptions
-    domainIndex={1}
-    field={
-      Immutable.Record {
-        "conceptURI": undefined,
-        "conditionalFormats": Immutable.List [],
-        "defaultScale": undefined,
-        "defaultValueType": undefined,
-        "defaultValue": undefined,
-        "defaultDisplayValue": undefined,
-        "description": undefined,
-        "dimension": undefined,
-        "excludeFromShifting": false,
-        "format": undefined,
-        "hidden": false,
-        "importAliases": undefined,
-        "label": undefined,
-        "lookupContainer": undefined,
-        "lookupQuery": undefined,
-        "lookupSchema": "",
-        "lookupValidator": undefined,
-        "lookupIsValid": true,
-        "measure": undefined,
-        "mvEnabled": false,
-        "name": undefined,
-        "PHI": undefined,
-        "propertyId": undefined,
-        "propertyURI": undefined,
-        "propertyValidators": Immutable.List [],
-        "rangeValidators": Immutable.List [],
-        "rangeURI": undefined,
-        "regexValidators": Immutable.List [],
-        "textChoiceValidator": undefined,
-        "recommendedVariable": false,
-        "uniqueConstraint": false,
-        "required": false,
-        "scale": 4000,
-        "URL": undefined,
-        "shownInDetailsView": true,
-        "shownInInsertView": true,
-        "shownInUpdateView": true,
-        "visible": true,
-        "dataType": Immutable.Record {
-          "conceptURI": undefined,
-          "display": "Lookup",
-          "name": "lookup",
-          "rangeURI": undefined,
-          "alternateRangeURI": undefined,
-          "shortDisplay": undefined,
-          "lookupSchema": undefined,
-          "lookupQuery": undefined,
-        },
-        "lookupQueryValue": "",
-        "lookupType": undefined,
-        "original": Immutable.Record {
-          "conceptURI": undefined,
-          "conditionalFormats": Immutable.List [],
-          "defaultScale": undefined,
-          "defaultValueType": undefined,
-          "defaultValue": undefined,
-          "defaultDisplayValue": undefined,
-          "description": undefined,
-          "dimension": undefined,
-          "excludeFromShifting": false,
-          "format": undefined,
-          "hidden": false,
-          "importAliases": undefined,
-          "label": undefined,
-          "lookupContainer": undefined,
-          "lookupQuery": undefined,
-          "lookupSchema": undefined,
-          "lookupValidator": undefined,
-          "lookupIsValid": undefined,
-          "measure": undefined,
-          "mvEnabled": false,
-          "name": "key",
-          "PHI": undefined,
-          "propertyId": 1,
-          "propertyURI": "test",
-          "propertyValidators": Immutable.List [],
-          "rangeValidators": Immutable.List [],
-          "rangeURI": "http://www.w3.org/2001/XMLSchema#int",
-          "regexValidators": Immutable.List [],
-          "textChoiceValidator": undefined,
-          "recommendedVariable": false,
-          "uniqueConstraint": false,
-          "required": false,
-          "scale": 4000,
-          "URL": undefined,
-          "shownInDetailsView": true,
-          "shownInInsertView": true,
-          "shownInUpdateView": true,
-          "visible": true,
-          "dataType": Immutable.Record {
-            "conceptURI": undefined,
-            "display": "Integer",
-            "name": "int",
-            "rangeURI": "http://www.w3.org/2001/XMLSchema#int",
-            "alternateRangeURI": "xsd:int",
-            "shortDisplay": undefined,
-            "lookupSchema": undefined,
-            "lookupQuery": undefined,
-          },
-          "lookupQueryValue": undefined,
-          "lookupType": Immutable.Record {
-            "conceptURI": undefined,
-            "display": "Lookup",
-            "name": "lookup",
-            "rangeURI": "http://www.w3.org/2001/XMLSchema#int",
-            "alternateRangeURI": undefined,
-            "shortDisplay": undefined,
-            "lookupSchema": undefined,
-            "lookupQuery": undefined,
-          },
-          "original": {
-            "conceptURI": undefined,
-            "dataType": Immutable.Record {
-              "conceptURI": undefined,
-              "display": "Integer",
-              "name": "int",
-              "rangeURI": "http://www.w3.org/2001/XMLSchema#int",
-              "alternateRangeURI": "xsd:int",
-              "shortDisplay": undefined,
-              "lookupSchema": undefined,
-              "lookupQuery": undefined,
-            },
-            "name": "key",
-            "rangeURI": "http://www.w3.org/2001/XMLSchema#int",
-          },
-          "updatedField": false,
-          "isPrimaryKey": false,
-          "lockType": "NotLocked",
-          "wrappedColumnName": undefined,
-          "valueExpression": undefined,
-          "disablePhiLevel": false,
-          "lockExistingField": false,
-          "sourceOntology": undefined,
-          "conceptSubtree": undefined,
-          "conceptLabelColumn": undefined,
-          "conceptImportColumn": undefined,
-          "principalConceptCode": undefined,
-          "derivationDataScope": undefined,
-          "selected": false,
-          "scannable": false,
-        },
-        "updatedField": false,
-        "isPrimaryKey": false,
-        "lockType": "NotLocked",
-        "wrappedColumnName": undefined,
-        "valueExpression": undefined,
-        "disablePhiLevel": false,
-        "lockExistingField": false,
-        "sourceOntology": undefined,
-        "conceptSubtree": undefined,
-        "conceptLabelColumn": undefined,
-        "conceptImportColumn": undefined,
-        "principalConceptCode": undefined,
-        "derivationDataScope": undefined,
-        "selected": false,
-        "scannable": false,
-      }
-    }
-    index={1}
-    label="Lookup Field Options"
-    lockType="NotLocked"
-    lookupContainer="/StudyVerifyProject"
-    onChange={[MockFunction]}
-    onMultiChange={[MockFunction]}
-  >
-    <div>
-      <div
-        className="row"
-      >
-        <div
-          className="col-xs-12"
-        >
-          <div
-            className="domain-field-section-heading"
-          >
-            Lookup Field Options
-          </div>
-        </div>
-      </div>
-      <div
-        className="row"
-      >
-        <div
-          className="col-xs-2"
-        >
-          <div
-            className="domain-field-label"
-          >
-            Target Folder
-          </div>
-          <FolderSelect
-            disabled={false}
-            id="domainpropertiesrow-lookupContainer-1-1"
-            key="domainpropertiesrow-lookupContainer-1-1"
-            onChange={[Function]}
-            value="/StudyVerifyProject"
-          >
-            <FolderSelectImpl
-              context={
-                {
-                  "activeContainer": Container {
-                    "activeModules": [],
-                    "effectivePermissions": [],
-                    "folderType": "",
-                    "formats": {
-                      "dateFormat": "",
-                      "dateTimeFormat": "",
-                      "numberFormat": "",
-                      "timeFormat": "",
-                    },
-                    "hasRestrictedActiveModule": false,
-                    "iconHref": "",
-                    "id": "e0ea3e55-3420-1035-8057-68fea9bfb3a0",
-                    "isContainerTab": false,
-                    "isWorkbook": false,
-                    "name": "My Study",
-                    "parentId": "",
-                    "parentPath": "",
-                    "path": "/StudyVerifyProject/My Study",
-                    "sortOrder": 0,
-                    "startUrl": "",
-                    "title": "",
-                    "type": "",
-                  },
-                  "fetchContainers": [Function],
-                  "fetchQueries": [Function],
-                  "fetchSchemas": [Function],
-                  "getExcludedSchemaQueryNames": [Function],
-                }
-              }
-              disabled={false}
-              id="domainpropertiesrow-lookupContainer-1-1"
-              name="domainpropertiesrow-lookupContainer"
-              onChange={[Function]}
-              value="/StudyVerifyProject"
-            >
-              <select
-                className="form-control"
-                context={
-                  {
-                    "activeContainer": Container {
-                      "activeModules": [],
-                      "effectivePermissions": [],
-                      "folderType": "",
-                      "formats": {
-                        "dateFormat": "",
-                        "dateTimeFormat": "",
-                        "numberFormat": "",
-                        "timeFormat": "",
-                      },
-                      "hasRestrictedActiveModule": false,
-                      "iconHref": "",
-                      "id": "e0ea3e55-3420-1035-8057-68fea9bfb3a0",
-                      "isContainerTab": false,
-                      "isWorkbook": false,
-                      "name": "My Study",
-                      "parentId": "",
-                      "parentPath": "",
-                      "path": "/StudyVerifyProject/My Study",
-                      "sortOrder": 0,
-                      "startUrl": "",
-                      "title": "",
-                      "type": "",
-                    },
-                    "fetchContainers": [Function],
-                    "fetchQueries": [Function],
-                    "fetchSchemas": [Function],
-                    "getExcludedSchemaQueryNames": [Function],
-                  }
-                }
-                disabled={false}
-                id="domainpropertiesrow-lookupContainer-1-1"
-                name="domainpropertiesrow-lookupContainer"
-                onChange={[Function]}
-                value="/StudyVerifyProject"
-              >
-                <option
-                  key="_current"
-                  value=""
-                >
-                  Current 
-                  Folder
-                </option>
-                <option
-                  key="a21a06e1-4058-1037-95c6-1e81b2533cfd"
-                  value="/StudyVerifyProject"
-                >
-                  /StudyVerifyProject
-                </option>
-                <option
-                  key="e0ea3e55-3420-1035-8057-68fea9bfb3a0"
-                  value="/StudyVerifyProject/My Study"
-                >
-                  /StudyVerifyProject/My Study
-                </option>
-              </select>
-            </FolderSelectImpl>
-          </FolderSelect>
-        </div>
-        <div
-          className="col-xs-2"
-        >
-          <div
-            className="domain-field-label"
-          >
-            Target Schema
-          </div>
-          <SchemaSelect
-            containerPath="/StudyVerifyProject"
-            disabled={false}
-            id="domainpropertiesrow-lookupSchema-1-1"
-            key="domainpropertiesrow-lookupSchema-1-1"
-            onChange={[Function]}
-            value=""
-          >
-            <SchemaSelectImpl
-              containerPath="/StudyVerifyProject"
-              context={
-                {
-                  "activeContainer": Container {
-                    "activeModules": [],
-                    "effectivePermissions": [],
-                    "folderType": "",
-                    "formats": {
-                      "dateFormat": "",
-                      "dateTimeFormat": "",
-                      "numberFormat": "",
-                      "timeFormat": "",
-                    },
-                    "hasRestrictedActiveModule": false,
-                    "iconHref": "",
-                    "id": "e0ea3e55-3420-1035-8057-68fea9bfb3a0",
-                    "isContainerTab": false,
-                    "isWorkbook": false,
-                    "name": "My Study",
-                    "parentId": "",
-                    "parentPath": "",
-                    "path": "/StudyVerifyProject/My Study",
-                    "sortOrder": 0,
-                    "startUrl": "",
-                    "title": "",
-                    "type": "",
-                  },
-                  "fetchContainers": [Function],
-                  "fetchQueries": [Function],
-                  "fetchSchemas": [Function],
-                  "getExcludedSchemaQueryNames": [Function],
-                }
-              }
-              disabled={false}
-              id="domainpropertiesrow-lookupSchema-1-1"
-              name="domainpropertiesrow-lookupSchema"
-              onChange={[Function]}
-              value=""
-            >
-              <select
-                className="form-control"
-                disabled={false}
-                id="domainpropertiesrow-lookupSchema-1-1"
-                name="domainpropertiesrow-lookupSchema"
-                onChange={[Function]}
-                placeholder="Select Schema"
-                value=""
-              >
-                <option
-                  key="_default"
-                />
-                <option
-                  key="exp"
-                  value="exp"
-                >
-                  exp
-                </option>
-                <option
-                  key="exp.data"
-                  value="exp.data"
-                >
-                  exp.data
-                </option>
-                <option
-                  key="exp.materials"
-                  value="exp.materials"
-                >
-                  exp.materials
-                </option>
-                <option
-                  key="lists"
-                  value="lists"
-                >
-                  lists
-                </option>
-                <option
-                  key="study"
-                  value="study"
-                >
-                  study
-                </option>
-              </select>
-            </SchemaSelectImpl>
-          </SchemaSelect>
-        </div>
-        <div
-          className="col-xs-2"
-        >
-          <div
-            className="domain-field-label"
-          >
-            Target Table
-          </div>
-          <TargetTableSelect
-            containerPath="/StudyVerifyProject"
-            disabled={false}
-            id="domainpropertiesrow-lookupQueryValue-1-1"
-            key="domainpropertiesrow-lookupQueryValue-1-1"
-            lookupIsValid={true}
-            lookupURI="http://www.w3.org/2001/XMLSchema#int"
-            onChange={[Function]}
-            schemaName=""
-            shouldDisableNonExists={true}
-            value=""
-          >
-            <TargetTableSelectImpl
-              containerPath="/StudyVerifyProject"
-              context={
-                {
-                  "activeContainer": Container {
-                    "activeModules": [],
-                    "effectivePermissions": [],
-                    "folderType": "",
-                    "formats": {
-                      "dateFormat": "",
-                      "dateTimeFormat": "",
-                      "numberFormat": "",
-                      "timeFormat": "",
-                    },
-                    "hasRestrictedActiveModule": false,
-                    "iconHref": "",
-                    "id": "e0ea3e55-3420-1035-8057-68fea9bfb3a0",
-                    "isContainerTab": false,
-                    "isWorkbook": false,
-                    "name": "My Study",
-                    "parentId": "",
-                    "parentPath": "",
-                    "path": "/StudyVerifyProject/My Study",
-                    "sortOrder": 0,
-                    "startUrl": "",
-                    "title": "",
-                    "type": "",
-                  },
-                  "fetchContainers": [Function],
-                  "fetchQueries": [Function],
-                  "fetchSchemas": [Function],
-                  "getExcludedSchemaQueryNames": [Function],
-                }
-              }
-              disabled={false}
-              id="domainpropertiesrow-lookupQueryValue-1-1"
-              lookupIsValid={true}
-              lookupURI="http://www.w3.org/2001/XMLSchema#int"
-              name="domainpropertiesrow-lookupQueryValue"
-              onChange={[Function]}
-              schemaName=""
-              shouldDisableNonExists={true}
-              value=""
-            >
-              <select
-                className="form-control"
-                disabled={false}
-                id="domainpropertiesrow-lookupQueryValue-1-1"
-                name="domainpropertiesrow-lookupQueryValue"
-                onChange={[Function]}
-                value=""
-              >
-                <option
-                  key="_default"
-                />
-                <option
-                  disabled={false}
-                  key="http://www.w3.org/2001/XMLSchema#int|Data"
-                  value="http://www.w3.org/2001/XMLSchema#int|Data"
-                >
-                  Data
-                   (
-                  Integer
-                  )
-                </option>
-                <option
-                  disabled={false}
-                  key="http://www.w3.org/2001/XMLSchema#int|DataInputs"
-                  value="http://www.w3.org/2001/XMLSchema#int|DataInputs"
-                >
-                  DataInputs
-                   (
-                  Integer
-                  )
-                </option>
-                <option
-                  disabled={false}
-                  key="http://www.w3.org/2001/XMLSchema#int|Runs"
-                  value="http://www.w3.org/2001/XMLSchema#int|Runs"
-                >
-                  Runs
-                   (
-                  Integer
-                  )
-                </option>
-              </select>
-            </TargetTableSelectImpl>
-          </TargetTableSelect>
-        </div>
-        <div
-          className="col-xs-6"
-        >
-          <div
-            className="domain-field-label"
-          >
-            Lookup Validator
-          </div>
-          <Memo()
-            checked={false}
-            className="domain-field-checkbox-margin"
-            id="domainpropertiesrow-lookupValidator-1-1"
-            name="domainpropertiesrow-lookupValidator"
-            onChange={[Function]}
-          >
-            <div
-              className="checkbox domain-field-checkbox-margin"
-            >
-              <label>
-                <input
-                  checked={false}
-                  id="domainpropertiesrow-lookupValidator-1-1"
-                  name="domainpropertiesrow-lookupValidator"
-                  onChange={[Function]}
-                  type="checkbox"
-                />
-                <span
-                  className="domain-lookup-validator-text"
-                >
-                  Ensure Value Exists in Lookup Target
-                </span>
-                <LabelHelpTip
-                  title="Lookup Validator"
-                >
-                  <OverlayTrigger
-                    id="label-help-tip3"
-                    overlay={
-                      <Popover
-                        id="label-help-tip-popover"
-                        title="Lookup Validator"
-                      >
-                        <div>
-                          Lookup validators allow you to require that any value is present in the lookup's target table or query
-                        </div>
-                      </Popover>
-                    }
-                  >
-                    <div
-                      className="overlay-trigger"
-                      onClick={[Function]}
-                      onMouseEnter={[Function]}
-                      onMouseLeave={[Function]}
-                    >
-                      <span
-                        className="label-help-target"
-                      >
-                        <span
-                          className="label-help-icon fa fa-question-circle"
-                        />
-                      </span>
-                    </div>
-                  </OverlayTrigger>
-                </LabelHelpTip>
-              </label>
-            </div>
-          </Memo()>
-        </div>
-      </div>
-    </div>
-  </LookupFieldOptions>
-</MockLookupProvider>
-`;
-
-exports[`LookupFieldOptions Selected container changes schemas 1`] = `
-<MockLookupProvider>
-  <LookupFieldOptions
-    domainIndex={1}
-    field={
-      Immutable.Record {
-        "conceptURI": undefined,
-        "conditionalFormats": Immutable.List [],
-        "defaultScale": undefined,
-        "defaultValueType": undefined,
-        "defaultValue": undefined,
-        "defaultDisplayValue": undefined,
-        "description": undefined,
-        "dimension": undefined,
-        "excludeFromShifting": false,
-        "format": undefined,
-        "hidden": false,
-        "importAliases": undefined,
-        "label": undefined,
-        "lookupContainer": undefined,
-        "lookupQuery": undefined,
-        "lookupSchema": "",
-        "lookupValidator": undefined,
-        "lookupIsValid": undefined,
-        "measure": undefined,
-        "mvEnabled": false,
-        "name": undefined,
-        "PHI": undefined,
-        "propertyId": undefined,
-        "propertyURI": undefined,
-        "propertyValidators": Immutable.List [],
-        "rangeValidators": Immutable.List [],
-        "rangeURI": undefined,
-        "regexValidators": Immutable.List [],
-        "textChoiceValidator": undefined,
-        "recommendedVariable": false,
-        "uniqueConstraint": false,
-        "required": false,
-        "scale": 4000,
-        "URL": undefined,
-        "shownInDetailsView": true,
-        "shownInInsertView": true,
-        "shownInUpdateView": true,
-        "visible": true,
-        "dataType": Immutable.Record {
-          "conceptURI": undefined,
-          "display": "Lookup",
-          "name": "lookup",
-          "rangeURI": undefined,
-          "alternateRangeURI": undefined,
-          "shortDisplay": undefined,
-          "lookupSchema": undefined,
-          "lookupQuery": undefined,
-        },
-        "lookupQueryValue": "",
-        "lookupType": undefined,
-        "original": Immutable.Record {
-          "conceptURI": undefined,
-          "conditionalFormats": Immutable.List [],
-          "defaultScale": undefined,
-          "defaultValueType": undefined,
-          "defaultValue": undefined,
-          "defaultDisplayValue": undefined,
-          "description": undefined,
-          "dimension": undefined,
-          "excludeFromShifting": false,
-          "format": undefined,
-          "hidden": false,
-          "importAliases": undefined,
-          "label": undefined,
-          "lookupContainer": undefined,
-          "lookupQuery": undefined,
-          "lookupSchema": undefined,
-          "lookupValidator": undefined,
-          "lookupIsValid": undefined,
-          "measure": undefined,
-          "mvEnabled": false,
-          "name": "key",
-          "PHI": undefined,
-          "propertyId": 1,
-          "propertyURI": "test",
-          "propertyValidators": Immutable.List [],
-          "rangeValidators": Immutable.List [],
-          "rangeURI": "http://www.w3.org/2001/XMLSchema#int",
-          "regexValidators": Immutable.List [],
-          "textChoiceValidator": undefined,
-          "recommendedVariable": false,
-          "uniqueConstraint": false,
-          "required": false,
-          "scale": 4000,
-          "URL": undefined,
-          "shownInDetailsView": true,
-          "shownInInsertView": true,
-          "shownInUpdateView": true,
-          "visible": true,
-          "dataType": Immutable.Record {
-            "conceptURI": undefined,
-            "display": "Integer",
-            "name": "int",
-            "rangeURI": "http://www.w3.org/2001/XMLSchema#int",
-            "alternateRangeURI": "xsd:int",
-            "shortDisplay": undefined,
-            "lookupSchema": undefined,
-            "lookupQuery": undefined,
-          },
-          "lookupQueryValue": undefined,
-          "lookupType": Immutable.Record {
-            "conceptURI": undefined,
-            "display": "Lookup",
-            "name": "lookup",
-            "rangeURI": "http://www.w3.org/2001/XMLSchema#int",
-            "alternateRangeURI": undefined,
-            "shortDisplay": undefined,
-            "lookupSchema": undefined,
-            "lookupQuery": undefined,
-          },
-          "original": {
-            "conceptURI": undefined,
-            "dataType": Immutable.Record {
-              "conceptURI": undefined,
-              "display": "Integer",
-              "name": "int",
-              "rangeURI": "http://www.w3.org/2001/XMLSchema#int",
-              "alternateRangeURI": "xsd:int",
-              "shortDisplay": undefined,
-              "lookupSchema": undefined,
-              "lookupQuery": undefined,
-            },
-            "name": "key",
-            "rangeURI": "http://www.w3.org/2001/XMLSchema#int",
-          },
-          "updatedField": false,
-          "isPrimaryKey": false,
-          "lockType": "NotLocked",
-          "wrappedColumnName": undefined,
-          "valueExpression": undefined,
-          "disablePhiLevel": false,
-          "lockExistingField": false,
-          "sourceOntology": undefined,
-          "conceptSubtree": undefined,
-          "conceptLabelColumn": undefined,
-          "conceptImportColumn": undefined,
-          "principalConceptCode": undefined,
-          "derivationDataScope": undefined,
-          "selected": false,
-          "scannable": false,
-        },
-        "updatedField": false,
-        "isPrimaryKey": false,
-        "lockType": "NotLocked",
-        "wrappedColumnName": undefined,
-        "valueExpression": undefined,
-        "disablePhiLevel": false,
-        "lockExistingField": false,
-        "sourceOntology": undefined,
-        "conceptSubtree": undefined,
-        "conceptLabelColumn": undefined,
-        "conceptImportColumn": undefined,
-        "principalConceptCode": undefined,
-        "derivationDataScope": undefined,
-        "selected": false,
-        "scannable": false,
-      }
-    }
-    index={1}
-    label="Lookup Field Options"
-    lockType="NotLocked"
-    lookupContainer="/StudyVerifyProject"
-    onChange={[MockFunction]}
-    onMultiChange={[MockFunction]}
-  >
-    <div>
-      <div
-        className="row"
-      >
-        <div
-          className="col-xs-12"
-        >
-          <div
-            className="domain-field-section-heading"
-          >
-            Lookup Field Options
-          </div>
-        </div>
-      </div>
-      <div
-        className="row"
-      >
-        <div
-          className="col-xs-2"
-        >
-          <div
-            className="domain-field-label"
-          >
-            Target Folder
-          </div>
-          <FolderSelect
-            disabled={false}
-            id="domainpropertiesrow-lookupContainer-1-1"
-            key="domainpropertiesrow-lookupContainer-1-1"
-            onChange={[Function]}
-            value="/StudyVerifyProject"
-          >
-            <FolderSelectImpl
-              context={
-                {
-                  "activeContainer": Container {
-                    "activeModules": [],
-                    "effectivePermissions": [],
-                    "folderType": "",
-                    "formats": {
-                      "dateFormat": "",
-                      "dateTimeFormat": "",
-                      "numberFormat": "",
-                      "timeFormat": "",
-                    },
-                    "hasRestrictedActiveModule": false,
-                    "iconHref": "",
-                    "id": "e0ea3e55-3420-1035-8057-68fea9bfb3a0",
-                    "isContainerTab": false,
-                    "isWorkbook": false,
-                    "name": "My Study",
-                    "parentId": "",
-                    "parentPath": "",
-                    "path": "/StudyVerifyProject/My Study",
-                    "sortOrder": 0,
-                    "startUrl": "",
-                    "title": "",
-                    "type": "",
-                  },
-                  "fetchContainers": [Function],
-                  "fetchQueries": [Function],
-                  "fetchSchemas": [Function],
-                  "getExcludedSchemaQueryNames": [Function],
-                }
-              }
-              disabled={false}
-              id="domainpropertiesrow-lookupContainer-1-1"
-              name="domainpropertiesrow-lookupContainer"
-              onChange={[Function]}
-              value="/StudyVerifyProject"
-            >
-              <select
-                className="form-control"
-                context={
-                  {
-                    "activeContainer": Container {
-                      "activeModules": [],
-                      "effectivePermissions": [],
-                      "folderType": "",
-                      "formats": {
-                        "dateFormat": "",
-                        "dateTimeFormat": "",
-                        "numberFormat": "",
-                        "timeFormat": "",
-                      },
-                      "hasRestrictedActiveModule": false,
-                      "iconHref": "",
-                      "id": "e0ea3e55-3420-1035-8057-68fea9bfb3a0",
-                      "isContainerTab": false,
-                      "isWorkbook": false,
-                      "name": "My Study",
-                      "parentId": "",
-                      "parentPath": "",
-                      "path": "/StudyVerifyProject/My Study",
-                      "sortOrder": 0,
-                      "startUrl": "",
-                      "title": "",
-                      "type": "",
-                    },
-                    "fetchContainers": [Function],
-                    "fetchQueries": [Function],
-                    "fetchSchemas": [Function],
-                    "getExcludedSchemaQueryNames": [Function],
-                  }
-                }
-                disabled={false}
-                id="domainpropertiesrow-lookupContainer-1-1"
-                name="domainpropertiesrow-lookupContainer"
-                onChange={[Function]}
-                value="/StudyVerifyProject"
-              >
-                <option
-                  key="_current"
-                  value=""
-                >
-                  Current 
-                  Folder
-                </option>
-                <option
-                  key="a21a06e1-4058-1037-95c6-1e81b2533cfd"
-                  value="/StudyVerifyProject"
-                >
-                  /StudyVerifyProject
-                </option>
-                <option
-                  key="e0ea3e55-3420-1035-8057-68fea9bfb3a0"
-                  value="/StudyVerifyProject/My Study"
-                >
-                  /StudyVerifyProject/My Study
-                </option>
-              </select>
-            </FolderSelectImpl>
-          </FolderSelect>
-        </div>
-        <div
-          className="col-xs-2"
-        >
-          <div
-            className="domain-field-label"
-          >
-            Target Schema
-          </div>
-          <SchemaSelect
-            containerPath="/StudyVerifyProject"
-            disabled={false}
-            id="domainpropertiesrow-lookupSchema-1-1"
-            key="domainpropertiesrow-lookupSchema-1-1"
-            onChange={[Function]}
-            value=""
-          >
-            <SchemaSelectImpl
-              containerPath="/StudyVerifyProject"
-              context={
-                {
-                  "activeContainer": Container {
-                    "activeModules": [],
-                    "effectivePermissions": [],
-                    "folderType": "",
-                    "formats": {
-                      "dateFormat": "",
-                      "dateTimeFormat": "",
-                      "numberFormat": "",
-                      "timeFormat": "",
-                    },
-                    "hasRestrictedActiveModule": false,
-                    "iconHref": "",
-                    "id": "e0ea3e55-3420-1035-8057-68fea9bfb3a0",
-                    "isContainerTab": false,
-                    "isWorkbook": false,
-                    "name": "My Study",
-                    "parentId": "",
-                    "parentPath": "",
-                    "path": "/StudyVerifyProject/My Study",
-                    "sortOrder": 0,
-                    "startUrl": "",
-                    "title": "",
-                    "type": "",
-                  },
-                  "fetchContainers": [Function],
-                  "fetchQueries": [Function],
-                  "fetchSchemas": [Function],
-                  "getExcludedSchemaQueryNames": [Function],
-                }
-              }
-              disabled={false}
-              id="domainpropertiesrow-lookupSchema-1-1"
-              name="domainpropertiesrow-lookupSchema"
-              onChange={[Function]}
-              value=""
-            >
-              <select
-                className="form-control"
-                disabled={false}
-                id="domainpropertiesrow-lookupSchema-1-1"
-                name="domainpropertiesrow-lookupSchema"
-                onChange={[Function]}
-                placeholder="Select Schema"
-                value=""
-              >
-                <option
-                  key="_default"
-                />
-                <option
-                  key="exp"
-                  value="exp"
-                >
-                  exp
-                </option>
-                <option
-                  key="exp.data"
-                  value="exp.data"
-                >
-                  exp.data
-                </option>
-                <option
-                  key="exp.materials"
-                  value="exp.materials"
-                >
-                  exp.materials
-                </option>
-                <option
-                  key="lists"
-                  value="lists"
-                >
-                  lists
-                </option>
-                <option
-                  key="study"
-                  value="study"
-                >
-                  study
-                </option>
-              </select>
-            </SchemaSelectImpl>
-          </SchemaSelect>
-        </div>
-        <div
-          className="col-xs-2"
-        >
-          <div
-            className="domain-field-label"
-          >
-            Target Table
-          </div>
-          <TargetTableSelect
-            containerPath="/StudyVerifyProject"
-            disabled={false}
-            id="domainpropertiesrow-lookupQueryValue-1-1"
-            key="domainpropertiesrow-lookupQueryValue-1-1"
-            lookupURI="http://www.w3.org/2001/XMLSchema#int"
-            onChange={[Function]}
-            schemaName=""
-            value=""
-          >
-            <TargetTableSelectImpl
-              containerPath="/StudyVerifyProject"
-              context={
-                {
-                  "activeContainer": Container {
-                    "activeModules": [],
-                    "effectivePermissions": [],
-                    "folderType": "",
-                    "formats": {
-                      "dateFormat": "",
-                      "dateTimeFormat": "",
-                      "numberFormat": "",
-                      "timeFormat": "",
-                    },
-                    "hasRestrictedActiveModule": false,
-                    "iconHref": "",
-                    "id": "e0ea3e55-3420-1035-8057-68fea9bfb3a0",
-                    "isContainerTab": false,
-                    "isWorkbook": false,
-                    "name": "My Study",
-                    "parentId": "",
-                    "parentPath": "",
-                    "path": "/StudyVerifyProject/My Study",
-                    "sortOrder": 0,
-                    "startUrl": "",
-                    "title": "",
-                    "type": "",
-                  },
-                  "fetchContainers": [Function],
-                  "fetchQueries": [Function],
-                  "fetchSchemas": [Function],
-                  "getExcludedSchemaQueryNames": [Function],
-                }
-              }
-              disabled={false}
-              id="domainpropertiesrow-lookupQueryValue-1-1"
-              lookupURI="http://www.w3.org/2001/XMLSchema#int"
-              name="domainpropertiesrow-lookupQueryValue"
-              onChange={[Function]}
-              schemaName=""
-              shouldDisableNonExists={true}
-              value=""
-            >
-              <select
-                className="form-control"
-                disabled={false}
-                id="domainpropertiesrow-lookupQueryValue-1-1"
-                name="domainpropertiesrow-lookupQueryValue"
-                onChange={[Function]}
-                value=""
-              >
-                <option
-                  key="_default"
-                />
-                <option
-                  disabled={false}
-                >
-                   (
-                  Unknown
-                  )
-                </option>
-                <option
-                  disabled={false}
-                  key="http://www.w3.org/2001/XMLSchema#int|Data"
-                  value="http://www.w3.org/2001/XMLSchema#int|Data"
-                >
-                  Data
-                   (
-                  Integer
-                  )
-                </option>
-                <option
-                  disabled={false}
-                  key="http://www.w3.org/2001/XMLSchema#int|DataInputs"
-                  value="http://www.w3.org/2001/XMLSchema#int|DataInputs"
-                >
-                  DataInputs
-                   (
-                  Integer
-                  )
-                </option>
-                <option
-                  disabled={false}
-                  key="http://www.w3.org/2001/XMLSchema#int|Runs"
-                  value="http://www.w3.org/2001/XMLSchema#int|Runs"
-                >
-                  Runs
-                   (
-                  Integer
-                  )
-                </option>
-              </select>
-            </TargetTableSelectImpl>
-          </TargetTableSelect>
-        </div>
-        <div
-          className="col-xs-6"
-        >
-          <div
-            className="domain-field-label"
-          >
-            Lookup Validator
-          </div>
-          <Memo()
-            checked={false}
-            className="domain-field-checkbox-margin"
-            id="domainpropertiesrow-lookupValidator-1-1"
-            name="domainpropertiesrow-lookupValidator"
-            onChange={[Function]}
-          >
-            <div
-              className="checkbox domain-field-checkbox-margin"
-            >
-              <label>
-                <input
-                  checked={false}
-                  id="domainpropertiesrow-lookupValidator-1-1"
-                  name="domainpropertiesrow-lookupValidator"
-                  onChange={[Function]}
-                  type="checkbox"
-                />
-                <span
-                  className="domain-lookup-validator-text"
-                >
-                  Ensure Value Exists in Lookup Target
-                </span>
-                <LabelHelpTip
-                  title="Lookup Validator"
-                >
-                  <OverlayTrigger
-                    id="label-help-tip1"
-                    overlay={
-                      <Popover
-                        id="label-help-tip-popover"
-                        title="Lookup Validator"
-                      >
-                        <div>
-                          Lookup validators allow you to require that any value is present in the lookup's target table or query
-                        </div>
-                      </Popover>
-                    }
-                  >
-                    <div
-                      className="overlay-trigger"
-                      onClick={[Function]}
-                      onMouseEnter={[Function]}
-                      onMouseLeave={[Function]}
-                    >
-                      <span
-                        className="label-help-target"
-                      >
-                        <span
-                          className="label-help-icon fa fa-question-circle"
-                        />
-                      </span>
-                    </div>
-                  </OverlayTrigger>
-                </LabelHelpTip>
-              </label>
-            </div>
-          </Memo()>
-        </div>
-      </div>
-    </div>
-  </LookupFieldOptions>
-</MockLookupProvider>
-`;
-
-exports[`LookupFieldOptions Selected schema changes queries 1`] = `
-<MockLookupProvider>
-  <LookupFieldOptions
-    domainIndex={1}
-    field={
-      Immutable.Record {
-        "conceptURI": undefined,
-        "conditionalFormats": Immutable.List [],
-        "defaultScale": undefined,
-        "defaultValueType": undefined,
-        "defaultValue": undefined,
-        "defaultDisplayValue": undefined,
-        "description": undefined,
-        "dimension": undefined,
-        "excludeFromShifting": false,
-        "format": undefined,
-        "hidden": false,
-        "importAliases": undefined,
-        "label": undefined,
-        "lookupContainer": undefined,
-        "lookupQuery": undefined,
-        "lookupSchema": "study",
-        "lookupValidator": undefined,
-        "lookupIsValid": true,
-        "measure": undefined,
-        "mvEnabled": false,
-        "name": undefined,
-        "PHI": undefined,
-        "propertyId": undefined,
-        "propertyURI": undefined,
-        "propertyValidators": Immutable.List [],
-        "rangeValidators": Immutable.List [],
-        "rangeURI": undefined,
-        "regexValidators": Immutable.List [],
-        "textChoiceValidator": undefined,
-        "recommendedVariable": false,
-        "uniqueConstraint": false,
-        "required": false,
-        "scale": 4000,
-        "URL": undefined,
-        "shownInDetailsView": true,
-        "shownInInsertView": true,
-        "shownInUpdateView": true,
-        "visible": true,
-        "dataType": Immutable.Record {
-          "conceptURI": undefined,
-          "display": "Lookup",
-          "name": "lookup",
-          "rangeURI": undefined,
-          "alternateRangeURI": undefined,
-          "shortDisplay": undefined,
-          "lookupSchema": undefined,
-          "lookupQuery": undefined,
-        },
-        "lookupQueryValue": "",
-        "lookupType": undefined,
-        "original": Immutable.Record {
-          "conceptURI": undefined,
-          "conditionalFormats": Immutable.List [],
-          "defaultScale": undefined,
-          "defaultValueType": undefined,
-          "defaultValue": undefined,
-          "defaultDisplayValue": undefined,
-          "description": undefined,
-          "dimension": undefined,
-          "excludeFromShifting": false,
-          "format": undefined,
-          "hidden": false,
-          "importAliases": undefined,
-          "label": undefined,
-          "lookupContainer": undefined,
-          "lookupQuery": undefined,
-          "lookupSchema": undefined,
-          "lookupValidator": undefined,
-          "lookupIsValid": undefined,
-          "measure": undefined,
-          "mvEnabled": false,
-          "name": "key",
-          "PHI": undefined,
-          "propertyId": 1,
-          "propertyURI": "test",
-          "propertyValidators": Immutable.List [],
-          "rangeValidators": Immutable.List [],
-          "rangeURI": "http://www.w3.org/2001/XMLSchema#int",
-          "regexValidators": Immutable.List [],
-          "textChoiceValidator": undefined,
-          "recommendedVariable": false,
-          "uniqueConstraint": false,
-          "required": false,
-          "scale": 4000,
-          "URL": undefined,
-          "shownInDetailsView": true,
-          "shownInInsertView": true,
-          "shownInUpdateView": true,
-          "visible": true,
-          "dataType": Immutable.Record {
-            "conceptURI": undefined,
-            "display": "Integer",
-            "name": "int",
-            "rangeURI": "http://www.w3.org/2001/XMLSchema#int",
-            "alternateRangeURI": "xsd:int",
-            "shortDisplay": undefined,
-            "lookupSchema": undefined,
-            "lookupQuery": undefined,
-          },
-          "lookupQueryValue": undefined,
-          "lookupType": Immutable.Record {
-            "conceptURI": undefined,
-            "display": "Lookup",
-            "name": "lookup",
-            "rangeURI": "http://www.w3.org/2001/XMLSchema#int",
-            "alternateRangeURI": undefined,
-            "shortDisplay": undefined,
-            "lookupSchema": undefined,
-            "lookupQuery": undefined,
-          },
-          "original": {
-            "conceptURI": undefined,
-            "dataType": Immutable.Record {
-              "conceptURI": undefined,
-              "display": "Integer",
-              "name": "int",
-              "rangeURI": "http://www.w3.org/2001/XMLSchema#int",
-              "alternateRangeURI": "xsd:int",
-              "shortDisplay": undefined,
-              "lookupSchema": undefined,
-              "lookupQuery": undefined,
-            },
-            "name": "key",
-            "rangeURI": "http://www.w3.org/2001/XMLSchema#int",
-          },
-          "updatedField": false,
-          "isPrimaryKey": false,
-          "lockType": "NotLocked",
-          "wrappedColumnName": undefined,
-          "valueExpression": undefined,
-          "disablePhiLevel": false,
-          "lockExistingField": false,
-          "sourceOntology": undefined,
-          "conceptSubtree": undefined,
-          "conceptLabelColumn": undefined,
-          "conceptImportColumn": undefined,
-          "principalConceptCode": undefined,
-          "derivationDataScope": undefined,
-          "selected": false,
-          "scannable": false,
-        },
-        "updatedField": false,
-        "isPrimaryKey": false,
-        "lockType": "NotLocked",
-        "wrappedColumnName": undefined,
-        "valueExpression": undefined,
-        "disablePhiLevel": false,
-        "lockExistingField": false,
-        "sourceOntology": undefined,
-        "conceptSubtree": undefined,
-        "conceptLabelColumn": undefined,
-        "conceptImportColumn": undefined,
-        "principalConceptCode": undefined,
-        "derivationDataScope": undefined,
-        "selected": false,
-        "scannable": false,
-      }
-    }
-    index={1}
-    label="Lookup Field Options"
-    lockType="NotLocked"
-    lookupContainer="/StudyVerifyProject/My Study"
-    onChange={[MockFunction]}
-    onMultiChange={[MockFunction]}
-  >
-    <div>
-      <div
-        className="row"
-      >
-        <div
-          className="col-xs-12"
-        >
-          <div
-            className="domain-field-section-heading"
-          >
-            Lookup Field Options
-          </div>
-        </div>
-      </div>
-      <div
-        className="row"
-      >
-        <div
-          className="col-xs-2"
-        >
-          <div
-            className="domain-field-label"
-          >
-            Target Folder
-          </div>
-          <FolderSelect
-            disabled={false}
-            id="domainpropertiesrow-lookupContainer-1-1"
-            key="domainpropertiesrow-lookupContainer-1-1"
-            onChange={[Function]}
-            value="/StudyVerifyProject/My Study"
-          >
-            <FolderSelectImpl
-              context={
-                {
-                  "activeContainer": Container {
-                    "activeModules": [],
-                    "effectivePermissions": [],
-                    "folderType": "",
-                    "formats": {
-                      "dateFormat": "",
-                      "dateTimeFormat": "",
-                      "numberFormat": "",
-                      "timeFormat": "",
-                    },
-                    "hasRestrictedActiveModule": false,
-                    "iconHref": "",
-                    "id": "e0ea3e55-3420-1035-8057-68fea9bfb3a0",
-                    "isContainerTab": false,
-                    "isWorkbook": false,
-                    "name": "My Study",
-                    "parentId": "",
-                    "parentPath": "",
-                    "path": "/StudyVerifyProject/My Study",
-                    "sortOrder": 0,
-                    "startUrl": "",
-                    "title": "",
-                    "type": "",
-                  },
-                  "fetchContainers": [Function],
-                  "fetchQueries": [Function],
-                  "fetchSchemas": [Function],
-                  "getExcludedSchemaQueryNames": [Function],
-                }
-              }
-              disabled={false}
-              id="domainpropertiesrow-lookupContainer-1-1"
-              name="domainpropertiesrow-lookupContainer"
-              onChange={[Function]}
-              value="/StudyVerifyProject/My Study"
-            >
-              <select
-                className="form-control"
-                context={
-                  {
-                    "activeContainer": Container {
-                      "activeModules": [],
-                      "effectivePermissions": [],
-                      "folderType": "",
-                      "formats": {
-                        "dateFormat": "",
-                        "dateTimeFormat": "",
-                        "numberFormat": "",
-                        "timeFormat": "",
-                      },
-                      "hasRestrictedActiveModule": false,
-                      "iconHref": "",
-                      "id": "e0ea3e55-3420-1035-8057-68fea9bfb3a0",
-                      "isContainerTab": false,
-                      "isWorkbook": false,
-                      "name": "My Study",
-                      "parentId": "",
-                      "parentPath": "",
-                      "path": "/StudyVerifyProject/My Study",
-                      "sortOrder": 0,
-                      "startUrl": "",
-                      "title": "",
-                      "type": "",
-                    },
-                    "fetchContainers": [Function],
-                    "fetchQueries": [Function],
-                    "fetchSchemas": [Function],
-                    "getExcludedSchemaQueryNames": [Function],
-                  }
-                }
-                disabled={false}
-                id="domainpropertiesrow-lookupContainer-1-1"
-                name="domainpropertiesrow-lookupContainer"
-                onChange={[Function]}
-                value="/StudyVerifyProject/My Study"
-              >
-                <option
-                  key="_current"
-                  value=""
-                >
-                  Current 
-                  Folder
-                </option>
-                <option
-                  key="a21a06e1-4058-1037-95c6-1e81b2533cfd"
-                  value="/StudyVerifyProject"
-                >
-                  /StudyVerifyProject
-                </option>
-                <option
-                  key="e0ea3e55-3420-1035-8057-68fea9bfb3a0"
-                  value="/StudyVerifyProject/My Study"
-                >
-                  /StudyVerifyProject/My Study
-                </option>
-              </select>
-            </FolderSelectImpl>
-          </FolderSelect>
-        </div>
-        <div
-          className="col-xs-2"
-        >
-          <div
-            className="domain-field-label"
-          >
-            Target Schema
-          </div>
-          <SchemaSelect
-            containerPath="/StudyVerifyProject/My Study"
-            disabled={false}
-            id="domainpropertiesrow-lookupSchema-1-1"
-            key="domainpropertiesrow-lookupSchema-1-1"
-            onChange={[Function]}
-            value="study"
-          >
-            <SchemaSelectImpl
-              containerPath="/StudyVerifyProject/My Study"
-              context={
-                {
-                  "activeContainer": Container {
-                    "activeModules": [],
-                    "effectivePermissions": [],
-                    "folderType": "",
-                    "formats": {
-                      "dateFormat": "",
-                      "dateTimeFormat": "",
-                      "numberFormat": "",
-                      "timeFormat": "",
-                    },
-                    "hasRestrictedActiveModule": false,
-                    "iconHref": "",
-                    "id": "e0ea3e55-3420-1035-8057-68fea9bfb3a0",
-                    "isContainerTab": false,
-                    "isWorkbook": false,
-                    "name": "My Study",
-                    "parentId": "",
-                    "parentPath": "",
-                    "path": "/StudyVerifyProject/My Study",
-                    "sortOrder": 0,
-                    "startUrl": "",
-                    "title": "",
-                    "type": "",
-                  },
-                  "fetchContainers": [Function],
-                  "fetchQueries": [Function],
-                  "fetchSchemas": [Function],
-                  "getExcludedSchemaQueryNames": [Function],
-                }
-              }
-              disabled={false}
-              id="domainpropertiesrow-lookupSchema-1-1"
-              name="domainpropertiesrow-lookupSchema"
-              onChange={[Function]}
-              value="study"
-            >
-              <select
-                className="form-control"
-                disabled={false}
-                id="domainpropertiesrow-lookupSchema-1-1"
-                name="domainpropertiesrow-lookupSchema"
-                onChange={[Function]}
-                placeholder="Select Schema"
-                value="study"
-              >
-                <option
-                  key="exp"
-                  value="exp"
-                >
-                  exp
-                </option>
-                <option
-                  key="exp.data"
-                  value="exp.data"
-                >
-                  exp.data
-                </option>
-                <option
-                  key="exp.materials"
-                  value="exp.materials"
-                >
-                  exp.materials
-                </option>
-                <option
-                  key="lists"
-                  value="lists"
-                >
-                  lists
-                </option>
-                <option
-                  key="study"
-                  value="study"
-                >
-                  study
-                </option>
-              </select>
-            </SchemaSelectImpl>
-          </SchemaSelect>
-        </div>
-        <div
-          className="col-xs-2"
-        >
-          <div
-            className="domain-field-label"
-          >
-            Target Table
-          </div>
-          <TargetTableSelect
-            containerPath="/StudyVerifyProject/My Study"
-            disabled={false}
-            id="domainpropertiesrow-lookupQueryValue-1-1"
-            key="domainpropertiesrow-lookupQueryValue-1-1"
-            lookupIsValid={true}
-            lookupURI="http://www.w3.org/2001/XMLSchema#int"
-            onChange={[Function]}
-            schemaName="study"
-            shouldDisableNonExists={true}
-            value=""
-          >
-            <TargetTableSelectImpl
-              containerPath="/StudyVerifyProject/My Study"
-              context={
-                {
-                  "activeContainer": Container {
-                    "activeModules": [],
-                    "effectivePermissions": [],
-                    "folderType": "",
-                    "formats": {
-                      "dateFormat": "",
-                      "dateTimeFormat": "",
-                      "numberFormat": "",
-                      "timeFormat": "",
-                    },
-                    "hasRestrictedActiveModule": false,
-                    "iconHref": "",
-                    "id": "e0ea3e55-3420-1035-8057-68fea9bfb3a0",
-                    "isContainerTab": false,
-                    "isWorkbook": false,
-                    "name": "My Study",
-                    "parentId": "",
-                    "parentPath": "",
-                    "path": "/StudyVerifyProject/My Study",
-                    "sortOrder": 0,
-                    "startUrl": "",
-                    "title": "",
-                    "type": "",
-                  },
-                  "fetchContainers": [Function],
-                  "fetchQueries": [Function],
-                  "fetchSchemas": [Function],
-                  "getExcludedSchemaQueryNames": [Function],
-                }
-              }
-              disabled={false}
-              id="domainpropertiesrow-lookupQueryValue-1-1"
-              lookupIsValid={true}
-              lookupURI="http://www.w3.org/2001/XMLSchema#int"
-              name="domainpropertiesrow-lookupQueryValue"
-              onChange={[Function]}
-              schemaName="study"
-              shouldDisableNonExists={true}
-              value=""
-            >
-              <select
-                className="form-control"
-                disabled={false}
-                id="domainpropertiesrow-lookupQueryValue-1-1"
-                name="domainpropertiesrow-lookupQueryValue"
-                onChange={[Function]}
-                value=""
-              >
-                <option
-                  key="_default"
-                />
-                <option
-                  disabled={false}
-                >
-                   (
-                  Lookup
-                  )
-                </option>
-                <option
-                  disabled={false}
-                  key="http://www.w3.org/2001/XMLSchema#int|Data"
-                  value="http://www.w3.org/2001/XMLSchema#int|Data"
-                >
-                  Data
-                   (
-                  Integer
-                  )
-                </option>
-                <option
-                  disabled={false}
-                  key="http://www.w3.org/2001/XMLSchema#int|DataInputs"
-                  value="http://www.w3.org/2001/XMLSchema#int|DataInputs"
-                >
-                  DataInputs
-                   (
-                  Integer
-                  )
-                </option>
-                <option
-                  disabled={false}
-                  key="http://www.w3.org/2001/XMLSchema#int|Runs"
-                  value="http://www.w3.org/2001/XMLSchema#int|Runs"
-                >
-                  Runs
-                   (
-                  Integer
-                  )
-                </option>
-              </select>
-            </TargetTableSelectImpl>
-          </TargetTableSelect>
-        </div>
-        <div
-          className="col-xs-6"
-        >
-          <div
-            className="domain-field-label"
-          >
-            Lookup Validator
-          </div>
-          <Memo()
-            checked={false}
-            className="domain-field-checkbox-margin"
-            id="domainpropertiesrow-lookupValidator-1-1"
-            name="domainpropertiesrow-lookupValidator"
-            onChange={[Function]}
-          >
-            <div
-              className="checkbox domain-field-checkbox-margin"
-            >
-              <label>
-                <input
-                  checked={false}
-                  id="domainpropertiesrow-lookupValidator-1-1"
-                  name="domainpropertiesrow-lookupValidator"
-                  onChange={[Function]}
-                  type="checkbox"
-                />
-                <span
-                  className="domain-lookup-validator-text"
-                >
-                  Ensure Value Exists in Lookup Target
-                </span>
-                <LabelHelpTip
-                  title="Lookup Validator"
-                >
-                  <OverlayTrigger
-                    id="label-help-tip2"
-                    overlay={
-                      <Popover
-                        id="label-help-tip-popover"
-                        title="Lookup Validator"
-                      >
-                        <div>
-                          Lookup validators allow you to require that any value is present in the lookup's target table or query
-                        </div>
-                      </Popover>
-                    }
-                  >
-                    <div
-                      className="overlay-trigger"
-                      onClick={[Function]}
-                      onMouseEnter={[Function]}
-                      onMouseLeave={[Function]}
-                    >
-                      <span
-                        className="label-help-target"
-                      >
-                        <span
-                          className="label-help-icon fa fa-question-circle"
-                        />
-                      </span>
-                    </div>
-                  </OverlayTrigger>
-                </LabelHelpTip>
-              </label>
-            </div>
-          </Memo()>
-        </div>
-      </div>
-    </div>
-  </LookupFieldOptions>
-</MockLookupProvider>
-`;
diff --git a/packages/components/src/internal/components/domainproperties/__snapshots__/TextFieldOptions.spec.tsx.snap b/packages/components/src/internal/components/domainproperties/__snapshots__/TextFieldOptions.spec.tsx.snap
deleted file mode 100644
index 0f733e80a1..0000000000
--- a/packages/components/src/internal/components/domainproperties/__snapshots__/TextFieldOptions.spec.tsx.snap
+++ /dev/null
@@ -1,160 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TextFieldOptions Text data type 1`] = `
-<TextFieldOptions
-  domainIndex={1}
-  index={1}
-  label="Text Field Options"
-  lockType="NotLocked"
-  onChange={[MockFunction]}
-  scale={200}
->
-  <div>
-    <div
-      className="row"
-    >
-      <div
-        className="col-xs-12"
-      >
-        <SectionHeading
-          title="Text Field Options"
-        >
-          <div
-            className="domain-field-section-heading"
-          >
-            Text Field Options
-          </div>
-        </SectionHeading>
-      </div>
-    </div>
-    <div
-      className="row"
-    >
-      <div
-        className="col-xs-12"
-      >
-        <div
-          className="domain-field-label"
-        >
-          <DomainFieldLabel
-            helpTipBody={
-              <React.Fragment>
-                <p>
-                  Sets the maximum character count for a text field.
-                </p>
-                <p>
-                  Anything over 4,000 characters will use the 'Unlimited' designation.
-                </p>
-              </React.Fragment>
-            }
-            label="Maximum Text Length"
-          >
-            Maximum Text 
-            <span
-              className="domain-no-wrap"
-            >
-              Length
-              <LabelHelpTip
-                title="Maximum Text Length"
-              >
-                <OverlayTrigger
-                  id="label-help-tip2"
-                  overlay={
-                    <Popover
-                      id="label-help-tip-popover"
-                      title="Maximum Text Length"
-                    >
-                      <React.Fragment>
-                        <p>
-                          Sets the maximum character count for a text field.
-                        </p>
-                        <p>
-                          Anything over 4,000 characters will use the 'Unlimited' designation.
-                        </p>
-                      </React.Fragment>
-                    </Popover>
-                  }
-                >
-                  <div
-                    className="overlay-trigger"
-                    onClick={[Function]}
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  >
-                    <span
-                      className="label-help-target"
-                    >
-                      <span
-                        className="label-help-icon fa fa-question-circle"
-                      />
-                    </span>
-                  </div>
-                </OverlayTrigger>
-              </LabelHelpTip>
-            </span>
-          </DomainFieldLabel>
-        </div>
-      </div>
-    </div>
-    <div
-      className="row"
-    >
-      <div
-        className="col-xs-12 domain-text-options-col"
-      >
-        <input
-          checked={false}
-          className="form-control domain-text-options-radio1 domain-field-float-left"
-          disabled={false}
-          id="domainpropertiesrow-maxLength-1-1"
-          onChange={[Function]}
-          type="radio"
-          value="maxLength"
-        />
-        <div>
-          Unlimited
-        </div>
-      </div>
-    </div>
-    <div
-      className="row"
-    >
-      <div
-        className="col-xs-12"
-      >
-        <input
-          checked={true}
-          className="form-control domain-text-options-radio2 domain-field-float-left"
-          id="domainpropertiesrow-customLength-1-1"
-          onChange={[Function]}
-          type="radio"
-          value="customLength"
-        />
-        <span
-          className="domain-text-options-length domain-field-float-left"
-        >
-          No longer than 
-          <input
-            className="form-control domain-text-length-field"
-            disabled={false}
-            id="domainpropertiesrow-scale-1-1"
-            name="domainpropertiesrow-scale"
-            onChange={[Function]}
-            type="number"
-            value={200}
-          />
-           characters
-        </span>
-      </div>
-    </div>
-    <Memo()
-      domainIndex={1}
-      index={1}
-      label="Text Field Options"
-      lockType="NotLocked"
-      onChange={[MockFunction]}
-      scale={200}
-    />
-  </div>
-</TextFieldOptions>
-`;
diff --git a/packages/components/src/internal/components/domainproperties/list/ListPropertiesPanelFormElements.spec.tsx b/packages/components/src/internal/components/domainproperties/list/ListPropertiesPanelFormElements.spec.tsx
deleted file mode 100644
index 27c05fc77b..0000000000
--- a/packages/components/src/internal/components/domainproperties/list/ListPropertiesPanelFormElements.spec.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import renderer from 'react-test-renderer';
-
-import { SectionHeading } from '../SectionHeading';
-
-import getDomainDetailsJSON from '../../../../test/data/list-getDomainDetails.json';
-import { DEFAULT_LIST_SETTINGS } from '../../../../test/data/constants';
-
-import {
-    AllowableActions,
-    BasicPropertiesFields,
-    CheckBoxRow,
-    DescriptionInput,
-    NameInput,
-} from './ListPropertiesPanelFormElements';
-import { ListModel } from './models';
-
-const emptyNewModel = ListModel.create(null, DEFAULT_LIST_SETTINGS);
-const populatedExistingModel = ListModel.create(getDomainDetailsJSON);
-
-describe('BasicPropertiesFields', () => {
-    test('new list, default properties', () => {
-        const basicPropertiesFields = <BasicPropertiesFields model={emptyNewModel} onInputChange={jest.fn()} />;
-
-        const tree = renderer.create(basicPropertiesFields).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    test('existing list, existing properties', () => {
-        const basicPropertiesFields = (
-            <BasicPropertiesFields model={populatedExistingModel} onInputChange={jest.fn()} />
-        );
-
-        const tree = renderer.create(basicPropertiesFields).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    test('visible basic properties', () => {
-        const basicPropertiesFields = mount(
-            <BasicPropertiesFields model={populatedExistingModel} onInputChange={jest.fn()} />
-        );
-
-        expect(basicPropertiesFields.find(SectionHeading)).toHaveLength(1);
-        expect(basicPropertiesFields.find(NameInput)).toHaveLength(1);
-        expect(basicPropertiesFields.find(DescriptionInput)).toHaveLength(1);
-        basicPropertiesFields.unmount();
-    });
-});
-
-describe('AllowableActions', () => {
-    test('new list, default properties', () => {
-        const allowableActions = <AllowableActions model={emptyNewModel} onCheckBoxChange={jest.fn()} />;
-
-        const tree = renderer.create(allowableActions).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    test('existing list, existing properties', () => {
-        const allowableActions = <AllowableActions model={populatedExistingModel} onCheckBoxChange={jest.fn()} />;
-
-        const tree = renderer.create(allowableActions).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    test('visible AllowableActions', () => {
-        const allowableActions = mount(
-            <AllowableActions model={populatedExistingModel} onCheckBoxChange={jest.fn()} />
-        );
-
-        expect(allowableActions.find(CheckBoxRow)).toHaveLength(3);
-        allowableActions.unmount();
-    });
-});
diff --git a/packages/components/src/internal/components/domainproperties/list/ListPropertiesPanelFormElements.test.tsx b/packages/components/src/internal/components/domainproperties/list/ListPropertiesPanelFormElements.test.tsx
new file mode 100644
index 0000000000..5df9f1ab26
--- /dev/null
+++ b/packages/components/src/internal/components/domainproperties/list/ListPropertiesPanelFormElements.test.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import getDomainDetailsJSON from '../../../../test/data/list-getDomainDetails.json';
+import { DEFAULT_LIST_SETTINGS } from '../../../../test/data/constants';
+
+import { AllowableActions, BasicPropertiesFields } from './ListPropertiesPanelFormElements';
+import { ListModel } from './models';
+import { renderWithAppContext } from '../../../test/reactTestLibraryHelpers';
+
+const emptyNewModel = ListModel.create(null, DEFAULT_LIST_SETTINGS);
+const populatedExistingModel = ListModel.create(getDomainDetailsJSON);
+
+describe('BasicPropertiesFields', () => {
+    test('new list, default properties', () => {
+        const { asFragment } = renderWithAppContext(
+            <BasicPropertiesFields model={emptyNewModel} onInputChange={jest.fn()} />
+        );
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    test('existing list, existing properties', () => {
+        const { asFragment } = renderWithAppContext(
+            <BasicPropertiesFields model={populatedExistingModel} onInputChange={jest.fn()} />
+        );
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    test('visible basic properties', () => {
+        renderWithAppContext(<BasicPropertiesFields model={populatedExistingModel} onInputChange={jest.fn()} />);
+        expect(document.querySelectorAll('.domain-field-section-heading')).toHaveLength(1);
+        expect(document.querySelectorAll('#name')).toHaveLength(1);
+        expect(document.querySelectorAll('#description')).toHaveLength(1);
+    });
+});
+
+describe('AllowableActions', () => {
+    test('new list, default properties', () => {
+        const { asFragment } = renderWithAppContext(
+            <AllowableActions model={emptyNewModel} onCheckBoxChange={jest.fn()} />
+        );
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    test('existing list, existing properties', () => {
+        const { asFragment } = renderWithAppContext(
+            <AllowableActions model={populatedExistingModel} onCheckBoxChange={jest.fn()} />
+        );
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    test('visible AllowableActions', () => {
+        renderWithAppContext(<AllowableActions model={populatedExistingModel} onCheckBoxChange={jest.fn()} />);
+        expect(document.querySelectorAll('.list__properties__checkbox-row')).toHaveLength(3);
+    });
+});
diff --git a/packages/components/src/internal/components/domainproperties/list/__snapshots__/ListPropertiesPanelFormElements.spec.tsx.snap b/packages/components/src/internal/components/domainproperties/list/__snapshots__/ListPropertiesPanelFormElements.spec.tsx.snap
deleted file mode 100644
index ca73051f31..0000000000
--- a/packages/components/src/internal/components/domainproperties/list/__snapshots__/ListPropertiesPanelFormElements.spec.tsx.snap
+++ /dev/null
@@ -1,281 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AllowableActions existing list, existing properties 1`] = `
-<div
-  className="col-xs-12 col-md-3"
->
-  <div
-    className="domain-field-section-heading"
-  >
-    Allow these Actions
-  </div>
-  <div
-    className="list__properties__allowable-actions"
-  >
-    <div
-      className="list__properties__checkbox-row"
-    >
-      <div
-        className="form-group"
-      >
-        <label>
-          <input
-            checked={true}
-            onChange={[Function]}
-            type="checkbox"
-          />
-          Delete
-        </label>
-      </div>
-    </div>
-    <div
-      className="list__properties__checkbox-row"
-    >
-      <div
-        className="form-group"
-      >
-        <label>
-          <input
-            checked={true}
-            onChange={[Function]}
-            type="checkbox"
-          />
-          Upload
-        </label>
-      </div>
-    </div>
-    <div
-      className="list__properties__checkbox-row"
-    >
-      <div
-        className="form-group"
-      >
-        <label>
-          <input
-            checked={true}
-            onChange={[Function]}
-            type="checkbox"
-          />
-          Export & Print
-        </label>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`AllowableActions new list, default properties 1`] = `
-<div
-  className="col-xs-12 col-md-3"
->
-  <div
-    className="domain-field-section-heading"
-  >
-    Allow these Actions
-  </div>
-  <div
-    className="list__properties__allowable-actions"
-  >
-    <div
-      className="list__properties__checkbox-row"
-    >
-      <div
-        className="form-group"
-      >
-        <label>
-          <input
-            checked={true}
-            onChange={[Function]}
-            type="checkbox"
-          />
-          Delete
-        </label>
-      </div>
-    </div>
-    <div
-      className="list__properties__checkbox-row"
-    >
-      <div
-        className="form-group"
-      >
-        <label>
-          <input
-            checked={true}
-            onChange={[Function]}
-            type="checkbox"
-          />
-          Upload
-        </label>
-      </div>
-    </div>
-    <div
-      className="list__properties__checkbox-row"
-    >
-      <div
-        className="form-group"
-      >
-        <label>
-          <input
-            checked={true}
-            onChange={[Function]}
-            type="checkbox"
-          />
-          Export & Print
-        </label>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`BasicPropertiesFields existing list, existing properties 1`] = `
-<div
-  className="col-xs-12 col-md-7"
->
-  <div
-    className="domain-field-section-heading"
-  >
-    Basic Properties
-  </div>
-  <div
-    className="row margin-top"
-  >
-    <div
-      className="col-xs-3 col-lg-2"
-    >
-      <span
-        className="domain-no-wrap"
-      >
-        Name
-        <div
-          className="overlay-trigger"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="label-help-target"
-          >
-            <span
-              className="label-help-icon fa fa-question-circle"
-            />
-          </span>
-        </div>
-         *
-      </span>
-    </div>
-    <div
-      className="col-xs-9 col-lg-8"
-    >
-      <input
-        className="form-control"
-        id="name"
-        onChange={[MockFunction]}
-        placeholder="Enter a name for this list"
-        type="text"
-        value="NIMHDemographics"
-      />
-    </div>
-  </div>
-  <div
-    className="row margin-top"
-  >
-    <div
-      className="col-xs-3 col-lg-2"
-    >
-      <span
-        className="domain-no-wrap"
-      >
-        Description
-        
-      </span>
-    </div>
-    <div
-      className="col-xs-9 col-lg-8"
-    >
-      <textarea
-        className="form-control"
-        id="description"
-        onChange={[MockFunction]}
-        value=""
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`BasicPropertiesFields new list, default properties 1`] = `
-<div
-  className="col-xs-12 col-md-7"
->
-  <div
-    className="domain-field-section-heading"
-  >
-    Basic Properties
-  </div>
-  <div
-    className="row margin-top"
-  >
-    <div
-      className="col-xs-3 col-lg-2"
-    >
-      <span
-        className="domain-no-wrap"
-      >
-        Name
-        <div
-          className="overlay-trigger"
-          onClick={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="label-help-target"
-          >
-            <span
-              className="label-help-icon fa fa-question-circle"
-            />
-          </span>
-        </div>
-         *
-      </span>
-    </div>
-    <div
-      className="col-xs-9 col-lg-8"
-    >
-      <input
-        className="form-control"
-        id="name"
-        onChange={[MockFunction]}
-        placeholder="Enter a name for this list"
-        type="text"
-        value=""
-      />
-    </div>
-  </div>
-  <div
-    className="row margin-top"
-  >
-    <div
-      className="col-xs-3 col-lg-2"
-    >
-      <span
-        className="domain-no-wrap"
-      >
-        Description
-        
-      </span>
-    </div>
-    <div
-      className="col-xs-9 col-lg-8"
-    >
-      <textarea
-        className="form-control"
-        id="description"
-        onChange={[MockFunction]}
-        value=""
-      />
-    </div>
-  </div>
-</div>
-`;
diff --git a/packages/components/src/internal/components/domainproperties/list/__snapshots__/ListPropertiesPanelFormElements.test.tsx.snap b/packages/components/src/internal/components/domainproperties/list/__snapshots__/ListPropertiesPanelFormElements.test.tsx.snap
new file mode 100644
index 0000000000..c04201255a
--- /dev/null
+++ b/packages/components/src/internal/components/domainproperties/list/__snapshots__/ListPropertiesPanelFormElements.test.tsx.snap
@@ -0,0 +1,269 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`AllowableActions existing list, existing properties 1`] = `
+<DocumentFragment>
+  <div
+    class="col-xs-12 col-md-3"
+  >
+    <div
+      class="domain-field-section-heading"
+    >
+      Allow these Actions
+    </div>
+    <div
+      class="list__properties__allowable-actions"
+    >
+      <div
+        class="list__properties__checkbox-row"
+      >
+        <div
+          class="form-group"
+        >
+          <label>
+            <input
+              checked=""
+              type="checkbox"
+            />
+            Delete
+          </label>
+        </div>
+      </div>
+      <div
+        class="list__properties__checkbox-row"
+      >
+        <div
+          class="form-group"
+        >
+          <label>
+            <input
+              checked=""
+              type="checkbox"
+            />
+            Upload
+          </label>
+        </div>
+      </div>
+      <div
+        class="list__properties__checkbox-row"
+      >
+        <div
+          class="form-group"
+        >
+          <label>
+            <input
+              checked=""
+              type="checkbox"
+            />
+            Export & Print
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AllowableActions new list, default properties 1`] = `
+<DocumentFragment>
+  <div
+    class="col-xs-12 col-md-3"
+  >
+    <div
+      class="domain-field-section-heading"
+    >
+      Allow these Actions
+    </div>
+    <div
+      class="list__properties__allowable-actions"
+    >
+      <div
+        class="list__properties__checkbox-row"
+      >
+        <div
+          class="form-group"
+        >
+          <label>
+            <input
+              checked=""
+              type="checkbox"
+            />
+            Delete
+          </label>
+        </div>
+      </div>
+      <div
+        class="list__properties__checkbox-row"
+      >
+        <div
+          class="form-group"
+        >
+          <label>
+            <input
+              checked=""
+              type="checkbox"
+            />
+            Upload
+          </label>
+        </div>
+      </div>
+      <div
+        class="list__properties__checkbox-row"
+      >
+        <div
+          class="form-group"
+        >
+          <label>
+            <input
+              checked=""
+              type="checkbox"
+            />
+            Export & Print
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`BasicPropertiesFields existing list, existing properties 1`] = `
+<DocumentFragment>
+  <div
+    class="col-xs-12 col-md-7"
+  >
+    <div
+      class="domain-field-section-heading"
+    >
+      Basic Properties
+    </div>
+    <div
+      class="row margin-top"
+    >
+      <div
+        class="col-xs-3 col-lg-2"
+      >
+        <span
+          class="domain-no-wrap"
+        >
+          Name
+          <div
+            class="overlay-trigger"
+          >
+            <span
+              class="label-help-target"
+            >
+              <span
+                class="label-help-icon fa fa-question-circle"
+              />
+            </span>
+          </div>
+           *
+        </span>
+      </div>
+      <div
+        class="col-xs-9 col-lg-8"
+      >
+        <input
+          class="form-control"
+          id="name"
+          placeholder="Enter a name for this list"
+          type="text"
+          value="NIMHDemographics"
+        />
+      </div>
+    </div>
+    <div
+      class="row margin-top"
+    >
+      <div
+        class="col-xs-3 col-lg-2"
+      >
+        <span
+          class="domain-no-wrap"
+        >
+          Description
+        </span>
+      </div>
+      <div
+        class="col-xs-9 col-lg-8"
+      >
+        <textarea
+          class="form-control"
+          id="description"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`BasicPropertiesFields new list, default properties 1`] = `
+<DocumentFragment>
+  <div
+    class="col-xs-12 col-md-7"
+  >
+    <div
+      class="domain-field-section-heading"
+    >
+      Basic Properties
+    </div>
+    <div
+      class="row margin-top"
+    >
+      <div
+        class="col-xs-3 col-lg-2"
+      >
+        <span
+          class="domain-no-wrap"
+        >
+          Name
+          <div
+            class="overlay-trigger"
+          >
+            <span
+              class="label-help-target"
+            >
+              <span
+                class="label-help-icon fa fa-question-circle"
+              />
+            </span>
+          </div>
+           *
+        </span>
+      </div>
+      <div
+        class="col-xs-9 col-lg-8"
+      >
+        <input
+          class="form-control"
+          id="name"
+          placeholder="Enter a name for this list"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+    <div
+      class="row margin-top"
+    >
+      <div
+        class="col-xs-3 col-lg-2"
+      >
+        <span
+          class="domain-no-wrap"
+        >
+          Description
+        </span>
+      </div>
+      <div
+        class="col-xs-9 col-lg-8"
+      >
+        <textarea
+          class="form-control"
+          id="description"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/components/src/internal/components/domainproperties/samples/UniqueIdBanner.spec.tsx b/packages/components/src/internal/components/domainproperties/samples/UniqueIdBanner.test.tsx
similarity index 51%
rename from packages/components/src/internal/components/domainproperties/samples/UniqueIdBanner.spec.tsx
rename to packages/components/src/internal/components/domainproperties/samples/UniqueIdBanner.test.tsx
index f20dfe8c78..014134a3dd 100644
--- a/packages/components/src/internal/components/domainproperties/samples/UniqueIdBanner.spec.tsx
+++ b/packages/components/src/internal/components/domainproperties/samples/UniqueIdBanner.test.tsx
@@ -1,14 +1,13 @@
 import React from 'react';
-import { mount } from 'enzyme';
 
 import { fromJS } from 'immutable';
 
-import { Alert } from '../../base/Alert';
-
 import { INT_RANGE_URI, STORAGE_UNIQUE_ID_CONCEPT_URI, STRING_RANGE_URI } from '../constants';
 
 import { DomainDesign, DomainDetails } from '../models';
 
+import { renderWithAppContext } from '../../../test/reactTestLibraryHelpers';
+
 import { ADD_NEW_UNIQUE_ID_MSG, NEW_TYPE_NO_BARCODE_FIELDS_MSG, UniqueIdBanner } from './UniqueIdBanner';
 import { SampleTypeModel } from './models';
 
@@ -46,32 +45,31 @@ const uniqueIdField2 = {
 
 describe('UniqueIdBanner', () => {
     test('new, in properties panel, no uniqueID fields', () => {
-        const wrapper = mount(<UniqueIdBanner model={newSampleTypeModel} isFieldsPanel={false} onAddField={jest.fn} />);
-        expect(wrapper.text()).toBe(NEW_TYPE_NO_BARCODE_FIELDS_MSG);
-        expect(wrapper.find(Alert)).toHaveLength(0);
-        expect(wrapper.find('button')).toHaveLength(0);
-        wrapper.unmount();
+        renderWithAppContext(<UniqueIdBanner model={newSampleTypeModel} isFieldsPanel={false} onAddField={jest.fn()} />);
+        expect(document.querySelector('.uniqueid-msg')).toHaveTextContent(NEW_TYPE_NO_BARCODE_FIELDS_MSG);
+        expect(document.querySelectorAll('.uniqueid-alert')).toHaveLength(0);
+        expect(document.querySelectorAll('button')).toHaveLength(0);
     });
 
     test('new in fields panel, no uniqueID fields', () => {
-        const wrapper = mount(<UniqueIdBanner model={newSampleTypeModel} isFieldsPanel={true} onAddField={jest.fn} />);
-        expect(wrapper.text()).toContain(ADD_NEW_UNIQUE_ID_MSG);
-        expect(wrapper.find(Alert)).toHaveLength(1);
-        expect(wrapper.find('button')).toHaveLength(1);
-        wrapper.unmount();
+        renderWithAppContext(<UniqueIdBanner model={newSampleTypeModel} isFieldsPanel={true} onAddField={jest.fn()} />);
+        expect(document.querySelector('.uniqueid-alert')).toHaveTextContent(ADD_NEW_UNIQUE_ID_MSG);
+        expect(document.querySelectorAll('.uniqueid-alert')).toHaveLength(1);
+        expect(document.querySelectorAll('button')).toHaveLength(1);
     });
 
-    test('new, in properties panel, with one uniqueID fields', () => {
+    test('new, in properties panel, with one uniqueID field', () => {
         const sampleTypeModel = SampleTypeModel.create({
             domainDesign: DomainDesign.create({
                 fields: [intField, uniqueIdField],
             }),
         } as DomainDetails);
-        const wrapper = mount(<UniqueIdBanner model={sampleTypeModel} isFieldsPanel={false} onAddField={jest.fn} />);
-        expect(wrapper.find(Alert)).toHaveLength(0);
-        expect(wrapper.find('button')).toHaveLength(0);
-        expect(wrapper.text()).toContain('A Unique ID field for barcodes is defined: ' + uniqueIdField.name);
-        wrapper.unmount();
+        renderWithAppContext(<UniqueIdBanner model={sampleTypeModel} isFieldsPanel={false} onAddField={jest.fn()} />);
+        expect(document.querySelectorAll('.uniqueid-alert')).toHaveLength(0);
+        expect(document.querySelectorAll('button')).toHaveLength(0);
+        expect(document.querySelector('.uniqueid-msg')).toHaveTextContent(
+            'A Unique ID field for barcodes is defined: ' + uniqueIdField.name
+        );
     });
 
     test('new, in properties panel, with two uniqueID fields', () => {
@@ -80,13 +78,12 @@ describe('UniqueIdBanner', () => {
                 fields: [intField, uniqueIdField, uniqueIdField2],
             }),
         } as DomainDetails);
-        const wrapper = mount(<UniqueIdBanner model={sampleTypeModel} isFieldsPanel={false} onAddField={jest.fn} />);
-        expect(wrapper.find(Alert)).toHaveLength(0);
-        expect(wrapper.find('button')).toHaveLength(0);
-        expect(wrapper.text()).toContain(
+        renderWithAppContext(<UniqueIdBanner model={sampleTypeModel} isFieldsPanel={false} onAddField={jest.fn()} />);
+        expect(document.querySelectorAll('.uniqueid-alert')).toHaveLength(0);
+        expect(document.querySelectorAll('button')).toHaveLength(0);
+        expect(document.querySelector('.uniqueid-msg')).toHaveTextContent(
             '2 Unique ID fields are defined: ' + uniqueIdField.name + ', ' + uniqueIdField2.name
         );
-        wrapper.unmount();
     });
 
     test('new, in fields panel, with uniqueID fields', () => {
@@ -95,11 +92,10 @@ describe('UniqueIdBanner', () => {
                 fields: [intField, uniqueIdField],
             }),
         } as DomainDetails);
-        const wrapper = mount(<UniqueIdBanner model={sampleTypeModel} isFieldsPanel={true} onAddField={jest.fn} />);
-        expect(wrapper.find(Alert)).toHaveLength(0);
-        expect(wrapper.find('button')).toHaveLength(0);
-        expect(wrapper.text()).toHaveLength(0);
-        wrapper.unmount();
+        renderWithAppContext(<UniqueIdBanner model={sampleTypeModel} isFieldsPanel={true} onAddField={jest.fn()} />);
+        expect(document.querySelectorAll('.uniqueid-alert')).toHaveLength(0);
+        expect(document.querySelectorAll('button')).toHaveLength(0);
+        expect(document.querySelector('.uniqueid-msg')).toBeNull();
     });
 
     test('not new, in properties panel, no uniqueID fields', () => {
@@ -111,11 +107,10 @@ describe('UniqueIdBanner', () => {
                 fields: [intField, stringField],
             }),
         } as DomainDetails);
-        const wrapper = mount(<UniqueIdBanner model={sampleTypeModel} isFieldsPanel={false} onAddField={jest.fn} />);
-        expect(wrapper.find(Alert)).toHaveLength(1);
-        expect(wrapper.find('button')).toHaveLength(1);
-        expect(wrapper.text()).toContain(ADD_NEW_UNIQUE_ID_MSG);
-        wrapper.unmount();
+        renderWithAppContext(<UniqueIdBanner model={sampleTypeModel} isFieldsPanel={false} onAddField={jest.fn()} />);
+        expect(document.querySelectorAll('.uniqueid-alert')).toHaveLength(1);
+        expect(document.querySelectorAll('button')).toHaveLength(1);
+        expect(document.querySelector('.uniqueid-alert')).toHaveTextContent(ADD_NEW_UNIQUE_ID_MSG);
     });
 
     test('not new, in fields panel, no uniqueID fields', () => {
@@ -127,11 +122,10 @@ describe('UniqueIdBanner', () => {
                 fields: [intField, stringField],
             }),
         } as DomainDetails);
-        const wrapper = mount(<UniqueIdBanner model={sampleTypeModel} isFieldsPanel={true} onAddField={jest.fn} />);
-        expect(wrapper.find(Alert)).toHaveLength(1);
-        expect(wrapper.find('button')).toHaveLength(1);
-        expect(wrapper.text()).toContain(ADD_NEW_UNIQUE_ID_MSG);
-        wrapper.unmount();
+        renderWithAppContext(<UniqueIdBanner model={sampleTypeModel} isFieldsPanel={true} onAddField={jest.fn()} />);
+        expect(document.querySelectorAll('.uniqueid-alert')).toHaveLength(1);
+        expect(document.querySelectorAll('button')).toHaveLength(1);
+        expect(document.querySelector('.uniqueid-alert')).toHaveTextContent(ADD_NEW_UNIQUE_ID_MSG);
     });
 
     test('not new, in properties panel, with uniqueID fields', () => {
@@ -143,14 +137,12 @@ describe('UniqueIdBanner', () => {
                 fields: [intField, stringField, uniqueIdField, uniqueIdField2],
             }),
         } as DomainDetails);
-        const wrapper = mount(<UniqueIdBanner model={sampleTypeModel} isFieldsPanel={false} onAddField={jest.fn} />);
-        expect(wrapper.find(Alert)).toHaveLength(0);
-        expect(wrapper.find('button')).toHaveLength(0);
-        expect(wrapper.text()).toContain(
+        renderWithAppContext(<UniqueIdBanner model={sampleTypeModel} isFieldsPanel={false} onAddField={jest.fn()} />);
+        expect(document.querySelectorAll('.uniqueid-alert')).toHaveLength(0);
+        expect(document.querySelectorAll('button')).toHaveLength(0);
+        expect(document.querySelector('.uniqueid-msg')).toHaveTextContent(
             '2 Unique ID fields are defined: ' + uniqueIdField.name + ', ' + uniqueIdField2.name
         );
-
-        wrapper.unmount();
     });
 
     test('not new, in fields panel, with uniqueID fields', () => {
@@ -162,11 +154,9 @@ describe('UniqueIdBanner', () => {
                 fields: [intField, stringField, uniqueIdField, uniqueIdField2],
             }),
         } as DomainDetails);
-        const wrapper = mount(<UniqueIdBanner model={sampleTypeModel} isFieldsPanel={true} onAddField={jest.fn} />);
-        expect(wrapper.find(Alert)).toHaveLength(0);
-        expect(wrapper.find('button')).toHaveLength(0);
-        expect(wrapper.text()).toHaveLength(0);
-
-        wrapper.unmount();
+        renderWithAppContext(<UniqueIdBanner model={sampleTypeModel} isFieldsPanel={true} onAddField={jest.fn()} />);
+        expect(document.querySelectorAll('.uniqueid-alert')).toHaveLength(0);
+        expect(document.querySelectorAll('button')).toHaveLength(0);
+        expect(document.querySelector('.uniqueid-msg')).toBeNull();
     });
 });
diff --git a/packages/components/src/internal/components/forms/FormStep.spec.tsx b/packages/components/src/internal/components/forms/FormStep.spec.tsx
deleted file mode 100644
index fd3a10514a..0000000000
--- a/packages/components/src/internal/components/forms/FormStep.spec.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * Copyright (c) 2019 LabKey Corporation
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * 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 React from 'react';
-import renderer from 'react-test-renderer';
-import { mount } from 'enzyme';
-
-import { FormStep, FormTabs, withFormSteps, WithFormStepsProps } from './FormStep';
-
-interface OwnProps {
-    step?: number;
-    initialStep?: number;
-}
-type Props = OwnProps & WithFormStepsProps;
-
-class FormStepTestImpl extends React.Component<Props> {
-    componentDidMount(): void {
-        if (this.props.step !== undefined) {
-            this.props.selectStep(this.props.step);
-        }
-    }
-
-    render() {
-        return (
-            <>
-                <FormTabs tabs={['Tab 1', 'Tab 2']} />
-                <FormStep stepIndex={1}>
-                    <div>test0</div>
-                </FormStep>
-                <FormStep stepIndex={2}>
-                    <div>test1</div>
-                </FormStep>
-            </>
-        );
-    }
-}
-
-const FormStepTest = withFormSteps(FormStepTestImpl, {
-    currentStep: 1,
-    furthestStep: 2,
-    hasDependentSteps: true,
-});
-
-describe('<FormStep/>', () => {
-    test('default props', () => {
-        const component = <FormStepTest />;
-
-        const tree = renderer.create(component).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    test('currentStep', () => {
-        const component = <FormStepTest step={2} />;
-
-        const tree = renderer.create(component).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    test('initialStep', () => {
-        let wrapper = mount(<FormStepTest />);
-        expect(wrapper.state('currentStep')).toBe(1);
-        wrapper.unmount();
-
-        wrapper = mount(<FormStepTest initialStep={2} />);
-        expect(wrapper.state('currentStep')).toBe(2);
-        wrapper.unmount();
-    });
-});
diff --git a/packages/components/src/internal/components/forms/FormStep.test.tsx b/packages/components/src/internal/components/forms/FormStep.test.tsx
new file mode 100644
index 0000000000..503d819c27
--- /dev/null
+++ b/packages/components/src/internal/components/forms/FormStep.test.tsx
@@ -0,0 +1,94 @@
+/*
+ * Copyright (c) 2019 LabKey Corporation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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 React from 'react';
+import { render } from '@testing-library/react';
+
+import { FormStep, FormTabs, withFormSteps, WithFormStepsProps } from './FormStep';
+
+interface OwnProps {
+    step?: number;
+    initialStep?: number;
+}
+type Props = OwnProps & WithFormStepsProps;
+
+class FormStepTestImpl extends React.Component<Props> {
+    componentDidMount(): void {
+        if (this.props.step !== undefined) {
+            this.props.selectStep(this.props.step);
+        }
+    }
+
+    render() {
+        return (
+            <>
+                <FormTabs tabs={['Tab 1', 'Tab 2']} />
+                <FormStep stepIndex={1}>
+                    <div>test0</div>
+                </FormStep>
+                <FormStep stepIndex={2}>
+                    <div>test1</div>
+                </FormStep>
+            </>
+        );
+    }
+}
+
+const FormStepTest = withFormSteps(FormStepTestImpl, {
+    currentStep: 1,
+    furthestStep: 2,
+    hasDependentSteps: true,
+});
+
+describe('<FormStep/>', () => {
+    test('default props', () => {
+        const { container } = render(<FormStepTest />);
+        const tabs = container.querySelectorAll('.form-step-tab');
+        expect(tabs).toHaveLength(2);
+        expect(tabs[0].classList.contains('active')).toBe(true);
+        expect(tabs[0].classList.contains('disabled')).toBe(false);
+        expect(tabs[1].classList.contains('active')).toBe(false);
+        expect(tabs[1].classList.contains('disabled')).toBe(true);
+        const steps = container.querySelectorAll('.form-step');
+        expect(steps).toHaveLength(2);
+        expect(steps[0].classList.contains('active')).toBe(true);
+        expect(steps[1].classList.contains('active')).toBe(false);
+    });
+
+    test('currentStep', () => {
+        const { container } = render(<FormStepTest step={2} />);
+        const tabs = container.querySelectorAll('.form-step-tab');
+        expect(tabs).toHaveLength(2);
+        expect(tabs[0].classList.contains('active')).toBe(false);
+        expect(tabs[1].classList.contains('active')).toBe(true);
+        expect(tabs[1].classList.contains('disabled')).toBe(false);
+        const steps = container.querySelectorAll('.form-step');
+        expect(steps).toHaveLength(2);
+        expect(steps[0].classList.contains('active')).toBe(false);
+        expect(steps[1].classList.contains('active')).toBe(true);
+    });
+
+    test('initialStep', () => {
+        const { container: container1 } = render(<FormStepTest />);
+        const tabs1 = container1.querySelectorAll('.form-step-tab');
+        expect(tabs1[0].classList.contains('active')).toBe(true);
+        expect(tabs1[1].classList.contains('active')).toBe(false);
+
+        const { container: container2 } = render(<FormStepTest initialStep={2} />);
+        const tabs2 = container2.querySelectorAll('.form-step-tab');
+        expect(tabs2[0].classList.contains('active')).toBe(false);
+        expect(tabs2[1].classList.contains('active')).toBe(true);
+    });
+});
diff --git a/packages/components/src/internal/components/forms/QueryInfoQuantity.spec.tsx b/packages/components/src/internal/components/forms/QueryInfoQuantity.test.tsx
similarity index 51%
rename from packages/components/src/internal/components/forms/QueryInfoQuantity.spec.tsx
rename to packages/components/src/internal/components/forms/QueryInfoQuantity.test.tsx
index f6443b0295..77b5ec52a9 100644
--- a/packages/components/src/internal/components/forms/QueryInfoQuantity.spec.tsx
+++ b/packages/components/src/internal/components/forms/QueryInfoQuantity.test.tsx
@@ -1,21 +1,20 @@
 import React from 'react';
-import { mount, ReactWrapper } from 'enzyme';
+
+import { renderWithAppContext } from '../../test/reactTestLibraryHelpers';
 
 import { DERIVATIVE_CREATION, POOLED_SAMPLE_CREATION } from '../samples/models';
 
 import { Formsy } from './formsy';
 import { QueryInfoQuantity } from './QueryInfoQuantity';
-import { FormsyInput } from './input/FormsyReactComponents';
-import { RadioGroupInput } from './input/RadioGroupInput';
 
 describe('QueryInfoQuantity', () => {
-    function validate(wrapper: ReactWrapper, optionCount: number, includeCount: boolean): void {
-        expect(wrapper.find(RadioGroupInput)).toHaveLength(optionCount === 0 ? 0 : 1);
-        expect(wrapper.find(FormsyInput)).toHaveLength(includeCount || optionCount > 0 ? 1 : 0);
+    function validate(optionCount: number, includeCount: boolean): void {
+        expect(document.querySelectorAll('.creation-type-radioinput')).toHaveLength(optionCount === 0 ? 0 : 1);
+        expect(document.querySelectorAll('#numItems')).toHaveLength(includeCount || optionCount > 0 ? 1 : 0);
     }
 
     test('no content', () => {
-        const wrapper = mount(
+        renderWithAppContext(
             <QueryInfoQuantity
                 creationTypeOptions={undefined}
                 includeCountField={false}
@@ -23,25 +22,23 @@ describe('QueryInfoQuantity', () => {
                 countText="Quantity"
             />
         );
-        validate(wrapper, 0, false);
-        wrapper.unmount();
+        validate(0, false);
     });
 
     test('no options, show quantity', () => {
-        const wrapper = mount(
+        renderWithAppContext(
             <Formsy>
                 <QueryInfoQuantity creationTypeOptions={[]} includeCountField maxCount={5} countText="Quantity" />
             </Formsy>
         );
-        validate(wrapper, 0, true);
-        const input = wrapper.find(FormsyInput);
-        expect(input.prop('max')).toBe(5);
-        expect(input.prop('value')).toBe('1');
-        wrapper.unmount();
+        validate(0, true);
+        const input = document.querySelector('#numItems');
+        expect(input).toHaveAttribute('max', '5');
+        expect(input).toHaveValue(1);
     });
 
     test('multiple options, no default selection', () => {
-        const wrapper = mount(
+        renderWithAppContext(
             <Formsy>
                 <QueryInfoQuantity
                     creationTypeOptions={[DERIVATIVE_CREATION, POOLED_SAMPLE_CREATION]}
@@ -51,16 +48,13 @@ describe('QueryInfoQuantity', () => {
                 />
             </Formsy>
         );
-        validate(wrapper, 2, false);
-        const inputs = wrapper.find({ type: 'radio' });
-        expect(inputs).toHaveLength(2);
-        expect(wrapper.find('.control-label')).toHaveLength(1);
-        expect(wrapper.find('.control-label').text()).toBe('Quantity *');
-        wrapper.unmount();
+        validate(2, false);
+        expect(document.querySelectorAll('input[type="radio"]')).toHaveLength(2);
+        expect(document.querySelector('.control-label')).toHaveTextContent('Quantity *');
     });
 
     test('multiple options, default selection', () => {
-        const wrapper = mount(
+        renderWithAppContext(
             <Formsy>
                 <QueryInfoQuantity
                     creationTypeOptions={[{ ...DERIVATIVE_CREATION, selected: true }, POOLED_SAMPLE_CREATION]}
@@ -70,11 +64,8 @@ describe('QueryInfoQuantity', () => {
                 />
             </Formsy>
         );
-        validate(wrapper, 2, false);
-        const inputs = wrapper.find({ type: 'radio' });
-        expect(inputs).toHaveLength(2);
-        expect(wrapper.find('.control-label')).toHaveLength(1);
-        expect(wrapper.find('.control-label').text()).toBe('Derivatives per Parent *');
-        wrapper.unmount();
+        validate(2, false);
+        expect(document.querySelectorAll('input[type="radio"]')).toHaveLength(2);
+        expect(document.querySelector('.control-label')).toHaveTextContent('Derivatives Per Parent *');
     });
 });
diff --git a/packages/components/src/internal/components/forms/__snapshots__/FormStep.spec.tsx.snap b/packages/components/src/internal/components/forms/__snapshots__/FormStep.spec.tsx.snap
deleted file mode 100644
index 7d0526398f..0000000000
--- a/packages/components/src/internal/components/forms/__snapshots__/FormStep.spec.tsx.snap
+++ /dev/null
@@ -1,102 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<FormStep/> currentStep 1`] = `
-[
-  <div
-    className="row"
-  >
-    <div
-      className="col-sm-12"
-    >
-      <ul
-        className="list-group clearfix"
-        style={
-          {
-            "listStyle": "none",
-          }
-        }
-      >
-        <li
-          className="list-group-item form-step-tab"
-          onClick={[Function]}
-        >
-          Tab 1
-        </li>
-        <li
-          className="list-group-item form-step-tab active"
-          onClick={[Function]}
-        >
-          Tab 2
-        </li>
-      </ul>
-      <div
-        className="clearfix"
-      />
-    </div>
-  </div>,
-  <div
-    className="form-step"
-  >
-    <div>
-      test0
-    </div>
-  </div>,
-  <div
-    className="form-step active"
-  >
-    <div>
-      test1
-    </div>
-  </div>,
-]
-`;
-
-exports[`<FormStep/> default props 1`] = `
-[
-  <div
-    className="row"
-  >
-    <div
-      className="col-sm-12"
-    >
-      <ul
-        className="list-group clearfix"
-        style={
-          {
-            "listStyle": "none",
-          }
-        }
-      >
-        <li
-          className="list-group-item form-step-tab active"
-          onClick={[Function]}
-        >
-          Tab 1
-        </li>
-        <li
-          className="list-group-item form-step-tab disabled"
-        >
-          Tab 2
-        </li>
-      </ul>
-      <div
-        className="clearfix"
-      />
-    </div>
-  </div>,
-  <div
-    className="form-step active"
-  >
-    <div>
-      test0
-    </div>
-  </div>,
-  <div
-    className="form-step"
-  >
-    <div>
-      test1
-    </div>
-  </div>,
-]
-`;
diff --git a/packages/components/src/internal/components/forms/input/AppendUnitsInput.spec.tsx b/packages/components/src/internal/components/forms/input/AppendUnitsInput.test.tsx
similarity index 63%
rename from packages/components/src/internal/components/forms/input/AppendUnitsInput.spec.tsx
rename to packages/components/src/internal/components/forms/input/AppendUnitsInput.test.tsx
index a08f10b993..9c1579084d 100644
--- a/packages/components/src/internal/components/forms/input/AppendUnitsInput.spec.tsx
+++ b/packages/components/src/internal/components/forms/input/AppendUnitsInput.test.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
-import { mount } from 'enzyme';
 
 import { QueryColumn } from '../../../../public/QueryColumn';
 
-import { Formsy } from '../formsy';
+import { renderWithAppContext } from '../../../test/reactTestLibraryHelpers';
 
-import { FormsyInput } from './FormsyReactComponents';
+import { Formsy } from '../formsy';
 
 import { AppendUnitsInput } from './AppendUnitsInput';
 
@@ -18,18 +17,16 @@ describe('AppendUnitsInput', () => {
 
     test('without formsy', () => {
         // Without Formsy it should not crash the page
-        const wrapper = mount(<AppendUnitsInput col={column} data={undefined} value={undefined} />);
-        expect(wrapper.exists(FormsyInput)).toBeFalsy();
-        wrapper.unmount();
+        renderWithAppContext(<AppendUnitsInput col={column} data={undefined} value={undefined} />);
+        expect(document.querySelector('#appendUnitsColumn')).toBeNull();
     });
 
     test('with formsy', () => {
-        const wrapper = mount(
+        renderWithAppContext(
             <Formsy>
                 <AppendUnitsInput col={column} data={undefined} formsy value={undefined} />
             </Formsy>
         );
-        expect(wrapper.exists(FormsyInput)).toBeTruthy();
-        wrapper.unmount();
+        expect(document.querySelector('#appendUnitsColumn')).toBeInTheDocument();
     });
 });
diff --git a/packages/components/src/internal/components/forms/input/SampleStatusInput.spec.tsx b/packages/components/src/internal/components/forms/input/SampleStatusInput.spec.tsx
deleted file mode 100644
index 4703ddf97c..0000000000
--- a/packages/components/src/internal/components/forms/input/SampleStatusInput.spec.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-import React, { act } from 'react';
-import { fromJS } from 'immutable';
-
-import { SampleStateType } from '../../samples/constants';
-
-import { SampleState } from '../../samples/models';
-import { QueryColumn, QueryLookup } from '../../../../public/QueryColumn';
-
-import { DiscardConsumedSamplesPanel } from '../../samples/DiscardConsumedSamplesPanel';
-import { mountWithAppServerContext, mountWithServerContext, waitForLifecycle } from '../../../test/enzymeTestHelpers';
-
-import { getSamplesTestAPIWrapper } from '../../samples/APIWrapper';
-
-import { getTestAPIWrapper } from '../../../APIWrapper';
-
-import { TEST_USER_EDITOR, TEST_USER_STORAGE_EDITOR } from '../../../userFixtures';
-import { QuerySelect } from '../QuerySelect';
-
-import { SampleStatusInput } from './SampleStatusInput';
-import { getFolderTestAPIWrapper } from '../../container/FolderAPIWrapper';
-import { TEST_FOLDER_CONTAINER } from '../../../containerFixtures';
-
-describe('SampleStatusInput', () => {
-    const COLUMN_STATUS = new QueryColumn({
-        fieldKey: 'samplestate',
-        name: 'samplestate',
-        fieldKeyArray: ['samplestate'],
-        shownInUpdateView: true,
-        userEditable: true,
-        lookup: new QueryLookup({
-            containerPath: '/Look',
-            keyColumn: 'RowId',
-            displayColumn: 'Label',
-            queryName: 'SampleStatus',
-        }),
-    });
-
-    const INIT_EMPTY = fromJS({
-        displayValue: undefined,
-        value: undefined,
-    });
-
-    const INIT_CONSUMED = fromJS({
-        displayValue: 'Consumed',
-        value: 200,
-    });
-
-    const DEFAULT_PROPS = {
-        api: getTestAPIWrapper(jest.fn, {
-            samples: getSamplesTestAPIWrapper(jest.fn, {
-                getSampleStatuses: jest
-                    .fn()
-                    .mockResolvedValue([
-                        new SampleState({ rowId: 100, label: 'Available', stateType: SampleStateType.Available }),
-                        new SampleState({ rowId: 200, label: 'Consumed', stateType: SampleStateType.Consumed }),
-                        new SampleState({ rowId: 300, label: 'UsedUp', stateType: SampleStateType.Consumed }),
-                    ]),
-            }),
-        }),
-        col: COLUMN_STATUS,
-        data: INIT_EMPTY,
-        key: 'status-key',
-        onAdditionalFormDataChange: jest.fn().mockReturnValue(true),
-    };
-
-    const COMMENTS_NOT_REQUIRED = {
-        api: getTestAPIWrapper(jest.fn, {
-            folder: getFolderTestAPIWrapper(jest.fn, {
-                getAuditSettings: jest.fn().mockResolvedValue({ requireUserComments: false }),
-            }),
-        }),
-    };
-
-    test('initial value is blank', async () => {
-        const component = mountWithServerContext(<SampleStatusInput {...DEFAULT_PROPS} formsy={false} />, {
-            user: TEST_USER_STORAGE_EDITOR,
-        });
-        await waitForLifecycle(component, 50);
-
-        const discardPanel = component.find(DiscardConsumedSamplesPanel);
-        expect(discardPanel).toHaveLength(0);
-        component.unmount();
-    });
-
-    test('initial value is Consumed', async () => {
-        const component = mountWithServerContext(
-            <SampleStatusInput {...DEFAULT_PROPS} formsy={false} value={INIT_CONSUMED} />,
-            { user: TEST_USER_STORAGE_EDITOR }
-        );
-        await waitForLifecycle(component, 50);
-
-        const discardPanel = component.find(DiscardConsumedSamplesPanel);
-        expect(discardPanel).toHaveLength(0);
-        component.unmount();
-    });
-
-    test('change to consumed status, editor', async () => {
-        const component = <SampleStatusInput {...DEFAULT_PROPS} formsy={false} allowDisable />;
-        const wrapper = mountWithAppServerContext(
-            component,
-            COMMENTS_NOT_REQUIRED,
-            { container: TEST_FOLDER_CONTAINER, user: TEST_USER_EDITOR }
-        );
-
-        await waitForLifecycle(wrapper, 50); // retrieve statuses
-        act(() => {
-            wrapper.find(QuerySelect).prop('onQSChange')('name', 200, [], undefined, undefined);
-        });
-        await waitForLifecycle(wrapper, 50); // update after select
-        const discardPanel = wrapper.find(DiscardConsumedSamplesPanel);
-        expect(discardPanel).toHaveLength(0);
-        wrapper.unmount();
-    });
-
-    test('change to consumed status, storage editor, allow disable (bulk edit)', async () => {
-        const component = <SampleStatusInput {...DEFAULT_PROPS} formsy={false} allowDisable />;
-        const wrapper = mountWithAppServerContext(
-            component,
-            COMMENTS_NOT_REQUIRED,
-            { container: TEST_FOLDER_CONTAINER, user: TEST_USER_STORAGE_EDITOR }
-        );
-
-        await waitForLifecycle(wrapper, 50);
-        act(() => {
-            wrapper.find(QuerySelect).prop('onQSChange')('name', 200, [], undefined, undefined);
-        });
-        await waitForLifecycle(wrapper, 50);
-        const discardPanel = wrapper.find(DiscardConsumedSamplesPanel);
-        expect(discardPanel).toHaveLength(1);
-
-        expect(wrapper.find('.sample-bulk-update-discard-panel')).toHaveLength(1);
-        wrapper.unmount();
-    });
-
-    test('change to consumed status, storage editor, no allowDisable', async () => {
-        const component = <SampleStatusInput {...DEFAULT_PROPS} formsy={false} />;
-        const wrapper = mountWithAppServerContext(
-            component,
-            COMMENTS_NOT_REQUIRED,
-            { container: TEST_FOLDER_CONTAINER, user: TEST_USER_STORAGE_EDITOR }
-        );
-
-        await waitForLifecycle(wrapper, 50);
-        act(() => {
-            wrapper.find(QuerySelect).prop('onQSChange')('name', 200, [], undefined, undefined);
-        });
-        await waitForLifecycle(wrapper, 50);
-        const discardPanel = wrapper.find(DiscardConsumedSamplesPanel);
-        expect(discardPanel).toHaveLength(1);
-
-        expect(wrapper.find('.sample-bulk-update-discard-panel')).toHaveLength(0);
-        wrapper.unmount();
-    });
-
-    test('change to not consumed, storage editor', async () => {
-        const component = <SampleStatusInput {...DEFAULT_PROPS} formsy={false} />;
-        const wrapper = mountWithServerContext(component, { user: TEST_USER_STORAGE_EDITOR });
-
-        await waitForLifecycle(wrapper, 50);
-        act(() => {
-            wrapper.find(QuerySelect).prop('onQSChange')('name', 100, [], undefined, undefined);
-        });
-        await waitForLifecycle(wrapper, 50);
-        const discardPanel = wrapper.find(DiscardConsumedSamplesPanel);
-        expect(discardPanel).toHaveLength(0);
-
-        expect(wrapper.find('.sample-bulk-update-discard-panel')).toHaveLength(0);
-        wrapper.unmount();
-    });
-});
diff --git a/packages/components/src/internal/components/forms/input/SampleStatusInput.test.tsx b/packages/components/src/internal/components/forms/input/SampleStatusInput.test.tsx
new file mode 100644
index 0000000000..82306d312c
--- /dev/null
+++ b/packages/components/src/internal/components/forms/input/SampleStatusInput.test.tsx
@@ -0,0 +1,150 @@
+import React from 'react';
+import { act } from '@testing-library/react';
+import { fromJS } from 'immutable';
+
+import { SampleState, SampleStateType } from '../../samples/models';
+import { QueryColumn, QueryLookup } from '../../../../public/QueryColumn';
+
+import { renderWithAppContext } from '../../../test/reactTestLibraryHelpers';
+import { getSamplesTestAPIWrapper } from '../../samples/APIWrapper';
+import { getTestAPIWrapper } from '../../../APIWrapper';
+import { TEST_USER_EDITOR, TEST_USER_STORAGE_EDITOR } from '../../../userFixtures';
+import { getFolderTestAPIWrapper } from '../../container/FolderAPIWrapper';
+import { TEST_FOLDER_CONTAINER } from '../../../containerFixtures';
+
+import { SampleStatusInput } from './SampleStatusInput';
+
+jest.mock('../QuerySelect', () => ({
+    QuerySelect: jest.fn(({ onQSChange, name }) => (
+        <select
+            data-testid="query-select"
+            name={name}
+            onChange={e => {
+                const val = e.target.value === '' ? undefined : parseInt(e.target.value, 10);
+                onQSChange?.(name, val, [], undefined, undefined);
+            }}
+        >
+            <option value="">--</option>
+            <option value="100">Available</option>
+            <option value="200">Consumed</option>
+        </select>
+    )),
+}));
+
+describe('SampleStatusInput', () => {
+    const COLUMN_STATUS = new QueryColumn({
+        fieldKey: 'samplestate',
+        name: 'samplestate',
+        fieldKeyArray: ['samplestate'],
+        shownInUpdateView: true,
+        userEditable: true,
+        lookup: new QueryLookup({
+            containerPath: '/Look',
+            keyColumn: 'RowId',
+            displayColumn: 'Label',
+            queryName: 'SampleStatus',
+        }),
+    });
+
+    const INIT_EMPTY = fromJS({
+        displayValue: undefined,
+        value: undefined,
+    });
+
+    const INIT_CONSUMED = fromJS({
+        displayValue: 'Consumed',
+        value: 200,
+    });
+
+    const DEFAULT_PROPS = {
+        api: getTestAPIWrapper(jest.fn, {
+            samples: getSamplesTestAPIWrapper(jest.fn, {
+                getSampleStatuses: jest
+                    .fn()
+                    .mockResolvedValue([
+                        new SampleState({ rowId: 100, label: 'Available', stateType: SampleStateType.Available }),
+                        new SampleState({ rowId: 200, label: 'Consumed', stateType: SampleStateType.Consumed }),
+                        new SampleState({ rowId: 300, label: 'UsedUp', stateType: SampleStateType.Consumed }),
+                    ]),
+            }),
+        }),
+        col: COLUMN_STATUS,
+        data: INIT_EMPTY,
+        key: 'status-key',
+        onAdditionalFormDataChange: jest.fn().mockReturnValue(true),
+    };
+
+    const COMMENTS_NOT_REQUIRED = {
+        api: getTestAPIWrapper(jest.fn, {
+            folder: getFolderTestAPIWrapper(jest.fn, {
+                getAuditSettings: jest.fn().mockResolvedValue({ requireUserComments: false }),
+            }),
+        }),
+    };
+
+    async function selectValue(value: string): Promise<void> {
+        const select = document.querySelector<HTMLSelectElement>('[data-testid="query-select"]');
+        select.value = value;
+        select.dispatchEvent(new Event('change', { bubbles: true }));
+        await act(async () => {});
+    }
+
+    test('initial value is blank', async () => {
+        renderWithAppContext(<SampleStatusInput {...DEFAULT_PROPS} formsy={false} />, {
+            serverContext: { user: TEST_USER_STORAGE_EDITOR },
+        });
+        await act(async () => {}); // flush getSampleStatuses effect
+        expect(document.querySelectorAll('.discard-consumed-title')).toHaveLength(0);
+    });
+
+    test('initial value is Consumed', async () => {
+        renderWithAppContext(<SampleStatusInput {...DEFAULT_PROPS} formsy={false} value={INIT_CONSUMED} />, {
+            serverContext: { user: TEST_USER_STORAGE_EDITOR },
+        });
+        await act(async () => {}); // flush getSampleStatuses effect
+        expect(document.querySelectorAll('.discard-consumed-title')).toHaveLength(0);
+    });
+
+    test('change to consumed status, editor', async () => {
+        renderWithAppContext(
+            <SampleStatusInput {...DEFAULT_PROPS} formsy={false} allowDisable />,
+            { appContext: COMMENTS_NOT_REQUIRED, serverContext: { container: TEST_FOLDER_CONTAINER, user: TEST_USER_EDITOR } }
+        );
+        await act(async () => {}); // flush getSampleStatuses effect
+        await selectValue('200');
+        expect(document.querySelectorAll('.discard-consumed-title')).toHaveLength(0);
+    });
+
+    test('change to consumed status, storage editor, allow disable (bulk edit)', async () => {
+        renderWithAppContext(
+            <SampleStatusInput {...DEFAULT_PROPS} formsy={false} allowDisable />,
+            { appContext: COMMENTS_NOT_REQUIRED, serverContext: { container: TEST_FOLDER_CONTAINER, user: TEST_USER_STORAGE_EDITOR } }
+        );
+        await act(async () => {}); // flush getSampleStatuses effect
+        await selectValue('200');
+        expect(document.querySelectorAll('.discard-consumed-title')).toHaveLength(1);
+        expect(document.querySelectorAll('.sample-bulk-update-discard-panel')).toHaveLength(1);
+    });
+
+    test('change to consumed status, storage editor, no allowDisable', async () => {
+        renderWithAppContext(
+            <SampleStatusInput {...DEFAULT_PROPS} formsy={false} />,
+            { appContext: COMMENTS_NOT_REQUIRED, serverContext: { container: TEST_FOLDER_CONTAINER, user: TEST_USER_STORAGE_EDITOR } }
+        );
+        await act(async () => {}); // flush getSampleStatuses effect
+        await selectValue('200');
+        expect(document.querySelectorAll('.discard-consumed-title')).toHaveLength(1);
+        expect(document.querySelectorAll('.sample-bulk-update-discard-panel')).toHaveLength(0);
+    });
+
+    test('change to not consumed, storage editor', async () => {
+        renderWithAppContext(
+            <SampleStatusInput {...DEFAULT_PROPS} formsy={false} />,
+            { serverContext: { user: TEST_USER_STORAGE_EDITOR } }
+        );
+        await act(async () => {}); // flush getSampleStatuses effect
+        await selectValue('100');
+        expect(document.querySelectorAll('.discard-consumed-title')).toHaveLength(0);
+        expect(document.querySelectorAll('.sample-bulk-update-discard-panel')).toHaveLength(0);
+    });
+});
diff --git a/packages/components/src/internal/components/labelPrinting/LabelsConfigurationPanel.spec.tsx b/packages/components/src/internal/components/labelPrinting/LabelsConfigurationPanel.spec.tsx
deleted file mode 100644
index babd053c11..0000000000
--- a/packages/components/src/internal/components/labelPrinting/LabelsConfigurationPanel.spec.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-import React from 'react';
-
-import { getTestAPIWrapper } from '../../APIWrapper';
-
-import { mountWithAppServerContext, waitForLifecycle } from '../../test/enzymeTestHelpers';
-
-import { ChoicesListItem } from '../base/ChoicesListItem';
-
-import { Container } from '../base/models/Container';
-
-import { TEST_PROJECT_CONTAINER } from '../../containerFixtures';
-
-import { getLabelPrintingTestAPIWrapper } from './APIWrapper';
-import { LabelsConfigurationPanel, LabelTemplateDetails, LabelTemplatesList } from './LabelsConfigurationPanel';
-import { LabelTemplate } from './models';
-
-
-describe('LabelsConfigurationPanel', () => {
-    const DEFAULT_PROPS = {
-        api: getTestAPIWrapper(jest.fn, {
-            labelprinting: getLabelPrintingTestAPIWrapper(jest.fn),
-        }),
-        defaultLabel: undefined,
-        getIsDirty: jest.fn(),
-        setIsDirty: jest.fn(),
-        container: TEST_PROJECT_CONTAINER,
-    };
-
-    test('default props', async () => {
-        const wrapper = mountWithAppServerContext(<LabelsConfigurationPanel {...DEFAULT_PROPS} />, undefined, {
-            container: new Container({ path: '/Test' }),
-        });
-
-        await waitForLifecycle(wrapper);
-
-        expect(wrapper.find(LabelTemplatesList)).toHaveLength(1);
-        expect(wrapper.find(LabelTemplateDetails)).toHaveLength(1);
-        wrapper.unmount();
-    });
-});
-
-describe('LabelTemplatesList', () => {
-    const DEFAULT_PROPS = {
-        onSelect: jest.fn(),
-        selected: undefined,
-        templates: [],
-    };
-
-    test('default props', () => {
-        const wrapper = mountWithAppServerContext(<LabelTemplatesList {...DEFAULT_PROPS} />);
-
-        expect(wrapper.find('.choices-list__empty-message')).toHaveLength(1);
-        expect(wrapper.find(ChoicesListItem)).toHaveLength(0);
-        expect(wrapper.find('.badge')).toHaveLength(0);
-        wrapper.unmount();
-    });
-
-    test('Single Item', () => {
-        const wrapper = mountWithAppServerContext(
-            <LabelTemplatesList
-                {...DEFAULT_PROPS}
-                templates={[
-                    new LabelTemplate({
-                        name: 'T1',
-                        path: 'T1_path',
-                        rowId: 0,
-                    }),
-                ]}
-            />
-        );
-
-        expect(wrapper.find('.choices-list__empty-message')).toHaveLength(0);
-        expect(wrapper.find(ChoicesListItem)).toHaveLength(1);
-        expect(wrapper.find('.badge')).toHaveLength(0);
-        wrapper.unmount();
-    });
-
-    test('Two Items', () => {
-        const wrapper = mountWithAppServerContext(
-            <LabelTemplatesList
-                {...DEFAULT_PROPS}
-                templates={[
-                    new LabelTemplate({
-                        name: 'T1',
-                        path: 'T1_path',
-                        rowId: 0,
-                    }),
-                    new LabelTemplate({
-                        name: 'T2',
-                        path: 'T2_path',
-                        rowId: 1,
-                    }),
-                ]}
-            />
-        );
-
-        expect(wrapper.find('.choices-list__empty-message')).toHaveLength(0);
-        expect(wrapper.find(ChoicesListItem)).toHaveLength(2);
-        expect(wrapper.find('.badge')).toHaveLength(0);
-        wrapper.unmount();
-    });
-
-    test('Two Items, with default', () => {
-        const wrapper = mountWithAppServerContext(
-            <LabelTemplatesList
-                {...DEFAULT_PROPS}
-                defaultLabel={0}
-                templates={[
-                    new LabelTemplate({
-                        name: 'T1',
-                        path: 'T1_path',
-                        rowId: 0,
-                    }),
-                    new LabelTemplate({
-                        name: 'T2',
-                        path: 'T2_path',
-                        rowId: 1,
-                    }),
-                ]}
-            />
-        );
-
-        expect(wrapper.find('.choices-list__empty-message')).toHaveLength(0);
-        expect(wrapper.find(ChoicesListItem)).toHaveLength(2);
-        expect(wrapper.find('.badge')).toHaveLength(1);
-        expect(wrapper.find('.badge').text()).toBe('default');
-        wrapper.unmount();
-    });
-});
-
-const lpAPI = getLabelPrintingTestAPIWrapper(jest.fn);
-describe('LabelTemplateDetails', () => {
-    const DEFAULT_PROPS = {
-        api: getTestAPIWrapper(jest.fn, {
-            labelprinting: lpAPI,
-        }),
-        defaultLabel: undefined,
-        isNew: false,
-        onActionCompleted: jest.fn(),
-        onDefaultChanged: jest.fn(),
-        onChange: jest.fn(),
-        template: null,
-        isDefaultable: false,
-        container: TEST_PROJECT_CONTAINER,
-    };
-
-    test('default props', () => {
-        const wrapper = mountWithAppServerContext(<LabelTemplateDetails {...DEFAULT_PROPS} />);
-
-        // Don't show anything, use Label List's default message
-        expect(wrapper.find('.choices-detail__empty-message')).toHaveLength(0);
-        expect(wrapper.find('.form-group')).toHaveLength(0);
-        expect(wrapper.find('[name="isDefault"]')).toHaveLength(0);
-        wrapper.unmount();
-    });
-
-    test('Nothing selected message', () => {
-        const wrapper = mountWithAppServerContext(<LabelTemplateDetails {...DEFAULT_PROPS} template={undefined} />);
-
-        // Show no selection message
-        expect(wrapper.find('.choices-detail__empty-message')).toHaveLength(1);
-        expect(wrapper.find('.form-group')).toHaveLength(0);
-        const defaultInput = wrapper.find('[name="isDefault"]');
-        expect(defaultInput).toHaveLength(0);
-        wrapper.unmount();
-    });
-
-    test('Template Selected, cannot be default', () => {
-        const wrapper = mountWithAppServerContext(
-            <LabelTemplateDetails
-                {...DEFAULT_PROPS}
-                isNew={true}
-                template={
-                    new LabelTemplate({
-                        name: '',
-                        path: '',
-                        description: '',
-                        container: '',
-                    })
-                }
-                isDefaultable={false}
-            />
-        );
-
-        // Show form w/o default selector
-        expect(wrapper.find('.choices-detail__empty-message')).toHaveLength(0);
-        expect(wrapper.find('.form-group')).toHaveLength(3);
-        const defaultInput = wrapper.find('[name="isDefault"]');
-        expect(defaultInput).toHaveLength(0);
-        wrapper.unmount();
-    });
-
-    test('Default Template Selected, w/ default selectable', async () => {
-        const template = new LabelTemplate({
-            rowId: 1,
-            name: 'a',
-            path: 'b',
-            description: 'c',
-            container: 'abcd',
-        });
-
-        const wrapper = mountWithAppServerContext(
-            <LabelTemplateDetails
-                {...DEFAULT_PROPS}
-                isNew={false}
-                template={template}
-                isDefaultable={true}
-                defaultLabel={1}
-            />
-        );
-        await waitForLifecycle(wrapper);
-
-        // Show form with default selector and default selected
-        expect(wrapper.find('.choices-detail__empty-message')).toHaveLength(0);
-        expect(wrapper.find('.form-group')).toHaveLength(4);
-        const defaultInput = wrapper.find('[name="isDefault"]');
-        expect(defaultInput).toHaveLength(1);
-        expect(defaultInput.prop('checked')).toBe(true);
-        wrapper.unmount();
-    });
-
-    test('non-default Template Selected, w/ default selectable', async () => {
-        const template = new LabelTemplate({
-            rowId: 2,
-            name: 'a',
-            path: 'b',
-            description: 'c',
-            container: 'abcd',
-        });
-
-        const wrapper = mountWithAppServerContext(
-            <LabelTemplateDetails
-                {...DEFAULT_PROPS}
-                isNew={false}
-                template={template}
-                isDefaultable={true}
-                defaultLabel={1}
-            />
-        );
-        await waitForLifecycle(wrapper);
-
-        // Show form with default selector and default selected
-        expect(wrapper.find('.choices-detail__empty-message')).toHaveLength(0);
-        expect(wrapper.find('.form-group')).toHaveLength(4);
-        const defaultInput = wrapper.find('[name="isDefault"]');
-        expect(defaultInput).toHaveLength(1);
-        expect(defaultInput.prop('checked')).toBe(false);
-        wrapper.unmount();
-    });
-});
diff --git a/packages/components/src/internal/components/labelPrinting/LabelsConfigurationPanel.test.tsx b/packages/components/src/internal/components/labelPrinting/LabelsConfigurationPanel.test.tsx
new file mode 100644
index 0000000000..231f9012f8
--- /dev/null
+++ b/packages/components/src/internal/components/labelPrinting/LabelsConfigurationPanel.test.tsx
@@ -0,0 +1,186 @@
+import React from 'react';
+import { act } from '@testing-library/react';
+
+import { getTestAPIWrapper } from '../../APIWrapper';
+
+import { renderWithAppContext } from '../../test/reactTestLibraryHelpers';
+
+import { Container } from '../base/models/Container';
+
+import { TEST_PROJECT_CONTAINER } from '../../containerFixtures';
+
+import { getLabelPrintingTestAPIWrapper } from './APIWrapper';
+import { LabelsConfigurationPanel, LabelTemplateDetails, LabelTemplatesList } from './LabelsConfigurationPanel';
+import { LabelTemplate } from './models';
+
+describe('LabelsConfigurationPanel', () => {
+    const DEFAULT_PROPS = {
+        api: getTestAPIWrapper(jest.fn, {
+            labelprinting: getLabelPrintingTestAPIWrapper(jest.fn),
+        }),
+        defaultLabel: undefined,
+        getIsDirty: jest.fn(),
+        setIsDirty: jest.fn(),
+        container: TEST_PROJECT_CONTAINER,
+    };
+
+    test('default props', async () => {
+        renderWithAppContext(<LabelsConfigurationPanel {...DEFAULT_PROPS} />, {
+            serverContext: { container: new Container({ path: '/Test' }) },
+        });
+        await act(async () => {}); // flush ensureLabelTemplatesList effect
+
+        // LabelTemplatesList rendered (with no templates → shows empty message)
+        expect(document.querySelectorAll('.choices-list__empty-message')).toHaveLength(1);
+        // LabelTemplateDetails rendered (template=null → no empty message, no form)
+        expect(document.querySelectorAll('.choices-detail__empty-message')).toHaveLength(0);
+        expect(document.querySelectorAll('.choices-container-left-panel')).toHaveLength(1);
+    });
+});
+
+describe('LabelTemplatesList', () => {
+    const DEFAULT_PROPS = {
+        onSelect: jest.fn(),
+        selected: undefined,
+        templates: [],
+    };
+
+    test('default props', () => {
+        renderWithAppContext(<LabelTemplatesList {...DEFAULT_PROPS} />);
+        expect(document.querySelectorAll('.choices-list__empty-message')).toHaveLength(1);
+        expect(document.querySelectorAll('.list-group-item')).toHaveLength(0);
+        expect(document.querySelectorAll('.badge')).toHaveLength(0);
+    });
+
+    test('Single Item', () => {
+        renderWithAppContext(
+            <LabelTemplatesList
+                {...DEFAULT_PROPS}
+                templates={[new LabelTemplate({ name: 'T1', path: 'T1_path', rowId: 0 })]}
+            />
+        );
+        expect(document.querySelectorAll('.choices-list__empty-message')).toHaveLength(0);
+        expect(document.querySelectorAll('.list-group-item')).toHaveLength(1);
+        expect(document.querySelectorAll('.badge')).toHaveLength(0);
+    });
+
+    test('Two Items', () => {
+        renderWithAppContext(
+            <LabelTemplatesList
+                {...DEFAULT_PROPS}
+                templates={[
+                    new LabelTemplate({ name: 'T1', path: 'T1_path', rowId: 0 }),
+                    new LabelTemplate({ name: 'T2', path: 'T2_path', rowId: 1 }),
+                ]}
+            />
+        );
+        expect(document.querySelectorAll('.choices-list__empty-message')).toHaveLength(0);
+        expect(document.querySelectorAll('.list-group-item')).toHaveLength(2);
+        expect(document.querySelectorAll('.badge')).toHaveLength(0);
+    });
+
+    test('Two Items, with default', () => {
+        renderWithAppContext(
+            <LabelTemplatesList
+                {...DEFAULT_PROPS}
+                defaultLabel={0}
+                templates={[
+                    new LabelTemplate({ name: 'T1', path: 'T1_path', rowId: 0 }),
+                    new LabelTemplate({ name: 'T2', path: 'T2_path', rowId: 1 }),
+                ]}
+            />
+        );
+        expect(document.querySelectorAll('.choices-list__empty-message')).toHaveLength(0);
+        expect(document.querySelectorAll('.list-group-item')).toHaveLength(2);
+        expect(document.querySelectorAll('.badge')).toHaveLength(1);
+        expect(document.querySelector('.badge')).toHaveTextContent('default');
+    });
+});
+
+const lpAPI = getLabelPrintingTestAPIWrapper(jest.fn);
+describe('LabelTemplateDetails', () => {
+    const DEFAULT_PROPS = {
+        api: getTestAPIWrapper(jest.fn, {
+            labelprinting: lpAPI,
+        }),
+        defaultLabel: undefined,
+        isNew: false,
+        onActionCompleted: jest.fn(),
+        onDefaultChanged: jest.fn(),
+        onChange: jest.fn(),
+        template: null,
+        isDefaultable: false,
+        container: TEST_PROJECT_CONTAINER,
+    };
+
+    test('default props', () => {
+        renderWithAppContext(<LabelTemplateDetails {...DEFAULT_PROPS} />);
+        // Don't show anything, use Label List's default message
+        expect(document.querySelectorAll('.choices-detail__empty-message')).toHaveLength(0);
+        expect(document.querySelectorAll('.form-group')).toHaveLength(0);
+        expect(document.querySelectorAll('[name="isDefault"]')).toHaveLength(0);
+    });
+
+    test('Nothing selected message', () => {
+        renderWithAppContext(<LabelTemplateDetails {...DEFAULT_PROPS} template={undefined} />);
+        // Show no selection message
+        expect(document.querySelectorAll('.choices-detail__empty-message')).toHaveLength(1);
+        expect(document.querySelectorAll('.form-group')).toHaveLength(0);
+        expect(document.querySelectorAll('[name="isDefault"]')).toHaveLength(0);
+    });
+
+    test('Template Selected, cannot be default', () => {
+        renderWithAppContext(
+            <LabelTemplateDetails
+                {...DEFAULT_PROPS}
+                isNew={true}
+                template={new LabelTemplate({ name: '', path: '', description: '', container: '' })}
+                isDefaultable={false}
+            />
+        );
+        // Show form w/o default selector
+        expect(document.querySelectorAll('.choices-detail__empty-message')).toHaveLength(0);
+        expect(document.querySelectorAll('.form-group')).toHaveLength(3);
+        expect(document.querySelectorAll('[name="isDefault"]')).toHaveLength(0);
+    });
+
+    test('Default Template Selected, w/ default selectable', async () => {
+        const template = new LabelTemplate({ rowId: 1, name: 'a', path: 'b', description: 'c', container: 'abcd' });
+        renderWithAppContext(
+            <LabelTemplateDetails
+                {...DEFAULT_PROPS}
+                isNew={false}
+                template={template}
+                isDefaultable={true}
+                defaultLabel={1}
+            />
+        );
+        await act(async () => {}); // flush isDefault effect
+
+        // Show form with default selector and default selected
+        expect(document.querySelectorAll('.choices-detail__empty-message')).toHaveLength(0);
+        expect(document.querySelectorAll('.form-group')).toHaveLength(4);
+        expect(document.querySelectorAll('[name="isDefault"]')).toHaveLength(1);
+        expect(document.querySelector('[name="isDefault"]')).toBeChecked();
+    });
+
+    test('non-default Template Selected, w/ default selectable', async () => {
+        const template = new LabelTemplate({ rowId: 2, name: 'a', path: 'b', description: 'c', container: 'abcd' });
+        renderWithAppContext(
+            <LabelTemplateDetails
+                {...DEFAULT_PROPS}
+                isNew={false}
+                template={template}
+                isDefaultable={true}
+                defaultLabel={1}
+            />
+        );
+        await act(async () => {}); // flush isDefault effect
+
+        // Show form with default selector and default not selected
+        expect(document.querySelectorAll('.choices-detail__empty-message')).toHaveLength(0);
+        expect(document.querySelectorAll('.form-group')).toHaveLength(4);
+        expect(document.querySelectorAll('[name="isDefault"]')).toHaveLength(1);
+        expect(document.querySelector('[name="isDefault"]')).not.toBeChecked();
+    });
+});
diff --git a/packages/components/src/internal/components/permissions/GroupsList.spec.tsx b/packages/components/src/internal/components/permissions/GroupsList.spec.tsx
deleted file mode 100644
index 3a2946dfe6..0000000000
--- a/packages/components/src/internal/components/permissions/GroupsList.spec.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import React from 'react';
-
-import { TEST_PROJECT_CONTAINER, TEST_PROJECT_CONTAINER_ADMIN } from '../../containerFixtures';
-
-import { mountWithAppServerContext, waitForLifecycle } from '../../test/enzymeTestHelpers';
-import { TEST_USER_APP_ADMIN, TEST_USER_READER } from '../../userFixtures';
-import { getSecurityTestAPIWrapper, SecurityAPIWrapper } from '../security/APIWrapper';
-import { AppContext } from '../../AppContext';
-import { getTestAPIWrapper } from '../../APIWrapper';
-
-import { GroupsList } from './GroupsList';
-import { SecurityPolicy } from './models';
-
-describe('GroupsList', () => {
-    function getDefaultAppContext(overrides?: Partial<SecurityAPIWrapper>): Partial<AppContext> {
-        return {
-            api: getTestAPIWrapper(jest.fn, {
-                security: getSecurityTestAPIWrapper(jest.fn, {
-                    ...overrides,
-                }),
-            }),
-        };
-    }
-
-    const fetchContainers = jest.fn().mockResolvedValue([TEST_PROJECT_CONTAINER_ADMIN]);
-    const fetchPolicy = jest.fn().mockResolvedValue(SecurityPolicy.create({}));
-    const fetchGroups = jest.fn().mockResolvedValue([
-        {
-            id: 1,
-            name: 'Group A',
-            isProjectGroup: true,
-        },
-        {
-            id: 2,
-            name: 'Group B',
-            isProjectGroup: true,
-        },
-        {
-            id: 3,
-            name: 'Group Site',
-            isProjectGroup: false,
-        },
-    ]);
-    const getGroupMemberships = jest.fn().mockResolvedValue([]);
-
-    test('no groups', async () => {
-        const wrapper = mountWithAppServerContext(
-            <GroupsList groups={[]} />,
-            getDefaultAppContext({ fetchContainers, fetchPolicy, fetchGroups, getGroupMemberships }),
-            {
-                container: TEST_PROJECT_CONTAINER,
-                user: TEST_USER_APP_ADMIN,
-            }
-        );
-
-        await waitForLifecycle(wrapper);
-
-        expect(wrapper.find('.principal-detail-ul')).toHaveLength(1);
-        expect(wrapper.find('.principal-detail-li')).toHaveLength(1);
-        expect(wrapper.find('.principal-detail-ul').text()).toBe('None');
-
-        wrapper.unmount();
-    });
-
-    test('just project groups', async () => {
-        const wrapper = mountWithAppServerContext(
-            <GroupsList
-                groups={[
-                    { value: 1, displayValue: 'Group A' },
-                    { value: 2, displayValue: 'Group B' },
-                ]}
-            />,
-            getDefaultAppContext({ fetchContainers, fetchPolicy, fetchGroups, getGroupMemberships }),
-            {
-                container: TEST_PROJECT_CONTAINER,
-                user: TEST_USER_APP_ADMIN,
-            }
-        );
-
-        await waitForLifecycle(wrapper);
-
-        expect(wrapper.find('.principal-detail-ul')).toHaveLength(1);
-        expect(wrapper.find('.principal-detail-li')).toHaveLength(2);
-        expect(wrapper.find('a')).toHaveLength(2);
-        expect(wrapper.find('a').at(0).prop('href')).toBe('#/admin/groups?expand=1');
-        expect(wrapper.find('a').at(1).prop('href')).toBe('#/admin/groups?expand=2');
-        expect(wrapper.find('.principal-detail-ul').text()).toBe('Group AGroup B');
-
-        wrapper.unmount();
-    });
-
-    test('with site groups', async () => {
-        const wrapper = mountWithAppServerContext(
-            <GroupsList
-                groups={[
-                    { value: 1, displayValue: 'Group A' },
-                    { value: 2, displayValue: 'Group B' },
-                    { value: 3, displayValue: 'Group Site' },
-                ]}
-            />,
-            getDefaultAppContext({ fetchContainers, fetchPolicy, fetchGroups, getGroupMemberships }),
-            {
-                container: TEST_PROJECT_CONTAINER,
-                user: TEST_USER_APP_ADMIN,
-            }
-        );
-
-        await waitForLifecycle(wrapper);
-
-        expect(wrapper.find('.principal-detail-ul')).toHaveLength(1);
-        expect(wrapper.find('.principal-detail-li')).toHaveLength(3);
-        expect(wrapper.find('a')).toHaveLength(2);
-        expect(wrapper.find('a').at(0).prop('href')).toBe('#/admin/groups?expand=1');
-        expect(wrapper.find('a').at(1).prop('href')).toBe('#/admin/groups?expand=2');
-        expect(wrapper.find('.principal-detail-ul').text()).toBe('Group AGroup BGroup Site');
-
-        wrapper.unmount();
-    });
-
-    test('non admin', async () => {
-        const wrapper = mountWithAppServerContext(
-            <GroupsList
-                groups={[
-                    { value: 1, displayValue: 'Group A' },
-                    { value: 2, displayValue: 'Group B' },
-                    { value: 3, displayValue: 'Group Site' },
-                ]}
-            />,
-            getDefaultAppContext({
-                fetchContainers: jest.fn().mockResolvedValue([TEST_PROJECT_CONTAINER]),
-                fetchPolicy,
-                fetchGroups,
-                getGroupMemberships,
-            }),
-            {
-                container: TEST_PROJECT_CONTAINER,
-                user: TEST_USER_READER,
-            }
-        );
-
-        await waitForLifecycle(wrapper);
-
-        expect(wrapper.find('.principal-detail-ul')).toHaveLength(1);
-        expect(wrapper.find('.principal-detail-li')).toHaveLength(3);
-        expect(wrapper.find('a')).toHaveLength(0);
-        expect(wrapper.find('.principal-detail-ul').text()).toBe('Group AGroup BGroup Site');
-
-        wrapper.unmount();
-    });
-
-    test('admin, showLinks false', async () => {
-        const wrapper = mountWithAppServerContext(
-            <GroupsList
-                showLinks={false}
-                groups={[
-                    { value: 1, displayValue: 'Group A' },
-                    { value: 2, displayValue: 'Group B' },
-                    { value: 3, displayValue: 'Group Site' },
-                ]}
-            />,
-            getDefaultAppContext({ fetchContainers, fetchPolicy, fetchGroups, getGroupMemberships }),
-            {
-                container: TEST_PROJECT_CONTAINER,
-                user: TEST_USER_APP_ADMIN,
-            }
-        );
-
-        await waitForLifecycle(wrapper);
-
-        expect(wrapper.find('.principal-detail-ul')).toHaveLength(1);
-        expect(wrapper.find('.principal-detail-li')).toHaveLength(3);
-        expect(wrapper.find('a')).toHaveLength(0);
-        expect(wrapper.find('.principal-detail-ul').text()).toBe('Group AGroup BGroup Site');
-
-        wrapper.unmount();
-    });
-});
diff --git a/packages/components/src/internal/components/permissions/GroupsList.test.tsx b/packages/components/src/internal/components/permissions/GroupsList.test.tsx
new file mode 100644
index 0000000000..1887840c59
--- /dev/null
+++ b/packages/components/src/internal/components/permissions/GroupsList.test.tsx
@@ -0,0 +1,165 @@
+import React from 'react';
+import { act } from '@testing-library/react';
+
+import { TEST_PROJECT_CONTAINER, TEST_PROJECT_CONTAINER_ADMIN } from '../../containerFixtures';
+
+import { renderWithAppContext } from '../../test/reactTestLibraryHelpers';
+import { TEST_USER_APP_ADMIN, TEST_USER_READER } from '../../userFixtures';
+import { getSecurityTestAPIWrapper, SecurityAPIWrapper } from '../security/APIWrapper';
+import { AppContext } from '../../AppContext';
+import { getTestAPIWrapper } from '../../APIWrapper';
+
+import { GroupsList } from './GroupsList';
+import { SecurityPolicy } from './models';
+
+describe('GroupsList', () => {
+    function getDefaultAppContext(overrides?: Partial<SecurityAPIWrapper>): Partial<AppContext> {
+        return {
+            api: getTestAPIWrapper(jest.fn, {
+                security: getSecurityTestAPIWrapper(jest.fn, {
+                    ...overrides,
+                }),
+            }),
+        };
+    }
+
+    const fetchContainers = jest.fn().mockResolvedValue([TEST_PROJECT_CONTAINER_ADMIN]);
+    const fetchPolicy = jest.fn().mockResolvedValue(SecurityPolicy.create({}));
+    const fetchGroups = jest.fn().mockResolvedValue([
+        {
+            id: 1,
+            name: 'Group A',
+            isProjectGroup: true,
+        },
+        {
+            id: 2,
+            name: 'Group B',
+            isProjectGroup: true,
+        },
+        {
+            id: 3,
+            name: 'Group Site',
+            isProjectGroup: false,
+        },
+    ]);
+    const getGroupMemberships = jest.fn().mockResolvedValue([]);
+
+    test('no groups', async () => {
+        const { container } = renderWithAppContext(
+            <GroupsList groups={[]} />,
+            {
+                appContext: getDefaultAppContext({ fetchContainers, fetchPolicy, fetchGroups, getGroupMemberships }),
+                serverContext: { container: TEST_PROJECT_CONTAINER, user: TEST_USER_APP_ADMIN },
+            }
+        );
+
+        await act(async () => {});
+
+        expect(container.querySelectorAll('.principal-detail-ul')).toHaveLength(1);
+        expect(container.querySelectorAll('.principal-detail-li')).toHaveLength(1);
+        expect(container.querySelector('.principal-detail-ul').textContent).toBe('None');
+    });
+
+    test('just project groups', async () => {
+        const { container } = renderWithAppContext(
+            <GroupsList
+                groups={[
+                    { value: 1, displayValue: 'Group A' },
+                    { value: 2, displayValue: 'Group B' },
+                ]}
+            />,
+            {
+                appContext: getDefaultAppContext({ fetchContainers, fetchPolicy, fetchGroups, getGroupMemberships }),
+                serverContext: { container: TEST_PROJECT_CONTAINER, user: TEST_USER_APP_ADMIN },
+            }
+        );
+
+        await act(async () => {});
+
+        expect(container.querySelectorAll('.principal-detail-ul')).toHaveLength(1);
+        expect(container.querySelectorAll('.principal-detail-li')).toHaveLength(2);
+        const anchors = container.querySelectorAll('a');
+        expect(anchors).toHaveLength(2);
+        expect(anchors[0].getAttribute('href')).toBe('/admin/groups?expand=1');
+        expect(anchors[1].getAttribute('href')).toBe('/admin/groups?expand=2');
+        expect(container.querySelector('.principal-detail-ul').textContent).toBe('Group AGroup B');
+    });
+
+    test('with site groups', async () => {
+        const { container } = renderWithAppContext(
+            <GroupsList
+                groups={[
+                    { value: 1, displayValue: 'Group A' },
+                    { value: 2, displayValue: 'Group B' },
+                    { value: 3, displayValue: 'Group Site' },
+                ]}
+            />,
+            {
+                appContext: getDefaultAppContext({ fetchContainers, fetchPolicy, fetchGroups, getGroupMemberships }),
+                serverContext: { container: TEST_PROJECT_CONTAINER, user: TEST_USER_APP_ADMIN },
+            }
+        );
+
+        await act(async () => {});
+
+        expect(container.querySelectorAll('.principal-detail-ul')).toHaveLength(1);
+        expect(container.querySelectorAll('.principal-detail-li')).toHaveLength(3);
+        const anchors = container.querySelectorAll('a');
+        expect(anchors).toHaveLength(2);
+        expect(anchors[0].getAttribute('href')).toBe('/admin/groups?expand=1');
+        expect(anchors[1].getAttribute('href')).toBe('/admin/groups?expand=2');
+        expect(container.querySelector('.principal-detail-ul').textContent).toBe('Group AGroup BGroup Site');
+    });
+
+    test('non admin', async () => {
+        const { container } = renderWithAppContext(
+            <GroupsList
+                groups={[
+                    { value: 1, displayValue: 'Group A' },
+                    { value: 2, displayValue: 'Group B' },
+                    { value: 3, displayValue: 'Group Site' },
+                ]}
+            />,
+            {
+                appContext: getDefaultAppContext({
+                    fetchContainers: jest.fn().mockResolvedValue([TEST_PROJECT_CONTAINER]),
+                    fetchPolicy,
+                    fetchGroups,
+                    getGroupMemberships,
+                }),
+                serverContext: { container: TEST_PROJECT_CONTAINER, user: TEST_USER_READER },
+            }
+        );
+
+        await act(async () => {});
+
+        expect(container.querySelectorAll('.principal-detail-ul')).toHaveLength(1);
+        expect(container.querySelectorAll('.principal-detail-li')).toHaveLength(3);
+        expect(container.querySelectorAll('a')).toHaveLength(0);
+        expect(container.querySelector('.principal-detail-ul').textContent).toBe('Group AGroup BGroup Site');
+    });
+
+    test('admin, showLinks false', async () => {
+        const { container } = renderWithAppContext(
+            <GroupsList
+                showLinks={false}
+                groups={[
+                    { value: 1, displayValue: 'Group A' },
+                    { value: 2, displayValue: 'Group B' },
+                    { value: 3, displayValue: 'Group Site' },
+                ]}
+            />,
+            {
+                appContext: getDefaultAppContext({ fetchContainers, fetchPolicy, fetchGroups, getGroupMemberships }),
+                serverContext: { container: TEST_PROJECT_CONTAINER, user: TEST_USER_APP_ADMIN },
+            }
+        );
+
+        await act(async () => {});
+
+        expect(container.querySelectorAll('.principal-detail-ul')).toHaveLength(1);
+        expect(container.querySelectorAll('.principal-detail-li')).toHaveLength(3);
+        expect(container.querySelectorAll('a')).toHaveLength(0);
+        expect(container.querySelector('.principal-detail-ul').textContent).toBe('Group AGroup BGroup Site');
+    });
+});
diff --git a/packages/components/src/internal/components/report-list/ReportList.spec.tsx b/packages/components/src/internal/components/report-list/ReportList.test.tsx
similarity index 56%
rename from packages/components/src/internal/components/report-list/ReportList.spec.tsx
rename to packages/components/src/internal/components/report-list/ReportList.test.tsx
index 2739fafd27..a19f0db4dd 100644
--- a/packages/components/src/internal/components/report-list/ReportList.spec.tsx
+++ b/packages/components/src/internal/components/report-list/ReportList.test.tsx
@@ -14,13 +14,12 @@
  * limitations under the License.
  */
 import React from 'react';
-import { mount } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 
 import exampleData from '../../../test/data/example_browse_data_tree_api.json';
 
 import { AppURL } from '../../url/AppURL';
 import { flattenBrowseDataTreeResponse } from '../../query/reports';
-import { LoadingSpinner } from '../base/LoadingSpinner';
 
 import { ReportItemModal, ReportList, ReportListItem } from './ReportList';
 
@@ -49,37 +48,31 @@ describe('<ReportList />', () => {
     });
 
     test('Render with no data', () => {
-        const component = <ReportList loading={false} reports={[]} onReportClicked={noop} />;
-        const wrapper = mount(component);
-        expect(wrapper.find(LoadingSpinner)).toHaveLength(0);
-        expect(wrapper.find(messageSelector).text()).toContain('No reports');
-        wrapper.unmount();
+        const { container } = render(<ReportList loading={false} reports={[]} onReportClicked={noop} />);
+        expect(container.querySelectorAll('.fa-spinner')).toHaveLength(0);
+        expect(container.querySelector(messageSelector).textContent).toContain('No reports');
     });
 
     test('Render loading', () => {
-        const component = <ReportList loading={true} reports={[]} onReportClicked={noop} />;
-        const wrapper = mount(component);
-        expect(wrapper.find(LoadingSpinner)).toHaveLength(1);
-        wrapper.unmount();
+        const { container } = render(<ReportList loading={true} reports={[]} onReportClicked={noop} />);
+        expect(container.querySelectorAll('.fa-spinner')).toHaveLength(1);
     });
 
     test('Render with data', () => {
         const reports = flattenBrowseDataTreeResponse(exampleData, urlMapper);
-        const component = <ReportList loading={false} reports={reports} onReportClicked={noop} />;
-        const wrapper = mount(component);
-        expect(wrapper.find(LoadingSpinner)).toHaveLength(0);
-        expect(wrapper.find(ReportListItem)).toHaveLength(reports.length);
-        wrapper.unmount();
+        const { container } = render(<ReportList loading={false} reports={reports} onReportClicked={noop} />);
+        expect(container.querySelectorAll('.fa-spinner')).toHaveLength(0);
+        expect(container.querySelectorAll('.report-list-item')).toHaveLength(reports.length);
     });
 
     test('onReportClicked should execute on click', () => {
         const reports = flattenBrowseDataTreeResponse(exampleData, urlMapper).slice(0, 1);
         const onReportClicked = jest.fn();
-        const component = <ReportList loading={false} reports={reports} onReportClicked={onReportClicked} />;
-        const wrapper = mount(component);
-        wrapper.find(ReportListItem).simulate('click');
+        const { container } = render(
+            <ReportList loading={false} reports={reports} onReportClicked={onReportClicked} />
+        );
+        fireEvent.click(container.querySelector('.report-list-item'));
         expect(onReportClicked).toHaveBeenCalledTimes(1);
-        wrapper.unmount();
     });
 });
 
@@ -87,38 +80,32 @@ describe('<ReportListItem />', () => {
     test('ReportListItem renders', () => {
         const report = flattenBrowseDataTreeResponse(exampleData, urlMapper)[1];
         const onClick = jest.fn();
-        const component = <ReportListItem report={report} onClick={onClick} />;
-        const wrapper = mount(component);
-        expect(wrapper.find(createdBySelector)).toHaveLength(1);
-        expect(wrapper.text()).toContain(report.createdBy);
-        expect(wrapper.text()).toContain(report.name);
-        // Enzyme prefixes relative URLs with http://localhost
+        const { container } = render(<ReportListItem report={report} onClick={onClick} />);
+        expect(container.querySelectorAll(createdBySelector)).toHaveLength(1);
+        expect(container.textContent).toContain(report.createdBy);
+        expect(container.textContent).toContain(report.name);
+        // jsdom prefixes relative URLs with http://localhost
         const expectedHref = `http://localhost/#${report.appUrl.toString()}`;
-        expect(wrapper.find('a').getDOMNode()).toHaveProperty('href', expectedHref);
-        wrapper.unmount();
+        expect(container.querySelector('a')).toHaveProperty('href', expectedHref);
     });
 
     test('ReportListItem does not render non-existent createdBy', () => {
         const reports = flattenBrowseDataTreeResponse(exampleData, urlMapper);
         const report = reports[1];
         report.createdBy = undefined;
-        const component = <ReportListItem report={report} onClick={noop} />;
-        const wrapper = mount(component);
-        expect(wrapper.find(createdBySelector)).toHaveLength(0);
-        wrapper.unmount();
+        const { container } = render(<ReportListItem report={report} onClick={noop} />);
+        expect(container.querySelectorAll(createdBySelector)).toHaveLength(0);
     });
 
     test('ReportListItem calls onClick when clicked', () => {
         const report = flattenBrowseDataTreeResponse(exampleData, urlMapper)[0];
         const onClick = jest.fn();
-        const component = <ReportListItem report={report} onClick={onClick} />;
-        const wrapper = mount(component);
-        wrapper.simulate('click');
+        const { container } = render(<ReportListItem report={report} onClick={onClick} />);
+        fireEvent.click(container.querySelector('.report-list-item'));
         expect(onClick).toHaveBeenCalledTimes(1);
         // Test that we pass the report to onClick. If this test fails that means we'll need to fix any callbacks that
         // expect a report to be passed to the callback.
         expect(onClick.mock.calls[0][0]).toBe(report);
-        wrapper.unmount();
     });
 });
 
@@ -129,17 +116,17 @@ describe('<ReportItemModal />', () => {
         const onClose = jest.fn();
 
         // Act
-        const wrapper = mount(<ReportItemModal report={report} onClose={onClose} />);
+        render(<ReportItemModal report={report} onClose={onClose} />);
 
         // Assert
-        // Verify modal displays properly
-        expect(wrapper.find('.report-item-modal .modal-title').text()).toEqual(report.name);
+        // Verify modal displays properly (Modal uses a portal, so use document.querySelector)
+        expect(document.querySelector('.modal-title').textContent).toEqual(report.name);
 
         // Verify report items are listed
-        const reportItems = wrapper.find('.report-item-modal .report-item__metadata-item span');
+        const reportItems = document.querySelectorAll('.report-item__metadata-item span');
         expect(reportItems.length).toEqual(3);
-        expect(reportItems.at(0).text()).toEqual(report.createdBy);
-        expect(reportItems.at(1).text()).toEqual(report.type);
-        expect(reportItems.at(2).text()).toEqual(report.description);
+        expect(reportItems[0].textContent).toEqual(report.createdBy);
+        expect(reportItems[1].textContent).toEqual(report.type);
+        expect(reportItems[2].textContent).toEqual(report.description);
     });
 });
diff --git a/packages/components/src/internal/components/search/SearchBox.spec.tsx b/packages/components/src/internal/components/search/SearchBox.spec.tsx
deleted file mode 100644
index 081b3f1ec3..0000000000
--- a/packages/components/src/internal/components/search/SearchBox.spec.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-
-import { SearchBox } from './SearchBox';
-
-describe('SearchBox', () => {
-    test('with Find', () => {
-        const wrapper = mount(<SearchBox onSearch={jest.fn} onFindByIds={jest.fn} findNounPlural="Items" />);
-        expect(wrapper.find('DropdownButton')).toHaveLength(1);
-        const menuItem = wrapper.find('MenuItem');
-        expect(menuItem).toHaveLength(3);
-        expect(menuItem.at(0).text().trim()).toBe('Find Items by Barcode');
-        expect(menuItem.at(1).text().trim()).toBe('Find Items by ID');
-        expect(menuItem.at(2).text().trim()).toBe('Sample Finder');
-    });
-
-    test('without Find', () => {
-        const wrapper = mount(<SearchBox onSearch={jest.fn} placeholder="Seek wisdom" />);
-        expect(wrapper.find('DropdownButton')).toHaveLength(0);
-        const input = wrapper.find('input');
-        expect(input).toHaveLength(1);
-        expect(input.prop('placeholder')).toBe('Seek wisdom');
-    });
-});
diff --git a/packages/components/src/internal/components/search/SearchBox.test.tsx b/packages/components/src/internal/components/search/SearchBox.test.tsx
new file mode 100644
index 0000000000..124d08faa5
--- /dev/null
+++ b/packages/components/src/internal/components/search/SearchBox.test.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { SearchBox } from './SearchBox';
+
+describe('SearchBox', () => {
+    test('with Find', () => {
+        const { container } = render(<SearchBox onSearch={jest.fn} onFindByIds={jest.fn} findNounPlural="Items" />);
+        expect(container.querySelectorAll('.lk-dropdown.btn-group')).toHaveLength(1);
+        const menuItems = container.querySelectorAll('.lk-menu-item');
+        expect(menuItems).toHaveLength(3);
+        expect(menuItems[0].textContent.trim()).toBe('Find Items by Barcode');
+        expect(menuItems[1].textContent.trim()).toBe('Find Items by ID');
+        expect(menuItems[2].textContent.trim()).toBe('Sample Finder');
+    });
+
+    test('without Find', () => {
+        const { container } = render(<SearchBox onSearch={jest.fn} placeholder="Seek wisdom" />);
+        expect(container.querySelectorAll('.lk-dropdown.btn-group')).toHaveLength(0);
+        const inputs = container.querySelectorAll('input');
+        expect(inputs).toHaveLength(1);
+        expect((inputs[0] as HTMLInputElement).placeholder).toBe('Seek wisdom');
+    });
+});
diff --git a/packages/components/src/internal/components/search/SearchPanel.spec.tsx b/packages/components/src/internal/components/search/SearchPanel.spec.tsx
deleted file mode 100644
index 465e58adeb..0000000000
--- a/packages/components/src/internal/components/search/SearchPanel.spec.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import React from 'react';
-
-import { fromJS, Map } from 'immutable';
-
-import { mountWithAppServerContext } from '../../test/enzymeTestHelpers';
-
-import { PaginationButtons } from '../buttons/PaginationButtons';
-
-import entitiesJSON from '../../../test/data/searchResults.json';
-
-import { SearchPanelImpl, SearchPanelImplProps } from './SearchPanel';
-
-import { SearchResultCard } from './SearchResultCard';
-
-import { SearchResultsModel } from './models';
-import { getProcessedSearchHits } from './actions';
-
-describe('SearchPanelImpl', () => {
-    function defaultProps(): SearchPanelImplProps {
-        return {
-            appName: 'test',
-            title: 'Search',
-            model: undefined,
-            offset: undefined,
-            onPageChange: jest.fn(),
-            search: jest.fn(),
-            searchMetadata: undefined,
-            searchTerm: undefined,
-        };
-    }
-
-    test('default', () => {
-        const wrapper = mountWithAppServerContext(<SearchPanelImpl {...defaultProps()} />);
-
-        expect(wrapper.find('.search-form')).toHaveLength(1);
-        expect(wrapper.find('HelpLink.search-form__help-link')).toHaveLength(1);
-
-        // No search term set, so no result message or results
-        expect(wrapper.find('.search-panel__no-results')).toHaveLength(0);
-        expect(wrapper.find(SearchResultCard)).toHaveLength(0);
-        expect(wrapper.find(PaginationButtons)).toHaveLength(0);
-    });
-
-    test('No Results', () => {
-        const wrapper = mountWithAppServerContext(
-            <SearchPanelImpl {...defaultProps()} searchTerm="Nothing to see here" />
-        );
-
-        expect(wrapper.find('.search-form')).toHaveLength(1);
-        expect(wrapper.find('HelpLink.search-form__help-link')).toHaveLength(1);
-
-        // No search term set, so no result message or results
-        expect(wrapper.find('.search-panel__no-results')).toHaveLength(1);
-        expect(wrapper.find(SearchResultCard)).toHaveLength(0);
-        expect(wrapper.find(PaginationButtons)).toHaveLength(0);
-    });
-
-    test('No paging', () => {
-        const hits = getProcessedSearchHits(entitiesJSON.hits);
-        const model = SearchResultsModel.create({
-            entities: Map(fromJS({ ...entitiesJSON, hits })),
-        });
-
-        const wrapper = mountWithAppServerContext(
-            <SearchPanelImpl {...defaultProps()} searchTerm="see here" model={model} />
-        );
-
-        expect(wrapper.find('.search-form')).toHaveLength(1);
-        expect(wrapper.find('HelpLink.search-form__help-link')).toHaveLength(1);
-
-        // Search term set so we have all results
-        expect(wrapper.find('.search-panel__no-results')).toHaveLength(0);
-        expect(wrapper.find(SearchResultCard)).toHaveLength(49);
-        expect(wrapper.find(PaginationButtons)).toHaveLength(0);
-    });
-
-    test('paging set', () => {
-        const hits = getProcessedSearchHits(entitiesJSON.hits);
-        const pageSize = 4;
-        const page2 = hits.slice(pageSize, pageSize * 2);
-        const model = SearchResultsModel.create({
-            entities: Map(fromJS({ ...entitiesJSON, hits: page2 })),
-        });
-
-        const wrapper = mountWithAppServerContext(
-            <SearchPanelImpl
-                {...defaultProps()}
-                searchTerm="see here"
-                model={model}
-                pageSize={pageSize}
-                offset={pageSize}
-            />
-        );
-
-        expect(wrapper.find('.search-form')).toHaveLength(1);
-        expect(wrapper.find('HelpLink.search-form__help-link')).toHaveLength(1);
-
-        // No search term set, so no result message or results
-        expect(wrapper.find('.search-panel__no-results')).toHaveLength(0);
-        expect(wrapper.find(SearchResultCard)).toHaveLength(4);
-        expect(wrapper.find(PaginationButtons)).toHaveLength(1);
-        expect(wrapper.find('.pagination-buttons__info').text()).toBe('5 - 8 of 47');
-    });
-
-    test('results fit on one page', () => {
-        const hits = getProcessedSearchHits(entitiesJSON.hits);
-        const pageSize = 50;
-        const model = SearchResultsModel.create({
-            entities: Map(fromJS({ ...entitiesJSON, hits })),
-        });
-
-        const wrapper = mountWithAppServerContext(
-            <SearchPanelImpl {...defaultProps()} searchTerm="see here" model={model} pageSize={pageSize} offset={0} />
-        );
-
-        expect(wrapper.find('.search-form')).toHaveLength(1);
-        expect(wrapper.find('HelpLink.search-form__help-link')).toHaveLength(1);
-
-        // Search term set, so no "no-result" message
-        expect(wrapper.find('.search-panel__no-results')).toHaveLength(0);
-        expect(wrapper.find(SearchResultCard)).toHaveLength(49);
-        // All results fit on the page, so no pagination buttons
-        expect(wrapper.find(PaginationButtons)).toHaveLength(0);
-    });
-
-    test('Last page', () => {
-        const hits = getProcessedSearchHits(entitiesJSON.hits);
-        const pageSize = 20;
-        const offset = pageSize * 2;
-        const page3 = hits.slice(offset, offset + pageSize);
-        const model = SearchResultsModel.create({
-            entities: Map(fromJS({ ...entitiesJSON, hits: page3 })),
-        });
-
-        const wrapper = mountWithAppServerContext(
-            <SearchPanelImpl
-                {...defaultProps()}
-                searchTerm="see here"
-                model={model}
-                pageSize={pageSize}
-                offset={offset}
-            />
-        );
-
-        expect(wrapper.find('.search-form')).toHaveLength(1);
-        expect(wrapper.find('HelpLink.search-form__help-link')).toHaveLength(1);
-
-        // Search term set, so no "no-results" message
-        expect(wrapper.find('.search-panel__no-results')).toHaveLength(0);
-        expect(wrapper.find(SearchResultCard)).toHaveLength(9);
-        expect(wrapper.find(PaginationButtons)).toHaveLength(1);
-        expect(wrapper.find('.pagination-buttons__info').text()).toBe('41 - 47 of 47');
-    });
-});
diff --git a/packages/components/src/internal/components/search/SearchPanel.test.tsx b/packages/components/src/internal/components/search/SearchPanel.test.tsx
new file mode 100644
index 0000000000..044aa1cd81
--- /dev/null
+++ b/packages/components/src/internal/components/search/SearchPanel.test.tsx
@@ -0,0 +1,150 @@
+import React from 'react';
+
+import { fromJS, Map } from 'immutable';
+
+import { renderWithAppContext } from '../../test/reactTestLibraryHelpers';
+
+import entitiesJSON from '../../../test/data/searchResults.json';
+
+import { SearchPanelImpl, SearchPanelImplProps } from './SearchPanel';
+
+import { SearchResultsModel } from './models';
+import { getProcessedSearchHits } from './actions';
+
+describe('SearchPanelImpl', () => {
+    function defaultProps(): SearchPanelImplProps {
+        return {
+            appName: 'test',
+            title: 'Search',
+            model: undefined,
+            offset: undefined,
+            onPageChange: jest.fn(),
+            search: jest.fn(),
+            searchMetadata: undefined,
+            searchTerm: undefined,
+        };
+    }
+
+    test('default', () => {
+        const { container } = renderWithAppContext(<SearchPanelImpl {...defaultProps()} />);
+
+        expect(container.querySelectorAll('.search-form')).toHaveLength(1);
+        expect(container.querySelectorAll('.search-form__help-link')).toHaveLength(1);
+
+        // No search term set, so no result message or results
+        expect(container.querySelectorAll('.search-panel__no-results')).toHaveLength(0);
+        expect(container.querySelectorAll('.search-result__card-container')).toHaveLength(0);
+        expect(container.querySelectorAll('.pagination-buttons')).toHaveLength(0);
+    });
+
+    test('No Results', () => {
+        const { container } = renderWithAppContext(
+            <SearchPanelImpl {...defaultProps()} searchTerm="Nothing to see here" />
+        );
+
+        expect(container.querySelectorAll('.search-form')).toHaveLength(1);
+        expect(container.querySelectorAll('.search-form__help-link')).toHaveLength(1);
+
+        // No search term set, so no result message or results
+        expect(container.querySelectorAll('.search-panel__no-results')).toHaveLength(1);
+        expect(container.querySelectorAll('.search-result__card-container')).toHaveLength(0);
+        expect(container.querySelectorAll('.pagination-buttons')).toHaveLength(0);
+    });
+
+    test('No paging', () => {
+        const hits = getProcessedSearchHits(entitiesJSON.hits);
+        const model = SearchResultsModel.create({
+            entities: Map(fromJS({ ...entitiesJSON, hits })),
+        });
+
+        const { container } = renderWithAppContext(
+            <SearchPanelImpl {...defaultProps()} searchTerm="see here" model={model} />
+        );
+
+        expect(container.querySelectorAll('.search-form')).toHaveLength(1);
+        expect(container.querySelectorAll('.search-form__help-link')).toHaveLength(1);
+
+        // Search term set so we have all results
+        expect(container.querySelectorAll('.search-panel__no-results')).toHaveLength(0);
+        expect(container.querySelectorAll('.search-result__card-container')).toHaveLength(49);
+        expect(container.querySelectorAll('.pagination-buttons')).toHaveLength(0);
+    });
+
+    test('paging set', () => {
+        const hits = getProcessedSearchHits(entitiesJSON.hits);
+        const pageSize = 4;
+        const page2 = hits.slice(pageSize, pageSize * 2);
+        const model = SearchResultsModel.create({
+            entities: Map(fromJS({ ...entitiesJSON, hits: page2 })),
+        });
+
+        const { container } = renderWithAppContext(
+            <SearchPanelImpl
+                {...defaultProps()}
+                searchTerm="see here"
+                model={model}
+                pageSize={pageSize}
+                offset={pageSize}
+            />
+        );
+
+        expect(container.querySelectorAll('.search-form')).toHaveLength(1);
+        expect(container.querySelectorAll('.search-form__help-link')).toHaveLength(1);
+
+        // No search term set, so no result message or results
+        expect(container.querySelectorAll('.search-panel__no-results')).toHaveLength(0);
+        expect(container.querySelectorAll('.search-result__card-container')).toHaveLength(4);
+        expect(container.querySelectorAll('.pagination-buttons')).toHaveLength(1);
+        expect(container.querySelector('.pagination-buttons__info').textContent).toBe('5 - 8 of 47');
+    });
+
+    test('results fit on one page', () => {
+        const hits = getProcessedSearchHits(entitiesJSON.hits);
+        const pageSize = 50;
+        const model = SearchResultsModel.create({
+            entities: Map(fromJS({ ...entitiesJSON, hits })),
+        });
+
+        const { container } = renderWithAppContext(
+            <SearchPanelImpl {...defaultProps()} searchTerm="see here" model={model} pageSize={pageSize} offset={0} />
+        );
+
+        expect(container.querySelectorAll('.search-form')).toHaveLength(1);
+        expect(container.querySelectorAll('.search-form__help-link')).toHaveLength(1);
+
+        // Search term set, so no "no-result" message
+        expect(container.querySelectorAll('.search-panel__no-results')).toHaveLength(0);
+        expect(container.querySelectorAll('.search-result__card-container')).toHaveLength(49);
+        // All results fit on the page, so no pagination buttons
+        expect(container.querySelectorAll('.pagination-buttons')).toHaveLength(0);
+    });
+
+    test('Last page', () => {
+        const hits = getProcessedSearchHits(entitiesJSON.hits);
+        const pageSize = 20;
+        const offset = pageSize * 2;
+        const page3 = hits.slice(offset, offset + pageSize);
+        const model = SearchResultsModel.create({
+            entities: Map(fromJS({ ...entitiesJSON, hits: page3 })),
+        });
+
+        const { container } = renderWithAppContext(
+            <SearchPanelImpl
+                {...defaultProps()}
+                searchTerm="see here"
+                model={model}
+                pageSize={pageSize}
+                offset={offset}
+            />
+        );
+
+        expect(container.querySelectorAll('.search-form')).toHaveLength(1);
+        expect(container.querySelectorAll('.search-form__help-link')).toHaveLength(1);
+
+        // Search term set, so no "no-results" message
+        expect(container.querySelectorAll('.search-panel__no-results')).toHaveLength(0);
+        expect(container.querySelectorAll('.search-result__card-container')).toHaveLength(9);
+        expect(container.querySelectorAll('.pagination-buttons')).toHaveLength(1);
+        expect(container.querySelector('.pagination-buttons__info').textContent).toBe('41 - 47 of 47');
+    });
+});
diff --git a/packages/components/src/internal/components/user/UserLink.spec.tsx b/packages/components/src/internal/components/user/UserLink.spec.tsx
deleted file mode 100644
index a5b3c30f70..0000000000
--- a/packages/components/src/internal/components/user/UserLink.spec.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import React from 'react';
-
-import { mountWithAppServerContext, waitForLifecycle } from '../../test/enzymeTestHelpers';
-import { TEST_USER_APP_ADMIN, TEST_USER_READER } from '../../userFixtures';
-
-import { UserLink, UserLinkList } from './UserLink';
-
-describe('UserLink', () => {
-    test('unknown', () => {
-        const wrapper = mountWithAppServerContext(<UserLink unknown />, {}, { user: TEST_USER_APP_ADMIN });
-        expect(wrapper.find('a')).toHaveLength(0);
-        expect(wrapper.find('span')).toHaveLength(1);
-        expect(wrapper.find('.gray-text')).toHaveLength(1);
-        expect(wrapper.find('span').text()).toBe('<unknown user>');
-        wrapper.unmount();
-    });
-
-    test('displayValue without userId', () => {
-        const wrapper = mountWithAppServerContext(
-            <UserLink userDisplayValue="Test display" />,
-            {},
-            {
-                user: TEST_USER_APP_ADMIN,
-            }
-        );
-        expect(wrapper.find('a')).toHaveLength(0);
-        expect(wrapper.find('span')).toHaveLength(1);
-        expect(wrapper.find('.gray-text')).toHaveLength(0);
-        expect(wrapper.find('span').text()).toBe('Test display');
-        wrapper.unmount();
-    });
-
-    test('userId without displayValue', () => {
-        const wrapper = mountWithAppServerContext(<UserLink userId={1} />, {}, { user: TEST_USER_APP_ADMIN });
-        expect(wrapper.find('a')).toHaveLength(0);
-        expect(wrapper.find('span')).toHaveLength(1);
-        expect(wrapper.find('.gray-text')).toHaveLength(1);
-        expect(wrapper.find('span').text()).toBe('<1>');
-        wrapper.unmount();
-    });
-
-    test('userId with displayValue', async () => {
-        const wrapper = mountWithAppServerContext(
-            <UserLink userId={1} userDisplayValue="Test display" />,
-            {},
-            {
-                user: TEST_USER_APP_ADMIN,
-            }
-        );
-        await waitForLifecycle(wrapper);
-        expect(wrapper.find('a')).toHaveLength(1);
-        expect(wrapper.find('.clickable')).toHaveLength(1);
-        expect(wrapper.find('span')).toHaveLength(0);
-        expect(wrapper.find('.gray-text')).toHaveLength(0);
-        expect(wrapper.find('a').text()).toBe('Test display');
-        wrapper.unmount();
-    });
-
-    test('user cannot ReadUserDetails, not self', async () => {
-        const wrapper = mountWithAppServerContext(
-            <UserLink userId={1} userDisplayValue="Test display" />,
-            {},
-            {
-                user: TEST_USER_READER,
-            }
-        );
-        await waitForLifecycle(wrapper);
-        expect(wrapper.find('a')).toHaveLength(0);
-        expect(wrapper.find('.clickable')).toHaveLength(0);
-        expect(wrapper.find('span')).toHaveLength(1);
-        expect(wrapper.find('.gray-text')).toHaveLength(0);
-        expect(wrapper.find('span').text()).toBe('Test display');
-        wrapper.unmount();
-    });
-
-    test('user cannot ReadUserDetails, self', async () => {
-        const wrapper = mountWithAppServerContext(
-            <UserLink userId={TEST_USER_READER.id} userDisplayValue="Test display" />,
-            {},
-            { user: TEST_USER_READER }
-        );
-        await waitForLifecycle(wrapper);
-        expect(wrapper.find('a')).toHaveLength(1);
-        expect(wrapper.find('.clickable')).toHaveLength(1);
-        expect(wrapper.find('span')).toHaveLength(0);
-        expect(wrapper.find('.gray-text')).toHaveLength(0);
-        expect(wrapper.find('a').text()).toBe('Test display');
-        wrapper.unmount();
-    });
-});
-
-describe('UserLinkList', () => {
-    test('all users', () => {
-        const wrapper = mountWithAppServerContext(
-            <UserLinkList
-                users={[
-                    { id: 1, displayName: 'a', type: 'u' },
-                    { id: 2, displayName: 'b', type: 'u' },
-                ]}
-            />,
-            {},
-            { user: TEST_USER_APP_ADMIN }
-        );
-        expect(wrapper.find(UserLink)).toHaveLength(2);
-        expect(wrapper.text()).toBe('a, b');
-        wrapper.unmount();
-    });
-
-    test('users and groups', () => {
-        const wrapper = mountWithAppServerContext(
-            <UserLinkList
-                users={[
-                    { id: 1, displayName: 'a', type: 'u' },
-                    { id: 2, displayName: 'b', type: 'u' },
-                    { id: 3, displayName: 'c', type: 'g' },
-                ]}
-            />,
-            {},
-            { user: TEST_USER_APP_ADMIN }
-        );
-        expect(wrapper.find(UserLink)).toHaveLength(2);
-        expect(wrapper.text()).toBe('a, b, c');
-        wrapper.unmount();
-    });
-});
diff --git a/packages/components/src/internal/components/user/UserLink.test.tsx b/packages/components/src/internal/components/user/UserLink.test.tsx
new file mode 100644
index 0000000000..3565a3d3a8
--- /dev/null
+++ b/packages/components/src/internal/components/user/UserLink.test.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import { act } from '@testing-library/react';
+
+import { TEST_USER_APP_ADMIN, TEST_USER_READER } from '../../userFixtures';
+import { renderWithAppContext } from '../../test/reactTestLibraryHelpers';
+
+import { UserLink, UserLinkList } from './UserLink';
+
+describe('UserLink', () => {
+    test('unknown', () => {
+        const { container } = renderWithAppContext(<UserLink unknown />, { serverContext: { user: TEST_USER_APP_ADMIN } });
+        expect(container.querySelectorAll('a')).toHaveLength(0);
+        expect(container.querySelectorAll('span')).toHaveLength(1);
+        expect(container.querySelectorAll('.gray-text')).toHaveLength(1);
+        expect(container.querySelector('span').textContent).toBe('<unknown user>');
+    });
+
+    test('displayValue without userId', async () => {
+        const { container } = renderWithAppContext(
+            <UserLink userDisplayValue="Test display" />,
+            { serverContext: { user: TEST_USER_APP_ADMIN } }
+        );
+        await act(async () => {});
+        expect(container.querySelectorAll('a')).toHaveLength(0);
+        expect(container.querySelectorAll('span')).toHaveLength(1);
+        expect(container.querySelectorAll('.gray-text')).toHaveLength(0);
+        expect(container.querySelector('span').textContent).toBe('Test display');
+    });
+
+    test('userId without displayValue', () => {
+        const { container } = renderWithAppContext(<UserLink userId={1} />, { serverContext: { user: TEST_USER_APP_ADMIN } });
+        expect(container.querySelectorAll('a')).toHaveLength(0);
+        expect(container.querySelectorAll('span')).toHaveLength(1);
+        expect(container.querySelectorAll('.gray-text')).toHaveLength(1);
+        expect(container.querySelector('span').textContent).toBe('<1>');
+    });
+
+    test('userId with displayValue', async () => {
+        const { container } = renderWithAppContext(
+            <UserLink userId={1} userDisplayValue="Test display" />,
+            { serverContext: { user: TEST_USER_APP_ADMIN } }
+        );
+        await act(async () => {});
+        expect(container.querySelectorAll('a')).toHaveLength(1);
+        expect(container.querySelectorAll('.clickable')).toHaveLength(1);
+        expect(container.querySelectorAll('span')).toHaveLength(0);
+        expect(container.querySelectorAll('.gray-text')).toHaveLength(0);
+        expect(container.querySelector('a').textContent).toBe('Test display');
+    });
+
+    test('user cannot ReadUserDetails, not self', async () => {
+        const { container } = renderWithAppContext(
+            <UserLink userId={1} userDisplayValue="Test display" />,
+            { serverContext: { user: TEST_USER_READER } }
+        );
+        await act(async () => {});
+        expect(container.querySelectorAll('a')).toHaveLength(0);
+        expect(container.querySelectorAll('.clickable')).toHaveLength(0);
+        expect(container.querySelectorAll('span')).toHaveLength(1);
+        expect(container.querySelectorAll('.gray-text')).toHaveLength(0);
+        expect(container.querySelector('span').textContent).toBe('Test display');
+    });
+
+    test('user cannot ReadUserDetails, self', async () => {
+        const { container } = renderWithAppContext(
+            <UserLink userId={TEST_USER_READER.id} userDisplayValue="Test display" />,
+            { serverContext: { user: TEST_USER_READER } }
+        );
+        await act(async () => {});
+        expect(container.querySelectorAll('a')).toHaveLength(1);
+        expect(container.querySelectorAll('.clickable')).toHaveLength(1);
+        expect(container.querySelectorAll('span')).toHaveLength(0);
+        expect(container.querySelectorAll('.gray-text')).toHaveLength(0);
+        expect(container.querySelector('a').textContent).toBe('Test display');
+    });
+});
+
+describe('UserLinkList', () => {
+    test('all users', async () => {
+        const { container } = renderWithAppContext(
+            <UserLinkList
+                users={[
+                    { id: 1, displayName: 'a', type: 'u' },
+                    { id: 2, displayName: 'b', type: 'u' },
+                ]}
+            />,
+            { serverContext: { user: TEST_USER_APP_ADMIN } }
+        );
+        await act(async () => {});
+        expect(container.querySelectorAll('.user-link')).toHaveLength(2);
+        expect(container.textContent).toBe('a, b');
+    });
+
+    test('users and groups', async () => {
+        const { container } = renderWithAppContext(
+            <UserLinkList
+                users={[
+                    { id: 1, displayName: 'a', type: 'u' },
+                    { id: 2, displayName: 'b', type: 'u' },
+                    { id: 3, displayName: 'c', type: 'g' },
+                ]}
+            />,
+            { serverContext: { user: TEST_USER_APP_ADMIN } }
+        );
+        await act(async () => {});
+        expect(container.querySelectorAll('.user-link')).toHaveLength(2);
+        expect(container.textContent).toBe('a, b, c');
+    });
+});
diff --git a/packages/components/src/internal/renderers/ExpirationDateColumnRenderer.spec.tsx b/packages/components/src/internal/renderers/ExpirationDateColumnRenderer.spec.tsx
deleted file mode 100644
index 611c2211c4..0000000000
--- a/packages/components/src/internal/renderers/ExpirationDateColumnRenderer.spec.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import React from 'react';
-import { mount, ReactWrapper } from 'enzyme';
-import { fromJS } from 'immutable';
-
-import { ExpirationDateColumnRenderer } from './ExpirationDateColumnRenderer';
-
-const DEFAULT_PROPS = {
-    data: fromJS({ value: '2022-02-12 11:58:54.385', formattedValue: '2022-02-12' }),
-};
-
-describe('ExpirationDateColumnRenderer', () => {
-    function validate(wrapper: ReactWrapper, hasExpired = true, displayValue?: string, hasTd = true): void {
-        expect(wrapper.find('td')).toHaveLength(hasTd ? 1 : 0);
-        if (hasTd) {
-            expect(wrapper.find('.expired-grid-cell')).toHaveLength(hasExpired ? 1 : 0);
-        } else expect(wrapper.find('.expired-form-field')).toHaveLength(hasExpired ? 1 : 0);
-
-        if (!displayValue) expect(wrapper.text()).toEqual('');
-        else expect(wrapper.text()).toBe(displayValue);
-    }
-
-    test('no data', () => {
-        const wrapper = mount(<ExpirationDateColumnRenderer data={null} />);
-        validate(wrapper, false);
-        wrapper.unmount();
-    });
-
-    test('default', () => {
-        const wrapper = mount(<ExpirationDateColumnRenderer {...DEFAULT_PROPS} />);
-        validate(wrapper, true, '2022-02-12');
-        wrapper.unmount();
-    });
-
-    test('not tablecell', () => {
-        const wrapper = mount(<ExpirationDateColumnRenderer {...DEFAULT_PROPS} tableCell={false} />);
-        validate(wrapper, true, '2022-02-12', false);
-        wrapper.unmount();
-    });
-
-    test('has formattedValue and has displayValue', () => {
-        const data = fromJS({
-            value: '2022-02-12 11:58:54.385',
-            formattedValue: '2022-02-12',
-            displayValue: '2022-02-12 11:58',
-        });
-        const wrapper = mount(<ExpirationDateColumnRenderer data={data} />);
-        validate(wrapper, true, '2022-02-12');
-        wrapper.unmount();
-    });
-
-    test('has formattedValue and has displayValue - not immutable map', () => {
-        const data = {
-            value: '2022-02-12 11:58:54.385',
-            formattedValue: '2022-02-12',
-            displayValue: '2022-02-12 11:58',
-        };
-        const wrapper = mount(<ExpirationDateColumnRenderer data={data} />);
-        validate(wrapper, true, '2022-02-12');
-        wrapper.unmount();
-    });
-
-    test('no formattedValue and no displayValue', () => {
-        const data = fromJS({ value: '2022-02-12 11:58:54.385' });
-        const wrapper = mount(<ExpirationDateColumnRenderer data={data} />);
-        validate(wrapper, true, '2022-02-12 11:58:54.385');
-        wrapper.unmount();
-    });
-
-    test('no formattedValue and no displayValue - not immutable map', () => {
-        const data = { value: '2022-02-12 11:58:54.385' };
-        const wrapper = mount(<ExpirationDateColumnRenderer data={data} />);
-        validate(wrapper, true, '2022-02-12 11:58:54.385');
-        wrapper.unmount();
-    });
-
-    test('no formattedValue but with displayValue', () => {
-        const data = fromJS({ value: '2022-02-12 11:58:54.385', displayValue: '2022-02-12 11:58' });
-        const wrapper = mount(<ExpirationDateColumnRenderer data={data} />);
-        validate(wrapper, true, '2022-02-12 11:58');
-        wrapper.unmount();
-    });
-
-    test('future date', () => {
-        const data = fromJS({ value: '2222-02-12 11:58:54.385', formattedValue: '2222-02-12' });
-        const wrapper = mount(<ExpirationDateColumnRenderer data={data} />);
-        validate(wrapper, false, '2222-02-12', true);
-        wrapper.unmount();
-    });
-
-    test('future date - not immutable map', () => {
-        const data = { value: '2222-02-12 11:58:54.385', formattedValue: '2222-02-12' };
-        const wrapper = mount(<ExpirationDateColumnRenderer data={data} />);
-        validate(wrapper, false, '2222-02-12', true);
-        wrapper.unmount();
-    });
-
-    test('future display date, but no value', () => {
-        const data = fromJS({ displayValue: '2222-02-12 11:58:54.385', formattedValue: '2222-02-12' });
-        const wrapper = mount(<ExpirationDateColumnRenderer data={data} />);
-        validate(wrapper, false, '2222-02-12', true);
-        wrapper.unmount();
-    });
-});
diff --git a/packages/components/src/internal/renderers/ExpirationDateColumnRenderer.test.tsx b/packages/components/src/internal/renderers/ExpirationDateColumnRenderer.test.tsx
new file mode 100644
index 0000000000..07e1563e30
--- /dev/null
+++ b/packages/components/src/internal/renderers/ExpirationDateColumnRenderer.test.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { fromJS } from 'immutable';
+
+import { ExpirationDateColumnRenderer } from './ExpirationDateColumnRenderer';
+
+const DEFAULT_PROPS = {
+    data: fromJS({ value: '2022-02-12 11:58:54.385', formattedValue: '2022-02-12' }),
+};
+
+describe('ExpirationDateColumnRenderer', () => {
+    function validate(container: HTMLElement, hasExpired = true, displayValue?: string, hasTd = true): void {
+        expect(container.querySelectorAll('td')).toHaveLength(hasTd ? 1 : 0);
+        if (hasTd) {
+            expect(container.querySelectorAll('.expired-grid-cell')).toHaveLength(hasExpired ? 1 : 0);
+        } else {
+            expect(container.querySelectorAll('.expired-form-field')).toHaveLength(hasExpired ? 1 : 0);
+        }
+
+        if (!displayValue) expect(container.textContent).toEqual('');
+        else expect(container.textContent).toBe(displayValue);
+    }
+
+    test('no data', () => {
+        const { container } = render(<ExpirationDateColumnRenderer data={null} />);
+        validate(container, false);
+    });
+
+    test('default', () => {
+        const { container } = render(<ExpirationDateColumnRenderer {...DEFAULT_PROPS} />);
+        validate(container, true, '2022-02-12');
+    });
+
+    test('not tablecell', () => {
+        const { container } = render(<ExpirationDateColumnRenderer {...DEFAULT_PROPS} tableCell={false} />);
+        validate(container, true, '2022-02-12', false);
+    });
+
+    test('has formattedValue and has displayValue', () => {
+        const data = fromJS({
+            value: '2022-02-12 11:58:54.385',
+            formattedValue: '2022-02-12',
+            displayValue: '2022-02-12 11:58',
+        });
+        const { container } = render(<ExpirationDateColumnRenderer data={data} />);
+        validate(container, true, '2022-02-12');
+    });
+
+    test('has formattedValue and has displayValue - not immutable map', () => {
+        const data = {
+            value: '2022-02-12 11:58:54.385',
+            formattedValue: '2022-02-12',
+            displayValue: '2022-02-12 11:58',
+        };
+        const { container } = render(<ExpirationDateColumnRenderer data={data} />);
+        validate(container, true, '2022-02-12');
+    });
+
+    test('no formattedValue and no displayValue', () => {
+        const data = fromJS({ value: '2022-02-12 11:58:54.385' });
+        const { container } = render(<ExpirationDateColumnRenderer data={data} />);
+        validate(container, true, '2022-02-12 11:58:54.385');
+    });
+
+    test('no formattedValue and no displayValue - not immutable map', () => {
+        const data = { value: '2022-02-12 11:58:54.385' };
+        const { container } = render(<ExpirationDateColumnRenderer data={data} />);
+        validate(container, true, '2022-02-12 11:58:54.385');
+    });
+
+    test('no formattedValue but with displayValue', () => {
+        const data = fromJS({ value: '2022-02-12 11:58:54.385', displayValue: '2022-02-12 11:58' });
+        const { container } = render(<ExpirationDateColumnRenderer data={data} />);
+        validate(container, true, '2022-02-12 11:58');
+    });
+
+    test('future date', () => {
+        const data = fromJS({ value: '2222-02-12 11:58:54.385', formattedValue: '2222-02-12' });
+        const { container } = render(<ExpirationDateColumnRenderer data={data} />);
+        validate(container, false, '2222-02-12', true);
+    });
+
+    test('future date - not immutable map', () => {
+        const data = { value: '2222-02-12 11:58:54.385', formattedValue: '2222-02-12' };
+        const { container } = render(<ExpirationDateColumnRenderer data={data} />);
+        validate(container, false, '2222-02-12', true);
+    });
+
+    test('future display date, but no value', () => {
+        const data = fromJS({ displayValue: '2222-02-12 11:58:54.385', formattedValue: '2222-02-12' });
+        const { container } = render(<ExpirationDateColumnRenderer data={data} />);
+        validate(container, false, '2222-02-12', true);
+    });
+});
diff --git a/packages/components/src/public/QueryModel/ManageViewsModal.spec.tsx b/packages/components/src/public/QueryModel/ManageViewsModal.spec.tsx
deleted file mode 100644
index 5549fd9a09..0000000000
--- a/packages/components/src/public/QueryModel/ManageViewsModal.spec.tsx
+++ /dev/null
@@ -1,320 +0,0 @@
-import React from 'react';
-
-import { mount } from 'enzyme';
-
-import { ViewInfo } from '../../internal/ViewInfo';
-
-import { mountWithAppServerContext, waitForLifecycle } from '../../internal/test/enzymeTestHelpers';
-import { LoadingSpinner } from '../../internal/components/base/LoadingSpinner';
-import { TEST_USER_PROJECT_ADMIN, TEST_USER_READER } from '../../internal/userFixtures';
-
-import { getTestAPIWrapper } from '../../internal/APIWrapper';
-import { getQueryTestAPIWrapper } from '../../internal/query/APIWrapper';
-
-import { ManageViewsModal, ViewLabel } from './ManageViewsModal';
-
-const getQueryAPI = (views: ViewInfo[]) => {
-    return getTestAPIWrapper(jest.fn, {
-        query: getQueryTestAPIWrapper(jest.fn, {
-            getGridViews: jest.fn().mockResolvedValue(views),
-        }),
-    });
-};
-
-const SYSTEM_DEFAULT_VIEW = ViewInfo.fromJson({
-    default: true,
-    saved: false, // cannot be reverted
-});
-
-const SYSTEM_DETAIL_VIEW = ViewInfo.fromJson({
-    saved: false, // cannot be reverted
-    name: ViewInfo.DETAIL_NAME,
-});
-
-const SHARED_DEFAULT_VIEW = ViewInfo.fromJson({
-    default: true,
-    saved: true, // can be reverted
-    shared: true,
-});
-
-const MY_DEFAULT_VIEW = ViewInfo.fromJson({
-    default: true,
-    saved: true, // can be reverted
-});
-
-const VIEW_1 = ViewInfo.fromJson({
-    default: false,
-    label: 'View 1',
-    name: 'View1',
-});
-
-const SESSION_VIEW = ViewInfo.fromJson({
-    default: false,
-    label: 'View 2',
-    name: 'View2',
-    session: true,
-});
-
-const SHARED_VIEW = ViewInfo.fromJson({
-    default: false,
-    label: 'View 3',
-    name: 'View3',
-    shared: true,
-});
-
-describe('ViewLabel', () => {
-    test('default view', () => {
-        const wrapper = mount(<ViewLabel view={SYSTEM_DEFAULT_VIEW} />);
-        expect(wrapper.text()).toBe('Default View');
-        wrapper.unmount();
-    });
-
-    test('own default view', () => {
-        const wrapper = mount(<ViewLabel view={MY_DEFAULT_VIEW} />);
-        expect(wrapper.text()).toBe('My Default View');
-        wrapper.unmount();
-    });
-
-    test('shared default view', () => {
-        const wrapper = mount(<ViewLabel view={SHARED_DEFAULT_VIEW} />);
-        expect(wrapper.text()).toBe('Default View (shared)');
-        wrapper.unmount();
-    });
-
-    test('default view, edited', () => {
-        const wrapper = mount(<ViewLabel view={ViewInfo.fromJson({ default: true, session: true })} />);
-        expect(wrapper.text()).toBe('Default View (edited)');
-        wrapper.unmount();
-    });
-
-    test('shared view', () => {
-        const wrapper = mount(<ViewLabel view={SHARED_VIEW} />);
-        expect(wrapper.text()).toBe('View 3 (shared)');
-        wrapper.unmount();
-    });
-
-    test('shared view, edited', () => {
-        const wrapper = mount(
-            <ViewLabel
-                view={ViewInfo.fromJson({
-                    label: 'View 3',
-                    name: 'View3',
-                    session: true,
-                })}
-            />
-        );
-        expect(wrapper.text()).toBe('View 3 (edited)');
-        wrapper.unmount();
-    });
-
-    test('inherited view', () => {
-        const wrapper = mount(
-            <ViewLabel
-                view={ViewInfo.fromJson({
-                    label: 'View 4',
-                    name: 'View4',
-                    shared: false,
-                    inherit: true,
-                })}
-            />
-        );
-        expect(wrapper.text()).toBe('View 4 (inherited)');
-        wrapper.unmount();
-    });
-
-    test('inherited view, edited', () => {
-        const wrapper = mount(
-            <ViewLabel
-                view={ViewInfo.fromJson({
-                    label: 'View 4',
-                    name: 'View4',
-                    shared: false,
-                    inherit: true,
-                    session: true,
-                })}
-            />
-        );
-        expect(wrapper.text()).toBe('View 4 (edited)');
-        wrapper.unmount();
-    });
-
-    test('shared, inherited view', () => {
-        const wrapper = mount(
-            <ViewLabel
-                view={ViewInfo.fromJson({
-                    label: 'View 5',
-                    name: 'View5',
-                    shared: true,
-                    inherit: true,
-                })}
-            />
-        );
-        expect(wrapper.text()).toBe('View 5 (inherited, shared)');
-        wrapper.unmount();
-    });
-
-    test('edited, shared, inherited view', () => {
-        const wrapper = mount(
-            <ViewLabel
-                view={ViewInfo.fromJson({
-                    label: 'View 5',
-                    name: 'View5',
-                    shared: true,
-                    inherit: true,
-                    session: true,
-                })}
-            />
-        );
-        expect(wrapper.text()).toBe('View 5 (edited)');
-        wrapper.unmount();
-    });
-});
-
-describe('ManageViewsModal', () => {
-    test('no views', async () => {
-        const wrapper = mountWithAppServerContext(
-            <ManageViewsModal onDone={jest.fn()} currentView={null} schemaQuery={null} />,
-            {
-                api: getQueryAPI([]),
-            },
-            {
-                user: TEST_USER_READER,
-            }
-        );
-
-        expect(wrapper.find(LoadingSpinner).exists()).toEqual(true);
-        await waitForLifecycle(wrapper);
-        expect(wrapper.find(LoadingSpinner).exists()).toEqual(false);
-
-        const rows = wrapper.find('.row');
-        expect(rows.length).toBe(0);
-
-        wrapper.unmount();
-    });
-
-    test('multiple saved views: default, named, shared and session view', async () => {
-        const wrapper = mountWithAppServerContext(
-            <ManageViewsModal onDone={jest.fn()} currentView={null} schemaQuery={null} />,
-            {
-                api: getQueryAPI([SHARED_DEFAULT_VIEW, VIEW_1, SESSION_VIEW, SHARED_VIEW]),
-            },
-            {
-                user: TEST_USER_PROJECT_ADMIN,
-            }
-        );
-
-        expect(wrapper.find(LoadingSpinner).exists()).toEqual(true);
-        await waitForLifecycle(wrapper);
-        expect(wrapper.find(LoadingSpinner).exists()).toEqual(false);
-
-        expect(wrapper.find('.modal-title').text()).toBe('Manage Saved Views');
-
-        const rows = wrapper.find('.row');
-        expect(rows.length).toBe(4);
-
-        const labels = wrapper.find(ViewLabel);
-        expect(labels.length).toBe(4);
-        expect(labels.at(0).text()).toBe('Default View (shared)');
-        expect(rows.at(0).find('.fa-pencil').length).toBe(0);
-        expect(rows.at(0).find('.fa-trash-o').length).toBe(0);
-        expect(rows.at(0).find('.clickable-text').length).toBe(1);
-        expect(rows.at(0).find('.clickable-text').text()).toBe('Revert');
-
-        expect(labels.at(1).text()).toBe('View 1');
-        expect(rows.at(1).find('.fa-pencil').length).toBe(1);
-        expect(rows.at(1).find('.fa-trash-o').length).toBe(1);
-        expect(rows.at(1).find('.clickable-text').length).toBe(1);
-        expect(rows.at(1).find('.clickable-text').text()).toBe('Make default');
-
-        expect(labels.at(2).text()).toBe('View 2 (edited)');
-        expect(rows.at(2).find('.fa-pencil').length).toBe(0);
-        expect(rows.at(2).find('.fa-trash-o').length).toBe(0);
-        expect(rows.at(2).find('.clickable-text').length).toBe(1);
-        expect(rows.at(2).find('.clickable-text').text()).toBe('Make default');
-
-        expect(labels.at(3).text()).toBe('View 3 (shared)');
-        expect(rows.at(3).find('.fa-pencil').length).toBe(1);
-        expect(rows.at(3).find('.fa-trash-o').length).toBe(1);
-        expect(rows.at(0).find('.gray-text').length).toBe(0);
-        expect(rows.at(3).find('.clickable-text').length).toBe(1);
-        expect(rows.at(3).find('.clickable-text').text()).toBe('Make default');
-
-        const findButton = wrapper.find('button.btn-default');
-        expect(findButton.text()).toEqual('Done');
-
-        wrapper.unmount();
-    });
-
-    test('system default view', async () => {
-        const wrapper = mountWithAppServerContext(
-            <ManageViewsModal onDone={jest.fn()} currentView={null} schemaQuery={null} />,
-            {
-                api: getQueryAPI([SYSTEM_DEFAULT_VIEW, SYSTEM_DETAIL_VIEW, VIEW_1, SESSION_VIEW, SHARED_VIEW]),
-            },
-            {
-                user: TEST_USER_PROJECT_ADMIN,
-            }
-        );
-        await waitForLifecycle(wrapper);
-
-        const rows = wrapper.find('.row');
-        expect(rows.length).toBe(4);
-        const labels = wrapper.find(ViewLabel);
-        expect(labels).toHaveLength(4);
-        expect(labels.at(0).text()).toBe('Default View');
-        expect(rows.at(0).find('.fa-pencil').length).toBe(0);
-        expect(rows.at(0).find('.fa-trash-o').length).toBe(0);
-        expect(rows.at(0).find('.clickable-text').length).toBe(0);
-        expect(rows.at(0).find('.gray-text').length).toBe(1);
-        expect(rows.at(0).find('.gray-text').text()).toBe('Revert');
-
-        wrapper.unmount();
-    });
-
-    test('multiple saved views: no admin permission', async () => {
-        const wrapper = mountWithAppServerContext(
-            <ManageViewsModal onDone={jest.fn()} currentView={null} schemaQuery={null} />,
-            {
-                api: getQueryAPI([MY_DEFAULT_VIEW, VIEW_1, SESSION_VIEW, SHARED_VIEW]),
-            },
-            {
-                user: TEST_USER_READER,
-            }
-        );
-
-        expect(wrapper.find(LoadingSpinner).exists()).toEqual(true);
-        await waitForLifecycle(wrapper);
-        expect(wrapper.find(LoadingSpinner).exists()).toEqual(false);
-
-        expect(wrapper.find('.modal-title').text()).toBe('Manage Saved Views');
-
-        const rows = wrapper.find('.row');
-        expect(rows.length).toBe(4);
-        const labels = wrapper.find(ViewLabel);
-        expect(labels).toHaveLength(4);
-        expect(labels.at(0).text()).toBe('My Default View');
-        expect(rows.at(0).find('.fa-pencil').length).toBe(0);
-        expect(rows.at(0).find('.fa-trash-o').length).toBe(0);
-        expect(rows.at(0).find('.clickable-text').length).toBe(0);
-
-        expect(labels.at(1).text()).toBe('View 1');
-        expect(rows.at(1).find('.fa-pencil').length).toBe(1);
-        expect(rows.at(1).find('.fa-trash-o').length).toBe(1);
-        expect(rows.at(1).find('.clickable-text').length).toBe(0);
-
-        expect(labels.at(2).text()).toBe('View 2 (edited)');
-        expect(rows.at(2).find('.fa-pencil').length).toBe(0);
-        expect(rows.at(2).find('.fa-trash-o').length).toBe(0);
-        expect(rows.at(2).find('.clickable-text').length).toBe(0);
-
-        expect(labels.at(3).text()).toBe('View 3 (shared)');
-        expect(rows.at(3).find('.fa-pencil').length).toBe(0);
-        expect(rows.at(3).find('.fa-trash-o').length).toBe(0);
-        expect(rows.at(3).find('.clickable-text').length).toBe(0);
-
-        const findButton = wrapper.find('button.btn-default');
-        expect(findButton.text()).toEqual('Done');
-
-        wrapper.unmount();
-    });
-});
diff --git a/packages/components/src/public/QueryModel/ManageViewsModal.test.tsx b/packages/components/src/public/QueryModel/ManageViewsModal.test.tsx
new file mode 100644
index 0000000000..e3e81f3b92
--- /dev/null
+++ b/packages/components/src/public/QueryModel/ManageViewsModal.test.tsx
@@ -0,0 +1,289 @@
+import React from 'react';
+import { act } from '@testing-library/react';
+
+import { ViewInfo } from '../../internal/ViewInfo';
+
+import { renderWithAppContext } from '../../internal/test/reactTestLibraryHelpers';
+import { TEST_USER_PROJECT_ADMIN, TEST_USER_READER } from '../../internal/userFixtures';
+
+import { getTestAPIWrapper } from '../../internal/APIWrapper';
+import { getQueryTestAPIWrapper } from '../../internal/query/APIWrapper';
+import { render } from '@testing-library/react';
+
+import { ManageViewsModal, ViewLabel } from './ManageViewsModal';
+
+const getQueryAPI = (views: ViewInfo[]) => {
+    return getTestAPIWrapper(jest.fn, {
+        query: getQueryTestAPIWrapper(jest.fn, {
+            getGridViews: jest.fn().mockResolvedValue(views),
+        }),
+    });
+};
+
+const SYSTEM_DEFAULT_VIEW = ViewInfo.fromJson({
+    default: true,
+    saved: false, // cannot be reverted
+});
+
+const SYSTEM_DETAIL_VIEW = ViewInfo.fromJson({
+    saved: false, // cannot be reverted
+    name: ViewInfo.DETAIL_NAME,
+});
+
+const SHARED_DEFAULT_VIEW = ViewInfo.fromJson({
+    default: true,
+    saved: true, // can be reverted
+    shared: true,
+});
+
+const MY_DEFAULT_VIEW = ViewInfo.fromJson({
+    default: true,
+    saved: true, // can be reverted
+});
+
+const VIEW_1 = ViewInfo.fromJson({
+    default: false,
+    label: 'View 1',
+    name: 'View1',
+});
+
+const SESSION_VIEW = ViewInfo.fromJson({
+    default: false,
+    label: 'View 2',
+    name: 'View2',
+    session: true,
+});
+
+const SHARED_VIEW = ViewInfo.fromJson({
+    default: false,
+    label: 'View 3',
+    name: 'View3',
+    shared: true,
+});
+
+describe('ViewLabel', () => {
+    test('default view', () => {
+        const { container } = render(<ViewLabel view={SYSTEM_DEFAULT_VIEW} />);
+        expect(container.textContent).toBe('Default View');
+    });
+
+    test('own default view', () => {
+        const { container } = render(<ViewLabel view={MY_DEFAULT_VIEW} />);
+        expect(container.textContent).toBe('My Default View');
+    });
+
+    test('shared default view', () => {
+        const { container } = render(<ViewLabel view={SHARED_DEFAULT_VIEW} />);
+        expect(container.textContent).toBe('Default View (shared)');
+    });
+
+    test('default view, edited', () => {
+        const { container } = render(<ViewLabel view={ViewInfo.fromJson({ default: true, session: true })} />);
+        expect(container.textContent).toBe('Default View (edited)');
+    });
+
+    test('shared view', () => {
+        const { container } = render(<ViewLabel view={SHARED_VIEW} />);
+        expect(container.textContent).toBe('View 3 (shared)');
+    });
+
+    test('shared view, edited', () => {
+        const { container } = render(
+            <ViewLabel
+                view={ViewInfo.fromJson({
+                    label: 'View 3',
+                    name: 'View3',
+                    session: true,
+                })}
+            />
+        );
+        expect(container.textContent).toBe('View 3 (edited)');
+    });
+
+    test('inherited view', () => {
+        const { container } = render(
+            <ViewLabel
+                view={ViewInfo.fromJson({
+                    label: 'View 4',
+                    name: 'View4',
+                    shared: false,
+                    inherit: true,
+                })}
+            />
+        );
+        expect(container.textContent).toBe('View 4 (inherited)');
+    });
+
+    test('inherited view, edited', () => {
+        const { container } = render(
+            <ViewLabel
+                view={ViewInfo.fromJson({
+                    label: 'View 4',
+                    name: 'View4',
+                    shared: false,
+                    inherit: true,
+                    session: true,
+                })}
+            />
+        );
+        expect(container.textContent).toBe('View 4 (edited)');
+    });
+
+    test('shared, inherited view', () => {
+        const { container } = render(
+            <ViewLabel
+                view={ViewInfo.fromJson({
+                    label: 'View 5',
+                    name: 'View5',
+                    shared: true,
+                    inherit: true,
+                })}
+            />
+        );
+        expect(container.textContent).toBe('View 5 (inherited, shared)');
+    });
+
+    test('edited, shared, inherited view', () => {
+        const { container } = render(
+            <ViewLabel
+                view={ViewInfo.fromJson({
+                    label: 'View 5',
+                    name: 'View5',
+                    shared: true,
+                    inherit: true,
+                    session: true,
+                })}
+            />
+        );
+        expect(container.textContent).toBe('View 5 (edited)');
+    });
+});
+
+describe('ManageViewsModal', () => {
+    test('no views', async () => {
+        renderWithAppContext(
+            <ManageViewsModal onDone={jest.fn()} currentView={null} schemaQuery={null} />,
+            {
+                appContext: { api: getQueryAPI([]) },
+                serverContext: { user: TEST_USER_READER },
+            }
+        );
+
+        expect(document.querySelector('.fa-spinner')).not.toBeNull();
+        await act(async () => {});
+        expect(document.querySelector('.fa-spinner')).toBeNull();
+
+        const rows = document.querySelectorAll('.row.small-margin-bottom');
+        expect(rows).toHaveLength(0);
+    });
+
+    test('multiple saved views: default, named, shared and session view', async () => {
+        renderWithAppContext(
+            <ManageViewsModal onDone={jest.fn()} currentView={null} schemaQuery={null} />,
+            {
+                appContext: { api: getQueryAPI([SHARED_DEFAULT_VIEW, VIEW_1, SESSION_VIEW, SHARED_VIEW]) },
+                serverContext: { user: TEST_USER_PROJECT_ADMIN },
+            }
+        );
+
+        expect(document.querySelector('.fa-spinner')).not.toBeNull();
+        await act(async () => {});
+        expect(document.querySelector('.fa-spinner')).toBeNull();
+
+        expect(document.querySelector('.modal-title').textContent).toBe('Manage Saved Views');
+
+        const rows = document.querySelectorAll('.row.small-margin-bottom');
+        expect(rows).toHaveLength(4);
+
+        expect(rows[0].querySelector('.col-xs-8').textContent.trim()).toBe('Default View (shared)');
+        expect(rows[0].querySelectorAll('.fa-pencil')).toHaveLength(0);
+        expect(rows[0].querySelectorAll('.fa-trash-o')).toHaveLength(0);
+        expect(rows[0].querySelectorAll('.clickable-text')).toHaveLength(1);
+        expect(rows[0].querySelector('.clickable-text').textContent).toBe('Revert');
+
+        expect(rows[1].querySelector('.col-xs-8').textContent.trim()).toBe('View 1');
+        expect(rows[1].querySelectorAll('.fa-pencil')).toHaveLength(1);
+        expect(rows[1].querySelectorAll('.fa-trash-o')).toHaveLength(1);
+        expect(rows[1].querySelectorAll('.clickable-text')).toHaveLength(1);
+        expect(rows[1].querySelector('.clickable-text').textContent).toBe('Make default');
+
+        expect(rows[2].querySelector('.col-xs-8').textContent.trim()).toBe('View 2 (edited)');
+        expect(rows[2].querySelectorAll('.fa-pencil')).toHaveLength(0);
+        expect(rows[2].querySelectorAll('.fa-trash-o')).toHaveLength(0);
+        expect(rows[2].querySelectorAll('.clickable-text')).toHaveLength(1);
+        expect(rows[2].querySelector('.clickable-text').textContent).toBe('Make default');
+
+        expect(rows[3].querySelector('.col-xs-8').textContent.trim()).toBe('View 3 (shared)');
+        expect(rows[3].querySelectorAll('.fa-pencil')).toHaveLength(1);
+        expect(rows[3].querySelectorAll('.fa-trash-o')).toHaveLength(1);
+        expect(rows[0].querySelectorAll('.gray-text')).toHaveLength(0);
+        expect(rows[3].querySelectorAll('.clickable-text')).toHaveLength(1);
+        expect(rows[3].querySelector('.clickable-text').textContent).toBe('Make default');
+
+        expect(document.querySelector('button.btn-default').textContent).toEqual('Done');
+    });
+
+    test('system default view', async () => {
+        renderWithAppContext(
+            <ManageViewsModal onDone={jest.fn()} currentView={null} schemaQuery={null} />,
+            {
+                appContext: {
+                    api: getQueryAPI([SYSTEM_DEFAULT_VIEW, SYSTEM_DETAIL_VIEW, VIEW_1, SESSION_VIEW, SHARED_VIEW]),
+                },
+                serverContext: { user: TEST_USER_PROJECT_ADMIN },
+            }
+        );
+        await act(async () => {});
+
+        const rows = document.querySelectorAll('.row.small-margin-bottom');
+        expect(rows).toHaveLength(4);
+
+        expect(rows[0].querySelector('.col-xs-8').textContent.trim()).toBe('Default View');
+        expect(rows[0].querySelectorAll('.fa-pencil')).toHaveLength(0);
+        expect(rows[0].querySelectorAll('.fa-trash-o')).toHaveLength(0);
+        expect(rows[0].querySelectorAll('.clickable-text')).toHaveLength(0);
+        expect(rows[0].querySelectorAll('.gray-text')).toHaveLength(1);
+        expect(rows[0].querySelector('.gray-text').textContent).toBe('Revert');
+    });
+
+    test('multiple saved views: no admin permission', async () => {
+        renderWithAppContext(
+            <ManageViewsModal onDone={jest.fn()} currentView={null} schemaQuery={null} />,
+            {
+                appContext: { api: getQueryAPI([MY_DEFAULT_VIEW, VIEW_1, SESSION_VIEW, SHARED_VIEW]) },
+                serverContext: { user: TEST_USER_READER },
+            }
+        );
+
+        expect(document.querySelector('.fa-spinner')).not.toBeNull();
+        await act(async () => {});
+        expect(document.querySelector('.fa-spinner')).toBeNull();
+
+        expect(document.querySelector('.modal-title').textContent).toBe('Manage Saved Views');
+
+        const rows = document.querySelectorAll('.row.small-margin-bottom');
+        expect(rows).toHaveLength(4);
+
+        expect(rows[0].querySelector('.col-xs-8').textContent.trim()).toBe('My Default View');
+        expect(rows[0].querySelectorAll('.fa-pencil')).toHaveLength(0);
+        expect(rows[0].querySelectorAll('.fa-trash-o')).toHaveLength(0);
+        expect(rows[0].querySelectorAll('.clickable-text')).toHaveLength(0);
+
+        expect(rows[1].querySelector('.col-xs-8').textContent.trim()).toBe('View 1');
+        expect(rows[1].querySelectorAll('.fa-pencil')).toHaveLength(1);
+        expect(rows[1].querySelectorAll('.fa-trash-o')).toHaveLength(1);
+        expect(rows[1].querySelectorAll('.clickable-text')).toHaveLength(0);
+
+        expect(rows[2].querySelector('.col-xs-8').textContent.trim()).toBe('View 2 (edited)');
+        expect(rows[2].querySelectorAll('.fa-pencil')).toHaveLength(0);
+        expect(rows[2].querySelectorAll('.fa-trash-o')).toHaveLength(0);
+        expect(rows[2].querySelectorAll('.clickable-text')).toHaveLength(0);
+
+        expect(rows[3].querySelector('.col-xs-8').textContent.trim()).toBe('View 3 (shared)');
+        expect(rows[3].querySelectorAll('.fa-pencil')).toHaveLength(0);
+        expect(rows[3].querySelectorAll('.fa-trash-o')).toHaveLength(0);
+        expect(rows[3].querySelectorAll('.clickable-text')).toHaveLength(0);
+
+        expect(document.querySelector('button.btn-default').textContent).toEqual('Done');
+    });
+});
diff --git a/packages/components/src/public/QueryModel/TabbedGridPanel.spec.tsx b/packages/components/src/public/QueryModel/TabbedGridPanel.test.tsx
similarity index 60%
rename from packages/components/src/public/QueryModel/TabbedGridPanel.spec.tsx
rename to packages/components/src/public/QueryModel/TabbedGridPanel.test.tsx
index cb2ca0ac5a..519a5d429e 100644
--- a/packages/components/src/public/QueryModel/TabbedGridPanel.spec.tsx
+++ b/packages/components/src/public/QueryModel/TabbedGridPanel.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { ReactWrapper } from 'enzyme';
+import { fireEvent } from '@testing-library/react';
 
 import { makeQueryInfo, makeTestData } from '../../internal/test/testHelpers';
-import { mountWithAppServerContext } from '../../internal/test/enzymeTestHelpers';
+import { renderWithAppContext } from '../../internal/test/reactTestLibraryHelpers';
 import aminoAcidsQuery from '../../test/data/assayAminoAcidsData-getQuery.json';
 import aminoAcidsQueryInfo from '../../test/data/assayAminoAcidsData-getQueryDetails.json';
 import mixturesQueryInfo from '../../test/data/mixtures-getQueryDetails.json';
@@ -15,7 +15,6 @@ import { QueryModel } from './QueryModel';
 import { RowsResponse } from './QueryModelLoader';
 import { TabbedGridPanel } from './TabbedGridPanel';
 import { makeTestActions, makeTestQueryModel } from './testUtils';
-import { GridPanel } from './GridPanel';
 
 let MIXTURES_QUERY_INFO: QueryInfo;
 let MIXTURES_DATA: RowsResponse;
@@ -65,42 +64,42 @@ describe('TabbedGridPanel', () => {
         actions = makeTestActions(jest.fn);
     });
 
-    const expectTabs = (wrapper: ReactWrapper, activeTab: string): void => {
-        const tabs = wrapper.find(TABS_SELECTOR);
+    const expectTabs = (container: HTMLElement, activeTab: string): void => {
+        const tabs = container.querySelectorAll(TABS_SELECTOR);
         expect(tabs.length).toEqual(2);
 
         [MIXTURES_TITLE, AMINO_ACIDS_TITLE].forEach((tab, index) => {
-            expect(tabs.at(index).text()).toEqual(tab);
+            expect(tabs[index].textContent.trim()).toEqual(tab);
 
             if (tab === activeTab) {
-                expect(tabs.at(index).props().className).toContain('active');
+                expect(tabs[index].className).toContain('active');
             } else {
-                expect(tabs.at(index).props().className).not.toContain('active');
+                expect(tabs[index].className).not.toContain('active');
             }
         });
     };
 
-    const clickTab = (wrapper: ReactWrapper, index: number) => {
-        wrapper.find(`${TABS_SELECTOR} a`).at(index).simulate('click');
+    const clickTab = (container: HTMLElement, index: number) => {
+        fireEvent.click(container.querySelectorAll(`${TABS_SELECTOR} a`)[index]);
     };
 
     test('default render', () => {
-        const wrapper = mountWithAppServerContext(
+        const { container } = renderWithAppContext(
             <TabbedGridPanel tabOrder={tabOrder} queryModels={queryModels} actions={actions} />
         );
-        const tabs = wrapper.find(TABS_SELECTOR);
+        const tabs = container.querySelectorAll(TABS_SELECTOR);
 
         // Here we test that tab order is honored, and that by default we set the first tab to active
         expect(tabs.length).toEqual(2);
-        expect(tabs.at(0).text()).toEqual('Mixtures');
-        expect(tabs.at(0).props().className).toContain('active');
+        expect(tabs[0].textContent.trim()).toEqual('Mixtures');
+        expect(tabs[0].className).toContain('active');
         // Model title should get priority for tab title over QueryInfo attributes.
-        expect(tabs.at(1).text()).toEqual(AMINO_ACIDS_TITLE);
-        expect(tabs.at(1).props().className).not.toContain('active');
+        expect(tabs[1].textContent.trim()).toEqual(AMINO_ACIDS_TITLE);
+        expect(tabs[1].className).not.toContain('active');
     });
 
     test('activeTab', () => {
-        const wrapper = mountWithAppServerContext(
+        const { container } = renderWithAppContext(
             <TabbedGridPanel
                 activeModelId="aminoAcids"
                 tabOrder={tabOrder}
@@ -109,25 +108,29 @@ describe('TabbedGridPanel', () => {
             />
         );
 
-        expectTabs(wrapper, AMINO_ACIDS_TITLE);
-        clickTab(wrapper, 0);
-        expectTabs(wrapper, MIXTURES_TITLE);
+        expectTabs(container, AMINO_ACIDS_TITLE);
+        clickTab(container, 0);
+        expectTabs(container, MIXTURES_TITLE);
     });
 
     test('asPanel', () => {
         const title = 'My Tabbed Grid';
-        let wrapper = mountWithAppServerContext(
+        let container: HTMLElement;
+        let unmount: () => void;
+
+        ({ container, unmount } = renderWithAppContext(
             <TabbedGridPanel tabOrder={tabOrder} title={title} queryModels={queryModels} actions={actions} />
-        );
+        ));
 
         // When asPanel is true, we use appropriate styling classes
-        expect(wrapper.find('.tabbed-grid-panel.panel-default').exists()).toEqual(true);
-        expect(wrapper.find('.tabbed-grid-panel.panel').exists()).toEqual(true);
-        expect(wrapper.find('.panel-heading').text()).toBe(title);
-        expect(wrapper.find(GridPanel).prop('title')).toBe(undefined);
-        wrapper.unmount();
-
-        wrapper = mountWithAppServerContext(
+        expect(container.querySelector('.tabbed-grid-panel.panel-default')).not.toBeNull();
+        expect(container.querySelector('.tabbed-grid-panel.panel')).not.toBeNull();
+        expect(container.querySelector('.panel-heading').textContent.trim()).toBe(title);
+        // GridPanel does not receive the title when asPanel is true (rendered by TabbedGridPanel itself)
+        expect(container.querySelector('.panel-heading.view-header')).toBeNull();
+        unmount();
+
+        ({ container } = renderWithAppContext(
             <TabbedGridPanel
                 tabOrder={tabOrder}
                 title={title}
@@ -135,27 +138,28 @@ describe('TabbedGridPanel', () => {
                 actions={actions}
                 asPanel={false}
             />
-        );
+        ));
 
         // When asPanel is false we don't use those classes
-        expect(wrapper.find('.tabbed-grid-panel.panel-default').exists()).toEqual(false);
-        expect(wrapper.find('.tabbed-grid-panel.panel').exists()).toEqual(false);
-        expect(wrapper.find('.panel-heading').text()).toBe(title);
-        expect(wrapper.find(GridPanel).prop('title')).toBe(title);
+        expect(container.querySelector('.tabbed-grid-panel.panel-default')).toBeNull();
+        expect(container.querySelector('.tabbed-grid-panel.panel')).toBeNull();
+        // GridPanel receives the title when asPanel is false
+        expect(container.querySelector('.panel-heading.view-header')).not.toBeNull();
+        expect(container.querySelector('.panel-heading').textContent.trim()).toBe(title);
     });
 
     test('single model', () => {
-        const wrapper = mountWithAppServerContext(
+        const { container } = renderWithAppContext(
             <TabbedGridPanel tabOrder={['mixtures']} queryModels={{ mixtures: mixturesModel }} actions={actions} />
         );
 
         // Hide the tabs if we only have one model.
-        expect(wrapper.find('.nav-tabs').exists()).toEqual(false);
+        expect(container.querySelector('.nav-tabs')).toBeNull();
     });
 
     test('controlled', () => {
         const onTabSelect = jest.fn();
-        const wrapper = mountWithAppServerContext(
+        const { container, rerender } = renderWithAppContext(
             <TabbedGridPanel
                 actions={actions}
                 activeModelId="aminoAcids"
@@ -164,18 +168,26 @@ describe('TabbedGridPanel', () => {
                 tabOrder={tabOrder}
             />
         );
-        expectTabs(wrapper, AMINO_ACIDS_TITLE);
-        clickTab(wrapper, 0);
+        expectTabs(container, AMINO_ACIDS_TITLE);
+        clickTab(container, 0);
         expect(onTabSelect).toHaveBeenCalledWith('mixtures');
         // This is a controlled component, and we didn't change the activeModelId prop, so the tab shouldn't change
         // after click.
-        expectTabs(wrapper, AMINO_ACIDS_TITLE);
-        wrapper.setProps({ activeModelId: 'mixtures' });
-        expectTabs(wrapper, MIXTURES_TITLE);
+        expectTabs(container, AMINO_ACIDS_TITLE);
+        rerender(
+            <TabbedGridPanel
+                actions={actions}
+                activeModelId="mixtures"
+                onTabSelect={onTabSelect}
+                queryModels={queryModels}
+                tabOrder={tabOrder}
+            />
+        );
+        expectTabs(container, MIXTURES_TITLE);
     });
 
     test('showRowCountOnTabs', () => {
-        const wrapper = mountWithAppServerContext(
+        const { container } = renderWithAppContext(
             <TabbedGridPanel
                 actions={actions}
                 activeModelId="aminoAcids"
@@ -185,10 +197,10 @@ describe('TabbedGridPanel', () => {
             />
         );
 
-        const tabs = wrapper.find(TABS_SELECTOR);
+        const tabs = container.querySelectorAll(TABS_SELECTOR);
         expect(tabs.length).toEqual(2);
-        expect(tabs.at(0).text()).toEqual(`${MIXTURES_TITLE} (${queryModels.mixtures.rowCount})`);
-        expect(tabs.at(1).text()).toEqual(`${AMINO_ACIDS_TITLE} (${queryModels.aminoAcids.rowCount})`);
+        expect(tabs[0].textContent.trim()).toEqual(`${MIXTURES_TITLE} (${queryModels.mixtures.rowCount})`);
+        expect(tabs[1].textContent.trim()).toEqual(`${AMINO_ACIDS_TITLE} (${queryModels.aminoAcids.rowCount})`);
     });
 
     test('showRowCountOnTabs with large counts', () => {
@@ -196,7 +208,7 @@ describe('TabbedGridPanel', () => {
             mixtures: mixturesModel.mutate({ rowCount: 1242 }),
             aminoAcids: aminoAcidsModel.mutate({ rowCount: 54321 }),
         };
-        const wrapper = mountWithAppServerContext(
+        const { container } = renderWithAppContext(
             <TabbedGridPanel
                 actions={actions}
                 activeModelId="aminoAcids"
@@ -206,9 +218,9 @@ describe('TabbedGridPanel', () => {
             />
         );
 
-        const tabs = wrapper.find(TABS_SELECTOR);
+        const tabs = container.querySelectorAll(TABS_SELECTOR);
         expect(tabs.length).toEqual(2);
-        expect(tabs.at(0).text()).toEqual(`${MIXTURES_TITLE} (1,242)`);
-        expect(tabs.at(1).text()).toEqual(`${AMINO_ACIDS_TITLE} (54,321)`);
+        expect(tabs[0].textContent.trim()).toEqual(`${MIXTURES_TITLE} (1,242)`);
+        expect(tabs[1].textContent.trim()).toEqual(`${AMINO_ACIDS_TITLE} (54,321)`);
     });
 });
diff --git a/packages/components/src/public/QueryModel/ViewMenu.spec.tsx b/packages/components/src/public/QueryModel/ViewMenu.test.tsx
similarity index 57%
rename from packages/components/src/public/QueryModel/ViewMenu.spec.tsx
rename to packages/components/src/public/QueryModel/ViewMenu.test.tsx
index bd29f70eef..9a39828f88 100644
--- a/packages/components/src/public/QueryModel/ViewMenu.spec.tsx
+++ b/packages/components/src/public/QueryModel/ViewMenu.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { fireEvent, render } from '@testing-library/react';
 
 import { makeQueryInfo } from '../../internal/test/testHelpers';
 
@@ -59,46 +59,50 @@ describe('ViewMenu', () => {
     test('Render', () => {
         // Renders nothing
         let model = makeTestQueryModel(SCHEMA_QUERY, QUERY_INFO_NO_VIEWS, {}, []);
-        let wrapper = mount(<ViewMenu {...DEFAULT_PROPS} hideEmptyViewMenu={true} model={model} />);
-        let items = wrapper.find('MenuItem');
-        expect(items).toHaveLength(0);
+        let { container, unmount } = render(<ViewMenu {...DEFAULT_PROPS} hideEmptyViewMenu={true} model={model} />);
+        expect(container.querySelectorAll('.lk-menu-item')).toHaveLength(0);
+        unmount();
 
         // Renders empty view selector with disabled dropdown.
-        wrapper = mount(<ViewMenu {...DEFAULT_PROPS} hideEmptyViewMenu={false} model={model} />);
-        items = wrapper.find('MenuItem');
-        expect(items).toHaveLength(0);
+        ({ container, unmount } = render(<ViewMenu {...DEFAULT_PROPS} hideEmptyViewMenu={false} model={model} />));
+        expect(container.querySelectorAll('.lk-menu-item')).toHaveLength(0);
+        unmount();
 
-        // "No Extra Column"  view shows up under "Shared Saved Views"
+        // "No Extra Column" view shows up under "Shared Saved Views"
         model = makeTestQueryModel(SCHEMA_QUERY, QUERY_INFO_PUBLIC_VIEWS, {}, []);
-        wrapper = mount(<ViewMenu {...DEFAULT_PROPS} hideEmptyViewMenu={true} model={model} />);
-        expect(wrapper.find('MenuHeader').at(0).text()).toBe('Shared Saved Views');
-        items = wrapper.find('MenuItem');
+        ({ container, unmount } = render(<ViewMenu {...DEFAULT_PROPS} hideEmptyViewMenu={true} model={model} />));
+        expect(container.querySelector('.lk-dropdown-header').textContent).toBe('Shared Saved Views');
+        let items = container.querySelectorAll('.lk-menu-item');
         expect(items).toHaveLength(3);
-        expect(items.at(1).text()).toBe('No Extra Column');
+        expect(items[1].textContent.trim()).toBe('No Extra Column');
+        unmount();
 
         // "No Extra Column" view shows up under "My Saved Views"
         model = makeTestQueryModel(SCHEMA_QUERY, QUERY_INFO_PRIVATE_VIEWS, {}, []);
-        wrapper = mount(<ViewMenu {...DEFAULT_PROPS} hideEmptyViewMenu={true} model={model} />);
-        expect(wrapper.find('MenuHeader').at(0).text()).toBe('Your Saved Views');
-        items = wrapper.find('MenuItem');
-        expect(items.at(1).text()).toBe('No Extra Column');
+        ({ container, unmount } = render(<ViewMenu {...DEFAULT_PROPS} hideEmptyViewMenu={true} model={model} />));
+        expect(container.querySelector('.lk-dropdown-header').textContent).toBe('Your Saved Views');
+        items = container.querySelectorAll('.lk-menu-item');
+        expect(items[1].textContent.trim()).toBe('No Extra Column');
+        unmount();
 
         // Same as previous, but the No Extra Column view is set to active.
         model = model.mutate({
             schemaQuery: new SchemaQuery(SCHEMA_QUERY.schemaName, SCHEMA_QUERY.queryName, 'noExtraColumn'),
         });
-        wrapper = mount(<ViewMenu {...DEFAULT_PROPS} hideEmptyViewMenu={true} model={model} />);
-        expect(wrapper.find('MenuHeader').at(0).text()).toBe('Your Saved Views');
-        items = wrapper.find('MenuItem');
-        expect(items.at(1).text()).toBe('No Extra Column');
-        expect(items.at(1).prop('active')).toBe(true);
+        ({ container, unmount } = render(<ViewMenu {...DEFAULT_PROPS} hideEmptyViewMenu={true} model={model} />));
+        expect(container.querySelector('.lk-dropdown-header').textContent).toBe('Your Saved Views');
+        items = container.querySelectorAll('.lk-menu-item');
+        expect(items[1].textContent.trim()).toBe('No Extra Column');
+        expect(items[1].classList.contains('active')).toBe(true);
+        unmount();
 
         // "No Extra Column" view is hidden so does not show up
         model = makeTestQueryModel(SCHEMA_QUERY, QUERY_INFO_HIDDEN_VIEWS, {}, []);
-        wrapper = mount(<ViewMenu {...DEFAULT_PROPS} hideEmptyViewMenu={false} model={model} />);
-        items = wrapper.find('MenuItem');
+        ({ container, unmount } = render(<ViewMenu {...DEFAULT_PROPS} hideEmptyViewMenu={false} model={model} />));
+        items = container.querySelectorAll('.lk-menu-item');
         expect(items).toHaveLength(1);
-        expect(items.at(0).text()).toBe('Default');
+        expect(items[0].textContent.trim()).toBe('Default');
+        unmount();
     });
 
     test('Customized view menus', () => {
@@ -106,16 +110,14 @@ describe('ViewMenu', () => {
             isGuest: false,
         };
         const model = makeTestQueryModel(SCHEMA_QUERY, QUERY_INFO_HIDDEN_VIEWS, {}, []);
-        const wrapper = mount(
+        const { container } = render(
             <ViewMenu {...DEFAULT_PROPS} allowViewCustomization={true} hideEmptyViewMenu={false} model={model} />
         );
-        const items = wrapper.find('MenuItem');
+        const items = container.querySelectorAll('.lk-menu-item');
         expect(items).toHaveLength(4);
-        expect(items.at(1).text()).toBe('Customize Grid View');
-        expect(items.at(2).text()).toBe('Manage Saved Views');
-        expect(items.at(3).text()).toBe('Save Grid View');
-
-        wrapper.unmount();
+        expect(items[1].textContent.trim()).toBe('Customize Grid View');
+        expect(items[2].textContent.trim()).toBe('Manage Saved Views');
+        expect(items[3].textContent.trim()).toBe('Save Grid View');
     });
 
     test('Customized view menus, guest user', () => {
@@ -123,11 +125,9 @@ describe('ViewMenu', () => {
             isGuest: true,
         };
         const model = makeTestQueryModel(SCHEMA_QUERY, QUERY_INFO_HIDDEN_VIEWS, {}, []);
-        const wrapper = mount(<ViewMenu {...DEFAULT_PROPS} hideEmptyViewMenu={false} model={model} />);
-        const items = wrapper.find('MenuItem');
+        const { container } = render(<ViewMenu {...DEFAULT_PROPS} hideEmptyViewMenu={false} model={model} />);
+        const items = container.querySelectorAll('.lk-menu-item');
         expect(items).toHaveLength(1);
-
-        wrapper.unmount();
     });
 
     test('No views but customize enabled', () => {
@@ -136,21 +136,20 @@ describe('ViewMenu', () => {
         };
 
         const model = makeTestQueryModel(SCHEMA_QUERY, QUERY_INFO_NO_VIEWS, {}, []);
-        const wrapper = mount(
+        const { container } = render(
             <ViewMenu {...DEFAULT_PROPS} allowViewCustomization={true} hideEmptyViewMenu={false} model={model} />
         );
-        const items = wrapper.find('MenuItem');
+        const items = container.querySelectorAll('.lk-menu-item');
         expect(items).toHaveLength(3);
-        expect(items.at(0).text()).toBe('Customize Grid View');
-        expect(items.at(1).text()).toBe('Manage Saved Views');
-        expect(items.at(2).text()).toBe('Save Grid View');
-        wrapper.unmount();
+        expect(items[0].textContent.trim()).toBe('Customize Grid View');
+        expect(items[1].textContent.trim()).toBe('Manage Saved Views');
+        expect(items[2].textContent.trim()).toBe('Save Grid View');
     });
 
     test('Interactivity', () => {
         const onViewSelect = jest.fn();
         const model = makeTestQueryModel(SCHEMA_QUERY, QUERY_INFO_PUBLIC_VIEWS, {}, []);
-        const wrapper = mount(
+        const { container } = render(
             <ViewMenu
                 allowViewCustomization={false}
                 hideEmptyViewMenu={true}
@@ -160,7 +159,8 @@ describe('ViewMenu', () => {
                 onManageViews={jest.fn()}
             />
         );
-        wrapper.find('MenuItem').last().find('a').simulate('click');
+        const items = container.querySelectorAll('.lk-menu-item');
+        fireEvent.click(items[items.length - 1].querySelector('a'));
         expect(onViewSelect).toHaveBeenCalledWith('noMixtures');
     });
 });