- // -> 0:
- return wrapper.find(Step).childAt(0).childAt(1).childAt(0);
- },
muiName: 'MuiStepContent',
refInstanceof: window.HTMLDivElement,
render: (node) => {
diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
index d11b9f01c4a29a..1f197b487bce9e 100644
--- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
+++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.test.js
@@ -63,6 +63,7 @@ describe('
', () => {
const { render } = createRenderer({ clock: 'fake' });
describeConformance(
{}} onClose={() => {}} open />, () => ({
+ render,
classes: {},
inheritComponent: Drawer,
refInstanceof: window.HTMLDivElement,
diff --git a/packages/mui-material/src/Switch/Switch.test.js b/packages/mui-material/src/Switch/Switch.test.js
index 99f454cdb3006b..774e6450b7ad38 100644
--- a/packages/mui-material/src/Switch/Switch.test.js
+++ b/packages/mui-material/src/Switch/Switch.test.js
@@ -17,7 +17,16 @@ describe('', () => {
{ slotName: 'input', slotClassName: classes.input },
],
refInstanceof: window.HTMLSpanElement,
- skip: ['componentProp', 'componentsProp', 'propsSpread', 'themeDefaultProps', 'themeVariants'],
+ skip: [
+ 'componentProp',
+ 'componentsProp',
+ 'themeDefaultProps',
+ 'themeVariants',
+ // Props are spread to the root's child but className is added to the root
+ // We cannot use the standard mergeClassName test which relies on data-testid on the root
+ // We should fix this when refactoring with Base UI
+ 'mergeClassName',
+ ],
}));
describe('styleSheet', () => {
@@ -142,4 +151,12 @@ describe('', () => {
});
});
});
+
+ describe('mergeClassName', () => {
+ it('should merge the className', () => {
+ const { container } = render();
+
+ expect(container.firstChild).to.have.class('test-class-name');
+ });
+ });
});
diff --git a/packages/mui-material/src/TableBody/TableBody.test.js b/packages/mui-material/src/TableBody/TableBody.test.js
index 8faaa00569c13c..708b0add1c5230 100644
--- a/packages/mui-material/src/TableBody/TableBody.test.js
+++ b/packages/mui-material/src/TableBody/TableBody.test.js
@@ -15,10 +15,6 @@ describe('', () => {
describeConformance(, () => ({
classes,
inheritComponent: 'tbody',
- wrapMount: (mount) => (node) => {
- const wrapper = mount();
- return wrapper.find('table').childAt(0);
- },
render: (node) => {
const { container, ...other } = render();
return { container: container.firstChild, ...other };
diff --git a/packages/mui-material/src/TableCell/TableCell.test.js b/packages/mui-material/src/TableCell/TableCell.test.js
index 427864cf0df7e7..3d767a3c3066d3 100644
--- a/packages/mui-material/src/TableCell/TableCell.test.js
+++ b/packages/mui-material/src/TableCell/TableCell.test.js
@@ -32,16 +32,6 @@ describe('', () => {
);
return { container: container.firstChild.firstChild.firstChild, ...other };
},
- wrapMount: (mount) => (node) => {
- const wrapper = mount(
- ,
- );
- return wrapper.find('tr').childAt(0);
- },
muiName: 'MuiTableCell',
testVariantProps: { variant: 'body' },
refInstanceof: window.HTMLTableCellElement,
diff --git a/packages/mui-material/src/TableFooter/TableFooter.test.js b/packages/mui-material/src/TableFooter/TableFooter.test.js
index b0ffcd15d9da50..8f06544194906e 100644
--- a/packages/mui-material/src/TableFooter/TableFooter.test.js
+++ b/packages/mui-material/src/TableFooter/TableFooter.test.js
@@ -19,10 +19,6 @@ describe('', () => {
const { container, ...other } = render();
return { container: container.firstChild, ...other };
},
- wrapMount: (mount) => (node) => {
- const wrapper = mount();
- return wrapper.find('table').childAt(0);
- },
muiName: 'MuiTableFooter',
testVariantProps: { variant: 'foo' },
refInstanceof: window.HTMLTableSectionElement,
diff --git a/packages/mui-material/src/TableHead/TableHead.test.js b/packages/mui-material/src/TableHead/TableHead.test.js
index 0d898aee753bc2..6b235c3974b0fc 100644
--- a/packages/mui-material/src/TableHead/TableHead.test.js
+++ b/packages/mui-material/src/TableHead/TableHead.test.js
@@ -14,10 +14,6 @@ describe('', () => {
describeConformance(, () => ({
classes,
inheritComponent: 'thead',
- wrapMount: (mount) => (node) => {
- const wrapper = mount();
- return wrapper.find('table').childAt(0);
- },
render: (node) => {
const { container, ...other } = render();
return { container: container.firstChild, ...other };
diff --git a/packages/mui-material/src/TablePagination/TablePagination.test.js b/packages/mui-material/src/TablePagination/TablePagination.test.js
index dd84205b454d2d..aae4498c9e6d5a 100644
--- a/packages/mui-material/src/TablePagination/TablePagination.test.js
+++ b/packages/mui-material/src/TablePagination/TablePagination.test.js
@@ -45,16 +45,6 @@ describe('', () => {
);
return { container: container.firstChild.firstChild.firstChild, ...other };
},
- wrapMount: (mount) => (node) => {
- const wrapper = mount(
- ,
- );
- return wrapper.find('tr').childAt(0);
- },
muiName: 'MuiTablePagination',
refInstanceof: window.HTMLTableCellElement,
testComponentPropWith: 'td',
diff --git a/packages/mui-material/src/TableRow/TableRow.test.js b/packages/mui-material/src/TableRow/TableRow.test.js
index 5dee6de9e0dc3e..1c16402755ecc3 100644
--- a/packages/mui-material/src/TableRow/TableRow.test.js
+++ b/packages/mui-material/src/TableRow/TableRow.test.js
@@ -26,14 +26,6 @@ describe('', () => {
);
return { container: container.firstChild.firstChild, ...other };
},
- wrapMount: (mount) => (node) => {
- const wrapper = mount(
- ,
- );
- return wrapper.find('tbody').childAt(0);
- },
muiName: 'MuiTableRow',
testVariantProps: { variant: 'foo' },
refInstanceof: window.HTMLTableRowElement,
diff --git a/packages/mui-material/src/Zoom/Zoom.test.js b/packages/mui-material/src/Zoom/Zoom.test.js
index c3d272f2dd0650..19d330e846e811 100644
--- a/packages/mui-material/src/Zoom/Zoom.test.js
+++ b/packages/mui-material/src/Zoom/Zoom.test.js
@@ -15,6 +15,7 @@ describe('', () => {
,
() => ({
+ render,
classes: {},
inheritComponent: Transition,
refInstanceof: window.HTMLDivElement,
diff --git a/packages/test-utils/src/describeConformance.tsx b/packages/test-utils/src/describeConformance.tsx
index 3063749ac0d095..d1625eba4c5189 100644
--- a/packages/test-utils/src/describeConformance.tsx
+++ b/packages/test-utils/src/describeConformance.tsx
@@ -1,11 +1,8 @@
/* eslint-env mocha */
import * as React from 'react';
import { expect } from 'chai';
-import { ReactWrapper } from 'enzyme';
import ReactTestRenderer from 'react-test-renderer';
-import createMount from './createMount';
import createDescribe from './createDescribe';
-import findOutermostIntrinsic from './findOutermostIntrinsic';
import { MuiRenderResult } from './createRenderer';
function capitalize(string: string): string {
@@ -45,11 +42,19 @@ export interface ConformanceOptions {
refInstanceof: any;
after?: () => void;
inheritComponent?: React.ElementType;
- render: (node: React.ReactElement) => MuiRenderResult;
- mount?: (node: React.ReactElement) => ReactWrapper;
+ render: (node: React.ReactElement) => MuiRenderResult;
only?: Array;
skip?: Array;
testComponentsRootPropWith?: string;
+ /**
+ * A custom React component to test if the component prop is implemented correctly.
+ *
+ * It must either:
+ * - Be a string that is a valid HTML tag, or
+ * - A component that spread props to the underlying rendered element.
+ *
+ * If not provided, the default 'em' element is used.
+ */
testComponentPropWith?: string | React.ElementType;
testDeepOverrides?: SlotTestOverride | SlotTestOverride[];
testRootOverrides?: SlotTestOverride;
@@ -57,42 +62,11 @@ export interface ConformanceOptions {
testCustomVariant?: boolean;
testVariantProps?: object;
testLegacyComponentsProp?: boolean;
- wrapMount?: (
- mount: (node: React.ReactElement) => ReactWrapper,
- ) => (node: React.ReactElement) => ReactWrapper;
slots?: Record;
ThemeProvider?: React.ElementType;
createTheme?: (arg: any) => any;
}
-/**
- * @param {object} node
- * @returns
- */
-function assertDOMNode(node: unknown) {
- // duck typing a DOM node
- expect(typeof (node as HTMLElement).nodeName).to.equal('string');
-}
-
-/**
- * Utility method to make assertions about the ref on an element
- * The element should have a component wrapped in withStyles as the root
- */
-function testRef(
- element: React.ReactElement,
- mount: ConformanceOptions['mount'],
- onRef: (instance: unknown, wrapper: import('enzyme').ReactWrapper) => void = assertDOMNode,
-) {
- if (!mount) {
- throwMissingPropError('mount');
- }
-
- const ref = React.createRef();
-
- const wrapper = mount({React.cloneElement(element, { ref })});
- onRef(ref.current, wrapper);
-}
-
/**
* Glossary
* - root component:
@@ -102,18 +76,6 @@ function testRef(
* - has the type of `inheritComponent`
*/
-/**
- * Returns the component with the same constructor as `component` that renders
- * the outermost host
- */
-export function findRootComponent(wrapper: ReactWrapper, component: string | React.ElementType) {
- const outermostHostElement = findOutermostIntrinsic(wrapper).getElement();
-
- return wrapper.find(component as string).filterWhere((componentWrapper) => {
- return componentWrapper.contains(outermostHostElement);
- });
-}
-
export function randomStringValue() {
return `s${Math.random().toString(36).slice(2)}`;
}
@@ -131,16 +93,20 @@ function throwMissingPropError(field: string): never {
*/
export function testClassName(element: React.ReactElement, getOptions: () => ConformanceOptions) {
it('applies the className to the root component', () => {
- const { mount } = getOptions();
- if (!mount) {
- throwMissingPropError('mount');
+ const { render } = getOptions();
+
+ if (!render) {
+ throwMissingPropError('render');
}
const className = randomStringValue();
+ const testId = randomStringValue();
- const wrapper = mount(React.cloneElement(element, { className }));
+ const { getByTestId } = render(
+ React.cloneElement(element, { className, 'data-testid': testId }),
+ );
- expect(findOutermostIntrinsic(wrapper).instance()).to.have.class(className);
+ expect(getByTestId(testId)).to.have.class(className);
});
}
@@ -154,42 +120,54 @@ export function testComponentProp(
) {
describe('prop: component', () => {
it('can render another root component with the `component` prop', () => {
- const { mount, testComponentPropWith: component = 'em' } = getOptions();
- if (!mount) {
- throwMissingPropError('mount');
+ const { render, testComponentPropWith: component = 'em' } = getOptions();
+ if (!render) {
+ throwMissingPropError('render');
}
- const wrapper = mount(React.cloneElement(element, { component }));
+ const testId = randomStringValue();
- expect(findRootComponent(wrapper, component).exists()).to.equal(true);
+ if (typeof component === 'string') {
+ const { getByTestId } = render(
+ React.cloneElement(element, { component, 'data-testid': testId }),
+ );
+ expect(getByTestId(testId)).not.to.equal(null);
+ expect(getByTestId(testId).nodeName.toLowerCase()).to.eq(component);
+ } else {
+ const componentWithTestId = (props: {}) =>
+ React.createElement(component, { ...props, 'data-testid': testId });
+ const { getByTestId } = render(
+ React.cloneElement(element, {
+ component: componentWithTestId,
+ }),
+ );
+ expect(getByTestId(testId)).not.to.equal(null);
+ }
});
});
}
/**
- * MUI components can spread additional props to a documented component.
+ * MUI components spread additional props to its root.
*/
export function testPropsSpread(element: React.ReactElement, getOptions: () => ConformanceOptions) {
it(`spreads props to the root component`, () => {
// type def in ConformanceOptions
- const { inheritComponent, mount } = getOptions();
- if (!mount) {
- throwMissingPropError('mount');
- }
+ const { render } = getOptions();
- if (inheritComponent === undefined) {
- throw new TypeError(
- 'Unable to test props spread without `inheritComponent`. Either skip the test or pass a React element type.',
- );
+ if (!render) {
+ throwMissingPropError('render');
}
const testProp = 'data-test-props-spread';
const value = randomStringValue();
+ const testId = randomStringValue();
- const wrapper = mount(React.cloneElement(element, { [testProp]: value }));
- const root = findRootComponent(wrapper, inheritComponent);
+ const { getByTestId } = render(
+ React.cloneElement(element, { [testProp]: value, 'data-testid': testId }),
+ );
- expect(root.props()).to.have.property(testProp, value);
+ expect(getByTestId(testId)).to.have.attribute(testProp, value);
});
}
@@ -203,16 +181,17 @@ export function describeRef(element: React.ReactElement, getOptions: () => Confo
describe('ref', () => {
it(`attaches the ref`, () => {
// type def in ConformanceOptions
- const { inheritComponent, mount, refInstanceof } = getOptions();
+ const { render, refInstanceof } = getOptions();
+
+ if (!render) {
+ throwMissingPropError('render');
+ }
- testRef(element, mount, (instance, wrapper) => {
- expect(instance).to.be.instanceof(refInstanceof);
+ const ref = React.createRef();
- if (inheritComponent !== undefined && (instance as HTMLElement).nodeType === 1) {
- const rootHost = findOutermostIntrinsic(wrapper);
- expect(instance).to.equal(rootHost.instance());
- }
- });
+ render(React.cloneElement(element, { ref }));
+
+ expect(ref.current).to.be.instanceof(refInstanceof);
});
});
}
@@ -571,14 +550,18 @@ function testSlotPropsCallback(element: React.ReactElement, getOptions: () => Co
function testComponentsProp(element: React.ReactElement, getOptions: () => ConformanceOptions) {
describe('prop components:', () => {
it('can render another root component with the `components` prop', () => {
- const { mount, testComponentsRootPropWith: component = 'em' } = getOptions();
- if (!mount) {
- throwMissingPropError('mount');
+ const { render, testComponentsRootPropWith: component = 'em' } = getOptions();
+ if (!render) {
+ throwMissingPropError('render');
}
- const wrapper = mount(React.cloneElement(element, { components: { Root: component } }));
+ const testId = randomStringValue();
- expect(findRootComponent(wrapper, component).exists()).to.equal(true);
+ const { getByTestId } = render(
+ React.cloneElement(element, { components: { Root: component }, 'data-testid': testId }),
+ );
+ expect(getByTestId(testId)).not.to.equal(null);
+ expect(getByTestId(testId).nodeName.toLowerCase()).to.eq(component);
});
});
}
@@ -1056,7 +1039,6 @@ function describeConformance(
only = Object.keys(fullSuite),
slots,
skip = [],
- wrapMount,
} = getOptions();
let filteredTests = Object.keys(fullSuite).filter(
@@ -1071,21 +1053,11 @@ function describeConformance(
filteredTests = filteredTests.filter((testKey) => !slotBasedTests.includes(testKey));
}
- const baseMount = createMount();
- const mount = wrapMount !== undefined ? wrapMount(baseMount) : baseMount;
-
after(runAfterHook);
- function getTestOptions(): ConformanceOptions {
- return {
- ...getOptions(),
- mount,
- };
- }
-
filteredTests.forEach((testKey) => {
const test = fullSuite[testKey];
- test(minimalElement, getTestOptions);
+ test(minimalElement, getOptions);
});
}