diff --git a/client/test-utils.js b/client/test-utils.js
index 8847383068..1a3dfcc92e 100644
--- a/client/test-utils.js
+++ b/client/test-utils.js
@@ -1,12 +1,13 @@
 /**
  * This file re-exports @testing-library but ensures that
- * any calls to render have translations available.
+ * any calls to render have translations and theme available.
  *
  * This means tested components will be able to call
  * `t()` and have the translations of the default
- * language
+ * language also components will be able to call
+ * `prop()` and have the theming of the default theme.
  *
- * See: https://react.i18next.com/misc/testing#testing-without-stubbing
+ * For i18n see: https://react.i18next.com/misc/testing#testing-without-stubbing
  */
 
 // eslint-disable-next-line import/no-extraneous-dependencies
@@ -15,7 +16,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { I18nextProvider } from 'react-i18next';
+import { ThemeProvider } from 'styled-components';
+
 import i18n from './i18n-test';
+import theme, { Theme } from './theme';
 
 // re-export everything
 // eslint-disable-next-line import/no-extraneous-dependencies
@@ -23,7 +27,9 @@ export * from '@testing-library/react';
 
 const Providers = ({ children }) => (
   // eslint-disable-next-line react/jsx-filename-extension
-  <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
+  <ThemeProvider theme={{ ...theme[Theme.light] }}>
+    <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
+  </ThemeProvider>
 );
 
 Providers.propTypes = {