next-page-tester: styled-components' context doesn't work

💬 Questions and Help

When I wrap <Component /> with a Provider <ThemeProvider theme={theme} > in _app and then try to consume this theme or provider value it returns undefined instead of the provider value.

Please help, I have been 2 days debuging to find the issue and there is no luck

home.test.jsx

it('should renders home page', async () => {
    const { render} = await getPage({
         route: '/home',
          useApp: true
    });
    render();
    expect(screen.getByText('home'))
    expect(screen.getByText('child'))
});

_app.js

import React, {useContext} from 'react';
import styled, { ThemeProvider, ThemeContext } from 'styled-components';
import ThemJson from "../theme";

const StyledContainer = styled.div`
    background-color: ${props => { 
        console.log("PROPS IN STYLED COMPONENTS", props.theme);  // output is correct
        return props.theme.color.primary;
    }
};
`
const AppChild = () => {
    const theme = useContext(ThemeContext);
    console.log(theme) // Output correct
    return (<StyledContainer>home</StyledContainer>);
};

const MyApp = ({ Component }) => {
  return (
      <ThemeProvider theme={ThemJson}>
         <AppChild />
         <Component />
    </ThemeProvider>
  );
};
export default MyApp

home.jsx

import React, {useContext} from 'react';
import styled, {ThemeContext} from 'styled-components';

export const StyledContainer = styled.div`
    background-color: ${props => {
        console.log("PROPS IN STYLED COMPONENTS", props.theme); // ERROR can't red property theme of undefined
        return props.theme.color.primary;
    }
};
`

function Home(props) {
    const theme = useContext(ThemeContext);
    console.log(theme) // Wrong!! // theme is undefined
    return (
        <StyledContainer>
            child
        </StyledContainer>
    );
};

export default Home;

theme.json

{
    "color": {
        "primary": "red"
    }
}