Более красивое форматирование неправильно с React Router и Jest - PullRequest
Новая
       6

Более красивое форматирование неправильно с React Router и Jest

0 голосов
/ 22 сентября 2018

Я пытаюсь создать снимок теста для компонента реагирования внутри <Router>.

Вот мой тест: 

test('Landing snapshot', () => {
  const c = create(<MemoryRouter>
    <Landing />
                   </MemoryRouter>).toJSON();
  expect(c).toMatchSnapshot();
});

Вот как он форматируется всякий раз, когда я автоматически сохраняю файл Prettier.Если я просто использую один компонент, такой как: 

const c = create(<Landing />).toJSON();

, он сохраняется в том же формате.Но всякий раз, когда я пытаюсь обернуть другой компонент, такой как <MemoryRouter>, он сохраняется в неправильном формате, как указано выше.

My .prettierc 

{
    "useTabs": false,
    "printWidth": 80,
    "tabWidth": 2,
    "singleQuote": true,
    "trailingComma": "none",
    "jsxBracketSameLine": false,
    "parser": "babylon",
    "noSemi": true,
    "rcVerbose": true
}

package.json 

{
  "name": "some-application",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "start": "cross-env NODE_ENV=development parcel src/index.html -p 3000",
    "build": "cross-env NODE_ENV=production parcel build index.html --public-url",
    "e2e": "cypress open",
    "lint:js": "eslint src/**/**/*.js src/**/**/*.jsx tests/**/**/*.js",
    "lint:style": "stylelint src/**/**/*.css src/**/**/*.scss",
    "test": "jest",
    "test:watch": "jest --watch"
  },
  "dependencies": {
    "babel-preset-react-app": "^3.1.1",
    "bootstrap": "^4.1.3",
    "cross-env": "^5.2.0",
    "cypress": "^3.0.2",
    "parcel-bundler": "^1.9.7",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-router-dom": "4.2.2",
    "reactstrap": "^6.4.0",
    "whatwg-fetch": "^2.0.4"
  },
  "devDependencies": {
    "babel-eslint": "^9.0.0",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.9.1",
    "jest": "^23.5.0",
    "prettier": "^1.13.5",
    "prettierrc": "0.0.0-5",
    "react-test-renderer": "^16.5.2",
    "stylelint": "^9.3.0",
    "stylelint-config-standard": "^18.2.0"
  }
}

eslintrc: 

{
  "extends": "airbnb",
  "plugins": ["react"],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true,
      "ecmaVersion": 6,
      "impliedStrict": true
    }
  },
  "rules": {
    "react/no-did-mount-set-state": 0,
    "react/prop-types": 0,
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "jsx-a11y/anchor-is-valid": [ "error", {
      "components": [ "Link" ],
      "specialLink": [ "to" ]
    }]
  },
  "env": {
    "browser": true,
    "mocha": true,
    "jest": true
  },
  "globals": {
    "Cypress": true,
    "cy": true
  }
}

Редактировать:

Используя cli, я получаю правильное форматирование: 

kevinml$ prettier ./src/__tests__/Landing.test.jsx
[warn] Ignored unknown option `{ "noSemi": true }`.
[warn] Ignored unknown option `{ "rcVerbose": true }`.
import React from 'react';
import { create } from 'react-test-renderer';
import { MemoryRouter } from 'react-router-dom';
import Landing from '../components/Landing';

test('Landing snapshot', () => {
  const c = create(
    <MemoryRouter>
      <Landing />
    </MemoryRouter>
  ).toJSON();
  expect(c).toMatchSnapshot();
});

Так что, похоже, моя проблема в том, как записать в файл,Я использую VSCode с "prettier.eslintIntegration": true,, поэтому Prettier автоматически форматирует мой код, а затем передает его в eslint --fix.

Я использовал prettier path/to/file.js --write, чтобы исправить файл.Теперь Эслинт жалуется, что ожидается, так как eslint --fix был тем, что дало мне странное форматирование выше.Я закончил тем, что поместил это в одну строку как:

const c = create(<MemoryRouter><Landing /></MemoryRouter>).toJSON();

Затем закрыл и снова открыл мой VSCode.Преттиер и Эслинт больше не жалуются на это, так что я в порядке.

...