将 Enzyme 3.2.0 与使用 Styled Components 的 React 16 应用程序一起使用时更改快照

Question

我在使用 Enzyme 进行快照测试时遇到了一些问题，我不知道我做错了什么。

我正在使用带有 Enzyme (3.2.0) 和 Styled Components 2.2.3 的 CRA（使用 React 16.1）。

这是我要测试的组件：

// @flow

import React, { Component } from 'react'
import { Switch } from 'react-router'
import { Route } from 'react-router-dom'
import styled from 'styled-components'
import routes from './routes'
import DebugMenu from './components/DebugMenu'

type Props = {
}

const RouteWithSubRoutes = (route) => {
  return (
    <Route path={route.path} render={props => {
      return <route.component {...props} routes={route.routes} />
    }} />
  )
}

class App extends Component<Props> {
  render () {
    return (
      <AppWrapper>
        {process.env.NODE_ENV === 'development' &&
          <DebugMenu routes={routes} />
        }
        <Switch>
          {routes.map((route, i) => (
            <RouteWithSubRoutes key={i} {...route} />
          ))}
        </Switch>
      </AppWrapper>
    )
  }
}

const AppWrapper = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
`

export default App

这是我的测试：

import React from 'react'
import { shallow } from 'enzyme'
import App from './App'
import { MemoryRouter } from 'react-router-dom'
// import renderer from 'react-test-renderer'

describe('App Specs', () => {
  it('Should match with the snapshot for this component', () => {
    const wrapper = shallow(
      <MemoryRouter initialEntries={['/']}>
        <App />
      </MemoryRouter>
    )
    expect(wrapper).toMatchSnapshot()
  })
})

我已经通过设置 setupTest.js 文件为 Enzyme 配置了我的测试设置：

import Enzyme, { shallow, render, mount } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import toJson from 'enzyme-to-json'
import 'jest-styled-components'

// React 16 Enzyme adapter
Enzyme.configure({ adapter: new Adapter() })
// Make Enzyme functions available in all test files without importing
global.shallow = shallow
global.render = render
global.mount = mount
global.toJson = toJson

// Fail tests on any warning
console.error = message => {
  throw new Error(message)
}

当我在监视模式下运行yarn test 时，每次保存时，此测试的快照都会更改并因此失败：

 FAIL  src/App.spec.js
  ● App Specs › Should match with the snapshot for this component

    expect(value).toMatchSnapshot()

    Received value does not match stored snapshot 1.

    - Snapshot
    + Received

    @@ -29,11 +29,11 @@
             "canGo": [Function],
             "createHref": [Function],
             "entries": Array [
               Object {
                 "hash": "",
    -            "key": "0af0tp",
    +            "key": "u968bq",
                 "pathname": "/",
                 "search": "",
                 "state": undefined,
               },
             ],
    @@ -43,11 +43,11 @@
             "index": 0,
             "length": 1,
             "listen": [Function],
             "location": Object {
               "hash": "",
    -          "key": "0af0tp",
    +          "key": "u968bq",
               "pathname": "/",
               "search": "",
               "state": undefined,
             },
             "push": [Function],
    @@ -79,11 +79,11 @@
               "canGo": [Function],
               "createHref": [Function],
               "entries": Array [
                 Object {
                   "hash": "",
    -              "key": "0af0tp",
    +              "key": "u968bq",
                   "pathname": "/",
                   "search": "",
                   "state": undefined,
                 },
               ],
    @@ -93,11 +93,11 @@
               "index": 0,
               "length": 1,
               "listen": [Function],
               "location": Object {
                 "hash": "",
    -            "key": "0af0tp",
    +            "key": "u968bq",
                 "pathname": "/",
                 "search": "",
                 "state": undefined,
               },
               "push": [Function],

      at Object.it (src/App.spec.js:14:21)
          at Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:169:7)

为什么每次保存时这个键值都会改变？这是由样式化组件引起的吗？

我做错了什么？

Answer 1

事实证明，这个变化的键实际上并不是由 Styled Components 引起的，而是由在 Memory Router 中包装一个组件引起的。

当使用一个没有封装在内存路由器中的组件的浅层渲染时，快照实际上每次都匹配。

这篇文章描述了一个非常相似的问题：https://swaac.tamouse.org/testing/2017/08/02/TIL-enzyme-shallow-render-with-memoryrouter-doesnt-work/

在 Enzyme repo 上跟进这个问题：https://github.com/airbnb/enzyme/issues/1391