Стилизованный jsx с плагином post css прерывает тестирование компонентов в jest тестах с ошибкой вложения

Question

Текущее поведение

При запуске шутовых тестов с отрисованными реагирующими компонентами я получаю следующую ошибку:

    Nesting detected at 5:5. Unfortunately nesting is not supported by styled-jsx.

      at Function.disableNestingPlugin (node_modules/styled-jsx/dist/lib/style-transform.js:24:13)
      at proxy (node_modules/styled-jsx/node_modules/stylis/stylis.js:1478:30)
      at compile (node_modules/styled-jsx/node_modules/stylis/stylis.js:890:14)
      at compile (node_modules/styled-jsx/node_modules/stylis/stylis.js:453:17)
      at compile (node_modules/styled-jsx/node_modules/stylis/stylis.js:453:17)
      at stylis (node_modules/styled-jsx/node_modules/stylis/stylis.js:1686:16)
      at transform (node_modules/styled-jsx/dist/lib/style-transform.js:122:3)
      at processCss (node_modules/styled-jsx/dist/_utils.js:494:51)
      at processTaggedTemplateExpression (node_modules/styled-jsx/dist/babel-external.js:58:38)
      at node_modules/styled-jsx/dist/babel-external.js:183:11

[styled-jsx] Loading plugin from path: styled-jsx-plugin-postcss
Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.374s

Мы используем post css со стилем jsx.Это прекрасно работает при локальном строительстве и уже несколько месяцев успешно работает на производстве.По какой-то причине нам не хватает вложенного jsx.

Если текущее поведение является ошибкой, укажите шаги для воспроизведения и, возможно, минимальный демонстрационный пример или тестовый пример в виде приложения Next.js, URL-адреса CodeSandbox или аналогичного

test-example.js

import React from 'react';
import css from 'styled-jsx/css';
import renderer from 'react-test-renderer';

const styles = css`
  .title {
    &.nested-title-class {
      background: pink;
    }
  }
`;

const TestComponent = () => (
  <div>
    <style jsx>{styles}</style>
    <h1 className="title nested-title-class">I am a test</h1>
  </div>
);

describe('TestComponent', () => {
  it('should be able to render', () => {
    const wrapper = renderer.create(<TestComponent />);
    console.log('wrapper', wrapper);
  });
});

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    ["styled-jsx/babel", { "plugins": ["styled-jsx-plugin-postcss"] }]
  ],
  "env": {
    "jest": {
      "presets": [
        ["next/babel", { "preset-env": { "modules": "commonjs" } }],
        ["env"]
      ],
      "plugins": [
        ["styled-jsx/babel-test"],
        ["transform-class-properties"],
        ["styled-jsx/babel", { "plugins": ["styled-jsx-plugin-postcss"] }]
      ]
    }
  }
}

package.json (сжатый)

{
  "dependencies": {
    "@babel/polyfill": "^7.0.0-rc.2",
    "@babel/preset-env": "^7.0.0-rc.2",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^23.4.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "@2.0.0-alpha.20",
    "enzyme": "^3.4.4",
    "enzyme-adapter-react-16": "^1.2.0",
    "jest": "^23.5.0",
    "next": "^6.0.3",
    "postcss-calc": "^6.0.1",
    "postcss-color-function": "^4.0.1",
    "postcss-css-variables": "^0.11.0",
    "postcss-custom-media": "^6.0.0",
    "postcss-import": "^11.1.0",
    "postcss-nested": "^3.0.0",
    "prop-types": "^15.6.1",
    "react": "^16.3.2",
    "react-redux": "^5.0.7",
    "react-test-renderer": "^16.5.2",
    "redux": "^4.0.0",
    "styled-jsx": "^3.1.0",
    "styled-jsx-plugin-postcss": "^0.1.3",
  },
  "scripts": {
    "test": "NODE_ENV=jest jest",
    "test:watch": "NODE_ENV=jest jest --watch"
  }
}

jest.config.js

module.exports = {
  setupFiles: ['<rootDir>/jest.setup.js'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
  testRegex: '.*\\.test\\.js',
  moduleFileExtensions: ['js', 'jsx'],
  collectCoverageFrom: [
    '!jest.config.js',
    '!jest.setup.js',
    '!next.config.js',
    '**/*.{js,jsx}',
    '!coverage/**',
    '!server/**',
  ],
};

jest.setup.js

import polyfill from '@babel/polyfill'; /* eslint-disable-line */
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

postcss.config.js

const postcssImport = require('postcss-import');
const postcssCustomMedia = require('postcss-custom-media');

const postcssNested = require('postcss-nested');
const cssvariables = require('postcss-css-variables');
const colorFunction = require('postcss-color-function');
const postcssCalc = require('postcss-calc');

module.exports = {
  plugins: [
    postcssImport,
    postcssCustomMedia,

    postcssNested,
    cssvariables({
      preserve: false,
    }),
    colorFunction,
    postcssCalc,
  ],
};

Какое поведение ожидается?

что тест может успешно визуализировать компоненты в стиле jsx с вложенными css.

Среда (включая версии)

• ОС: OSX 10.14
• jest версия: 23.5.0
• styled-jsx (версия): 3.1.0

Работало ли это в предыдущих версиях?нет

Нет