Question

我正在尝试为<Router>内部的react组件创建快照测试。

这是我的考试：

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

这是每当我由Prettier自动保存文件时格式化的方式。如果我只使用单个组件，例如：

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

它以相同格式保存。但是，每当我尝试包装诸如<MemoryRouter>之类的另一个组件时，它都会像上面那样以破碎的格式保存。

我的.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抱怨这是预料之中的，因为eslint --fix是给我上述奇怪格式的原因。我最终将其放在一行上，例如：

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

然后关闭并重新打开我的VSCode。漂亮和eslint不再抱怨它，所以我很好。

React Router和Jest错误地格式化了漂亮的

0 个答案: