The <Pads /> component is dependent on a value of a given context provider <PowerContext>. To test for this I have created a custom render function that returns render(<PowerContext.Provider {...providerProps}>{ui}</PowerContext.Provider>, renderOptions);

See: https://testing-library.com/docs/example-react-context

Upon testing for what is rendered based on the value of context provider, the test assertion is failing:

Expected the element to have attribute:
  style="background: rgba(100, 0, 255, 40%); box-shadow: inset 0px 0px 5px 0px purple;"
Received:
  style="background: rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 7px 0 rgba(0, 0, 0, 0.6);"

For the given code, the context provider is given a value of true and is suppose to return the expected styles but it doesn’t.

context.jsx

import {createContext} from "react";

let PowerContext = createContext(false);

export {PowerContext};

test_config.jsx

import {render} from "@testing-library/react";

import {PowerContext} from "../context.jsx"

const PowerContextRender = (ui, {providerProps, ...renderOptions}) => {
    return render(<PowerContext.Provider {...providerProps}>{ui}</PowerContext.Provider>, renderOptions);
}

export {PowerContextRender};

components.test.jsx

import {Pads} from "../components.jsx";
import {PowerContextRender} from "./test_config.jsx";

test("Verify that pads are styled with a color when the machine is on", () => {
    const providerProps = {value: true};
    const {getAllByRole} = PowerContextRender(<Pads sound_bank="A"/>, providerProps);
    const buttons = getAllByRole("button");
    expect(buttons[0]).toHaveAttribute("style", "background: rgba(100, 0, 255, 40%); box-shadow: inset 0px 0px 5px 0px purple;")
});

components.jsx

function Pads({sound_bank}) {
    const power_on = useContext(PowerContext);
    const mp3s = sound_bank === "A" ? mp3_files[0]: mp3_files[1];
    const pads = mp3s.map((mp3_file) => {
        return <Pad id={mp3_file.id} src={mp3_file.src} style={
            {
                background: power_on ? mp3_file.style.background : "rgba(0, 0, 0, 0.1)",
                boxShadow: power_on ? mp3_file.style.boxShadow : "inset 0 0 7px 0 rgba(0, 0, 0, 0.6)"
            }
        } />
    });
    return <div className="pads_wrapper">{pads}</div>
}