使用 Enzyme 测试 Redux 连接的组件

IT技术 reactjs enzyme
2021-04-29 19:22:32

用酶测试 redux 连接组件有问题

import React from 'react'
import { shallow, mount, render } from 'enzyme'
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
import Login from '../../src/routes/login/components/Login'

configure({ adapter: new Adapter() })

describe('<Login />', () => {
    test('component has form-group nodes', () => {
        const component = shallow(<Login />).dive()
        expect(component.find('.form-group')).to.have.length(2)
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

但是在控制台中有错误 - 不变违规：在“Connect(Login)”的上下文或props中找不到“store”。

怎么处理？？

2个回答

我遇到了类似的问题，我设法通过将redux-mock-store用于我的商店模拟来解决它，并且我使用 mount 而不是浅层来使用 redux 到达我的连接组件，如下所示：

import React, { Component } from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import App from '../../src/App';

it('renders without crashing', () => {

  const mockStore = configureStore();
  const initialState = {
    someState: [],
    someReducer: {},
  };

  const store = mockStore(initialState);

  const wrapper = mount(
    <Provider store={store}>
      <App />
    </Provider>
  );

  console.log(wrapper.debug())

  expect(wrapper.find('.app-container')).to.have.lengthOf(1);
});

从 [redux doc][1] https://github.com/reduxjs/redux/blob/master/docs/recipes/WritingTests.md#connected-components阅读此最佳实践

您遇到的问题是因为您正在测试连接的组件，您应该按照官方文档的建议进行操作：

export class Login extends Component { /* ... */ }

export default connect(mapStateToProps)(Login )

您可以简单地对登录组件进行单元测试，而不是对连接的组件进行单元测试，而无需模拟商店等。

希望能帮助到你。

其它你可能感兴趣的问题
上一篇将应用程序渲染到正文时，语义 UI 侧边栏会使用 ReactJS 引发控制台错误 下一篇如何为 react-big-calendar (fullcalendar.js) 设置 momentLocalizer (moment.js)？