text jest / styled-components快照bug ...

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了text jest / styled-components快照bug ...相关的知识，希望对你有一定的参考价值。

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Link snapshot 1`] = `
Object {
  "container": <div>
    <a
      class="sc-bdVaJa dOvzuO"
      href="https://google.com"
    >
      This is a link
    </a>
  </div>,
  "debug": [Function],
  "getAllByAltText": [Function],
  "getAllByLabelText": [Function],
  "getAllByPlaceholderText": [Function],
  "getAllByTestId": [Function],
  "getAllByText": [Function],
  "getAllByTitle": [Function],
  "getAllByValue": [Function],
  "getByAltText": [Function],
  "getByLabelText": [Function],
  "getByPlaceholderText": [Function],
  "getByTestId": [Function],
  "getByText": [Function],
  "getByTitle": [Function],
  "getByValue": [Function],
  "queryAllByAltText": [Function],
  "queryAllByLabelText": [Function],
  "queryAllByPlaceholderText": [Function],
  "queryAllByTestId": [Function],
  "queryAllByText": [Function],
  "queryAllByTitle": [Function],
  "queryAllByValue": [Function],
  "queryByAltText": [Function],
  "queryByLabelText": [Function],
  "queryByPlaceholderText": [Function],
  "queryByTestId": [Function],
  "queryByText": [Function],
  "queryByTitle": [Function],
  "queryByValue": [Function],
  "rerender": [Function],
  "unmount": [Function],
}
`;

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Link snapshot 1`] = `
Object {
  "baseElement": <html>
    <head>
      <style
        data-styled-components=""
      >
        
        
/* sc-component-id: sc-bdVaJa */
.sc-bdVaJa {} .dOvzuO{-webkit-text-decoration:none;text-decoration:none;color:#007C98;-webkit-transition:all 300ms cubic-bezier(0.77,0,0.175,1);transition:all 300ms cubic-bezier(0.77,0,0.175,1);} .dOvzuO:hover,.dOvzuO:focus{-webkit-text-decoration:underline;text-decoration:underline;color:#005E73;}
      </style>
    </head>
    <body>
      <div>
        <a
          class="sc-bdVaJa dOvzuO"
          href="https://google.com"
        >
          This is a link
        </a>
      </div>
    </body>
  </html>,
  "container": <div>
    <a
      class="sc-bdVaJa dOvzuO"
      href="https://fairfx.com"
    >
      This is a link
    </a>
  </div>,
  "debug": [Function],
  "getAllByAltText": [Function],
  "getAllByLabelText": [Function],
  "getAllByPlaceholderText": [Function],
  "getAllByTestId": [Function],
  "getAllByText": [Function],
  "getAllByTitle": [Function],
  "getAllByValue": [Function],
  "getByAltText": [Function],
  "getByLabelText": [Function],
  "getByPlaceholderText": [Function],
  "getByTestId": [Function],
  "getByText": [Function],
  "getByTitle": [Function],
  "getByValue": [Function],
  "queryAllByAltText": [Function],
  "queryAllByLabelText": [Function],
  "queryAllByPlaceholderText": [Function],
  "queryAllByTestId": [Function],
  "queryAllByText": [Function],
  "queryAllByTitle": [Function],
  "queryAllByValue": [Function],
  "queryByAltText": [Function],
  "queryByLabelText": [Function],
  "queryByPlaceholderText": [Function],
  "queryByTestId": [Function],
  "queryByText": [Function],
  "queryByTitle": [Function],
  "queryByValue": [Function],
  "rerender": [Function],
  "unmount": [Function],
}
`;

import React from 'react'
import { render, cleanup } from 'react-testing-library'

import Link from './index'

afterEach(cleanup)

test('Link snapshot', () => {
  const tree = render(<Link href="https://google.com">This is a link</Link>)
  expect(tree).toMatchSnapshot()
})

{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ],
    "react"
  ],
  "plugins": [
    "transform-object-rest-spread",
    [
      "babel-plugin-styled-components",
      {
        "displayName": true
      }
    ]
  ],
  "env": {
    "test": {
      "presets": [
        [
          "env",
          {
            "modules": "commonjs",
            "debug": false
          }
        ],
        "react",
        "jest"
      ]
    },
    "production": {
      "plugins": [
        "transform-object-rest-spread",
        [
          "babel-plugin-styled-components",
          {
            "displayName": false
          }
        ]
      ],
    }
  }
}

以上是关于text jest / styled-components快照bug ...的主要内容，如果未能解决你的问题，请参考以下文章

styled-components - 测试 createGlobalStyle

使用 Jest-Enzyme 测试样式组件

由于不同的类索引，使用 Styled-Components 的快照测试在 CI 管道中失败

如何在 React-Native 项目中使用 Jest 测试样式化组件？

如何使用 Jest 和/或 Enzyme 测试由 React 组件呈现的样式和媒体查询

text 如何在项目创建后使用Jest实施vue单元测试？