Question

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

＆＃13;

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)
    });
});

＆＃13;

<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>

＆＃13;

但是在控制台中有错误 - 不变违规：无法找到＆＃34;存储＆＃34;在＆＃34;连接（登录）＆＃34;。

的上下文或道具中

如何处理？

Answer 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 )

您无需对连接的组件进行单元测试，只需对不需要模拟商店等的Login组件进行单元测试。

希望有帮助。

Answer 2

我遇到了类似的问题，并且通过使用redux-mock-store进行商店模拟来解决了这个问题，并且我使用mount而不是shallow来实现带有redux的连接组件，如下所示：

alert(React.Children.count(this.props.children)

使用酶

2 个答案: