Снимки реакции, эмоций и шуток: ошибка: свойство отсутствует ':' - PullRequest
Новая
       30

Снимки реакции, эмоций и шуток: ошибка: свойство отсутствует ':'

1 голос
/ 12 апреля 2019

У меня есть репозиторий реагирующих компонентов многократного использования и репо инструментальной панели.

Моя панель мониторинга использует многие компоненты из репозитория многократного использования, но у меня есть один тест репозитория панели инструментов, который я не могу пройти.

В репо многократно используемых компонентов есть все версии, все тесты пройдены: 

"emotion": "9.1.0",
"react-emotion": "9.1.0",
"jest-emotion": "^9.0.0",
"react-test-renderer": "16.6.3",

В репозитории панели инструментов есть эти версии, и только один тест не пройден: 

"emotion": "9.2.11",
"react-emotion": "9.2.11",
"jest-emotion": "9.2.11",
"react-test-renderer": "16.6.3",

Не работаетtest использует react-test-renderer для создания снимка компонента.Один из тестируемых компонентов выглядит следующим образом: 

import styled from 'react-emotion';
import { Column } from '@commons/components';

export const StyledButtonContainer = styled('div')`
  margin-top: 20px;
  display: flex;
  button {
    flex: 1;
    margin-right: 15px;

    &:last-child {
     margin-right: 0;
    }
  }
`;

Стек ошибок: 

console.error node_modules/jest-emotion/dist/index.js:260
      { 
        Error: undefined:1:627: property missing ':'
          at error (/Users/path/to/my/node_modules/css/lib/parse/index.js:62:15)
          at declaration (/Users/path/to/my/node_modules/css/lib/parse/index.js:224:33)
          at declarations (/Users/path/to/my/node_modules/css/lib/parse/index.js:253:19)
          at rule (/Users/path/to/my/node_modules/css/lib/parse/index.js:561:21)
          at rules (/Users/path/to/my/node_modules/css/lib/parse/index.js:118:70)
          at stylesheet (/Users/path/to/my/node_modules/css/lib/parse/index.js:81:21)
          at Object.<anonymous>.module.exports [as parse] (/Users/path/to/my/node_modules/css/lib/parse/index.js:565:20)
          at getStylesFromClassNames (/Users/path/to/my/node_modules/jest-emotion/dist/index.js:258:40)
          at Object.print (/Users/path/to/my/node_modules/jest-emotion/dist/index.js:226:18)
          at printPlugin (/Users/path/to/my/node_modules/pretty-format/build/index.js:287:16)
          at prettyFormat (/Users/path/to/my/node_modules/pretty-format/build/index.js:485:16)
          at Object.<anonymous>.exports.serialize.data (/Users/path/to/my/node_modules/jest-snapshot/build/utils.js:172:34)
          at SnapshotState.match (/Users/path/to/my/node_modules/jest-snapshot/build/State.js:153:53)
          at _toMatchSnapshot (/Users/path/to/my/node_modules/jest-snapshot/build/index.js:197:32)
          at Object.toMatchSnapshot (/Users/path/to/my/node_modules/jest-snapshot/build/index.js:95:10)
          at Object.throwingMatcher (/Users/path/to/my/node_modules/jest-cli/node_modules/expect/build/index.js:320:33)
          at Object.toMatchSnapshot (/Users/path/to/my/__tests__/components/filter-drawer/filter-drawer.test.js:26:18)
          at Object.asyncJestTest (/Users/path/to/my/node_modules/jest-cli/node_modules/jest-jasmine2/build/jasmine_async.js:108:37)
          at resolve (/Users/path/to/my/node_modules/jest-cli/node_modules/jest-jasmine2/build/queue_runner.js:56:12)
          at new Promise (<anonymous>)
          at mapper (/Users/path/to/my/node_modules/jest-cli/node_modules/jest-jasmine2/build/queue_runner.js:43:19)
          at promise.then (/Users/path/to/my/node_modules/jest-cli/node_modules/jest-jasmine2/build/queue_runner.js:87:41)
          at <anonymous>
          at process._tickCallback (internal/process/next_tick.js:188:7)
        reason: 'property missing \':\'',
        filename: undefined,
        line: 1,
        column: 627,
        source: ';}.css-1odnewp{margin-top:20px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-1odnewp button{-webkit-flex:1;-ms-flex:1;flex:1;margin-right:15px;}.css-1odnewp button:last-child{margin-right:0;}' 
      }

Ошибка, выдаваемая Jest, где упоминаются все стили, с которыми у него были проблемы: 

There was an error parsing css in jest-emotion: ".css-8buf5s{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:32px;border-right:#DDD solid 1px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.css-8buf5s.light{background-color:white;}.css-8buf5s.dark{background-color:#F7F7F7;}.css-8buf5s:last-child:not(:first-child){border-right:none;}.css-1udpy4x{min-width:100%!important;}.css-1ywpeb7{-webkit-transition:width 0.25s ease;transition:width 0.25s ease;padding:0;width:0;}.css-1oux30j{max-height:100%;overflow:auto;margin:15px 20px;}.css-1oux30j div[class*="MuiFormControl"]{margin-bottom:20px;}.css-kt535y{false;}.css-1odnewp{margin-top:20px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-1odnewp button{-webkit-flex:1;-ms-flex:1;flex:1;margin-right:15px;}.css-1odnewp button:last-child{margin-right:0;}"

1 Ответ

1 голос
/ 12 апреля 2019

Как вы можете видеть ниже, у нас был компонент, который иногда возвращал логическое значение для стиля, если

props.mode === 'boxed' было ложным.

Когда мы изменили на троичный оператор, чтобы строка всегда возвращалась, она снова работает. К сожалению, ошибка, выдаваемая набором тестов, оказалась бесполезной, поэтому потребовалось много времени, чтобы разобраться во всех компонентах зависимостей, которые использовались в фактически тестируемом представлении. 

import styled from 'react-emotion';
import TextField from '../some/path';

// bad code
const StyledTextField = styled(TextField)(props => `
  ${props.mode === 'boxed' && (` 
    // some styles here
  `)}
`);

// fix
const StyledTextField = styled(TextField)(props => `
  ${props.mode === 'boxed' 
    ? (` 
      // some styles here
    `)
    : ''
  }
`);
...