diff --git a/tests/shared/imageTest.tsx b/tests/shared/imageTest.tsx
index dcd6f0ca51..6317bcec34 100644
--- a/tests/shared/imageTest.tsx
+++ b/tests/shared/imageTest.tsx
@@ -16,59 +16,70 @@ const toMatchImageSnapshot = configureToMatchImageSnapshot({
expect.extend({ toMatchImageSnapshot });
+const themes = {
+ default: theme.defaultAlgorithm,
+ dark: theme.darkAlgorithm,
+ compact: theme.compactAlgorithm,
+};
+
// eslint-disable-next-line jest/no-export
export default function imageTest(component: React.ReactElement) {
- [theme.defaultAlgorithm, theme.darkAlgorithm, theme.compactAlgorithm].forEach(
- (algorithm, index) => {
- it(`component image screenshot should correct${index || ''}`, async () => {
- await jestPuppeteer.resetPage();
- await page.setRequestInterception(true);
- const onRequestHandle = (request: any) => {
- if (['image'].includes(request.resourceType())) {
- request.abort();
- } else {
- request.continue();
- }
- };
+ it(`component image screenshot should correct`, async () => {
+ await jestPuppeteer.resetPage();
+ await page.setRequestInterception(true);
+ const onRequestHandle = (request: any) => {
+ if (['image'].includes(request.resourceType())) {
+ request.abort();
+ } else {
+ request.continue();
+ }
+ };
- MockDate.set(dayjs('2016-11-22').valueOf());
- page.on('request', onRequestHandle);
- await page.goto(`file://${process.cwd()}/tests/index.html`);
- await page.addStyleTag({ path: `${process.cwd()}/dist/reset.css` });
+ MockDate.set(dayjs('2016-11-22').valueOf());
+ page.on('request', onRequestHandle);
+ await page.goto(`file://${process.cwd()}/tests/index.html`);
+ await page.addStyleTag({ path: `${process.cwd()}/dist/reset.css` });
- const cache = createCache();
+ const cache = createCache();
- const element = (
-
-
- {component}
-
-
- );
+ const element = (
+
+
+ {Object.entries(themes).map(([key, algorithm]) => (
+
+ {component}
+
+ ))}
+
+
+ );
- const html = ReactDOMServer.renderToString(element);
- const styleStr = extractStyle(cache);
+ const html = ReactDOMServer.renderToString(element);
+ const styleStr = extractStyle(cache);
- await page.evaluate(
- (innerHTML, ssrStyle) => {
- document.querySelector('#root')!.innerHTML = innerHTML;
+ await page.evaluate(
+ (innerHTML, ssrStyle) => {
+ document.querySelector('#root')!.innerHTML = innerHTML;
- const head = document.querySelector('head')!;
- head.innerHTML += ssrStyle;
- },
- html,
- styleStr,
- );
+ const head = document.querySelector('head')!;
+ head.innerHTML += ssrStyle;
+ },
+ html,
+ styleStr,
+ );
- const image = await page.screenshot();
+ const image = await page.screenshot({
+ fullPage: true,
+ });
- expect(image).toMatchImageSnapshot();
+ expect(image).toMatchImageSnapshot();
- MockDate.reset();
- page.removeListener('request', onRequestHandle);
- });
- },
- );
+ MockDate.reset();
+ page.removeListener('request', onRequestHandle);
+ });
}
type Options = {