Question

我正在使用react-boilerplate来构建我的应用程序。这次进行测试。所以我在用玩笑和酵素。基于此示例，在反应样板仓库中。我正在尝试遵循this的示例来测试我的容器，但由于我现在使用react-testing-library而不是enzyme来使用React-boiler板，因此浅渲染存在一些问题。 >

我无法按预期匹配快照。这是我的代码。

我的组件：

class MyComponent extends React.Component {
  renderNotification = () => {
    const { userData } = this.props
    if (!userData.id) return null
    return <NotificationContainers userData={userData} />
  }

  render() {
    return (
      <div>
        <Switch>
          <AuthRoute {...this.props} path="/warehouse" component={WarehousePage} />
          <AuthRoute {...this.props} path="/billInfo" component={BillInfo} />
          <Route path="/not_found" component={NotFoundPage} />
          <AuthRoute {...this.props} path="/" component={HomePage} />
        </Switch>
        {this.renderNotification()}
        <FlashMessage />
      </div>
    )
  }
}

const withSaga = injectSaga({ key: context, saga })
const withReducer = injectReducer({ key: context, reducer })

export default compose(
  withReducer,
  withSaga
)(MyComponent)

MyComponent.propTypes = {
  userData: PropTypes.object.isRequired,
  location: PropTypes.object,
  getAuthenticationData: PropTypes.func.isRequired,
}

我的单元测试：

import React from 'react'
import { Provider } from 'react-redux'
import { browserHistory } from 'react-router-dom'
import { shallow } from 'enzyme'
import configureStore from '../../../configureStore'
import MyComponent from '../index';

describe('<MyComponent />', () => {
  const mockGetAuthenticationDataFunc = jest.fn()

  const props = {
    userData: { id: '1', value: 'data' },
    getAuthenticationData: mockGetAuthenticationDataFunc,
  }

  let store;

  beforeAll(() => {
    store = configureStore({}, browserHistory);
  });

  it('should match the snapshot', () => {
    const wrapper = shallow(<Provider store={store}><MyComponent {...props} /></Provider>).dive()
    expect(wrapper).toMatchSnapshot()
  })
})

快照：

exports[`<MyComponent /> should match the snapshot 1`] = `
<withReducer(withSaga(AppPrivate))
  getAuthenticationData={[MockFunction]}
  userData={
    Object {
      "id": "1",
      "value": "data",
    }
  }
/>
`;

如何渲染整个组件？谢谢

使用Redux反应锅炉板容器单元测试

0 个答案: