diff --git a/src/app/WardrobePage/OutfitControls.js b/src/app/WardrobePage/OutfitControls.js
index 75fe9c9..83667f9 100644
--- a/src/app/WardrobePage/OutfitControls.js
+++ b/src/app/WardrobePage/OutfitControls.js
@@ -191,21 +191,15 @@ function OutfitControls({
               </Flex>
               <Box flex="0 0 auto">
                 <DarkMode>
-                  {
-                    <SpeciesColorPicker
-                      speciesId={outfitState.speciesId}
-                      colorId={outfitState.colorId}
-                      idealPose={outfitState.pose}
-                      onChange={onSpeciesColorChange}
-                      stateMustAlwaysBeValid
-                      speciesPickerProps={{
-                        "data-test-id": "wardrobe-species-picker",
-                      }}
-                      colorPickerProps={{
-                        "data-test-id": "wardrobe-color-picker",
-                      }}
-                    />
-                  }
+                  <SpeciesColorPicker
+                    speciesId={outfitState.speciesId}
+                    colorId={outfitState.colorId}
+                    idealPose={outfitState.pose}
+                    onChange={onSpeciesColorChange}
+                    stateMustAlwaysBeValid
+                    speciesTestId="wardrobe-species-picker"
+                    colorTestId="wardrobe-color-picker"
+                  />
                 </DarkMode>
               </Box>
               <Flex flex="1 1 0" align="center" pl="2">
diff --git a/src/app/components/SpeciesColorPicker.js b/src/app/components/SpeciesColorPicker.js
index 3cd4c1b..79fd548 100644
--- a/src/app/components/SpeciesColorPicker.js
+++ b/src/app/components/SpeciesColorPicker.js
@@ -27,8 +27,8 @@ function SpeciesColorPicker({
   isDisabled = false,
   speciesIsDisabled = false,
   size = "md",
-  speciesPickerProps = {},
-  colorPickerProps = {},
+  speciesTestId = null,
+  colorTestId = null,
   onChange,
 }) {
   const { loading: loadingMeta, error: errorMeta, data: meta } = useQuery(gql`
@@ -190,7 +190,7 @@ function SpeciesColorPicker({
         valids={valids}
         speciesId={speciesId}
         colorId={colorId}
-        {...colorPickerProps}
+        data-test-id={colorTestId}
       >
         {
           // If the selected color isn't in the set we have here, show the
@@ -234,7 +234,7 @@ function SpeciesColorPicker({
         valids={valids}
         speciesId={speciesId}
         colorId={colorId}
-        {...speciesPickerProps}
+        data-test-id={speciesTestId}
       >
         {
           // If the selected species isn't in the set we have here, show the