Imported constants in styles no longer work with Jest in Next 6.0.0

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Importing a constant and using it in a <style jsx> tag should work as per the documentation in tests using Jest

Current Behavior

The imported constant is undefined when used in the <style jsx> template string (but is still defined elsewhere in the file)

Steps to Reproduce (for bugs)

Make the following minor changes to the with-jest example app (https://github.com/zeit/next.js/tree/canary/examples/with-jest):

// with-jest-app/pages/index.js
import { red } from '../colors'; // new

export default () => (
  <div>
    <style jsx>{`
      p {
        color: ${red};
      }
    `}</style>
    <p>Hello World!</p>
  </div>
);

// new file: with-jest-app/colors.js
export const red = '#F00';

No other changes to config, etc are required to reproduce the issue.

In Next 5.x this works as expected both when running the app and also when using Jest. In Next 6.0.0 this works as expected when running the app but the Jest tests fail claiming: ReferenceError: red is not defined.

I’ve found these workarounds that solve the issue (albeit in an ugly way) and may help you to diagnose the issue:

1. Assign to another variable first:

// with-jest-app/pages/index.js
import { red } from '../colors';

const alias = red;

export default () => (
  <div>
    <style jsx>{`
      p {
        color: ${alias};
      }
    `}</style>
    <p>Hello World!</p>
  </div>
);

1. Convert the variable expression into a boolean expression:

// with-jest-app/pages/index.js
import { red } from '../colors';

export default () => (
  <div>
    <style jsx>{`
      p {
        color: ${true && red};
      }
    `}</style>
    <p>Hello World!</p>
  </div>
);

Context

Was trying to upgrade another (much larger) app to Next v6.0.0 Note: It’s entirely possible that this is actually an issue with another project (styled-jsx, jest, babel, etc) but as I noticed it when upgrading Next and am not sure how to narrow it down any further I have raised the issue here - I’m happy to close this issue and raise it on one of the other projects if you think that’s more appropriate.

Your Environment

Tech	Version
next	6.0.0
node	8.6.0
OS	Linux
Jest	22.4.3

[jjm340]

I found another workaround: `import * as colors from ‘…/colors’;

export default () => (

<div> <style jsx>{` p { color: ${colors.red}; } `}</style>

Hello World!

</div> ); `

This worked for me

[timneutkens]

I guess this was fixed.