Enzyme/React/Redux - 不变违规。

Question

有一些我在没有单元测试的情况下编写的遗留代码（我知道，我知道，糟糕的 engi，没有 cookie），但我们很匆忙，确实需要网站在几天内上线。

现在我正在努力偿还技术债务。大部分都很简单，但我仍然需要测试反应组件。尝试使用 JSDom 和 enzyme 这样做，但经常出现此错误：

Invariant Violation: Could not find "store" in either the context or props of "Connect(ThankYou)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(ThankYou)".

所以我的问题是：是什么导致了这个错误，我应该如何处理这个问题？我确定我会有更多问题，但这是目前最大的障碍。

因此，这是测试设置：

import React from 'react';
import chai from 'chai';
const expect = chai.expect;
import { shallow, mount } from 'enzyme';

import ThankYou from '../src/frontend/js/containers/ThankYou';

describe('<ThankYou />', () => {
  it('is trying to get React testing to work', () => {
    const wrapper = shallow(<ThankYou />);
    //(I know this test *will* fail, but it's failing in the wrong way.)
    expect(wrapper).to.eql({}); 
  });
});

这是组件本身。

class ThankYou extends Component {
  constructor(props){
    super(props);
  }

  render () {
    return (
      <Paper zDepth={1} >
        <div>
          {thankYou.map((pgraph, i) => (<div key={"pg" + i}>
            {pgraph[this.props.language]}
          </div>))}
        </div>
        <Social />
      </Paper>
    );
  }
}

// reduxify is a library I wrote which maps 
// state, actions, and dispatch to props. 
// source: https://github.com/brianboyko/reduxify/blob/master/reduxify.js
export default reduxify(actions, ['language'], ThankYou);

Answer 1

您正在将包含在 reduxify 中的 class 导入到您的测试中。该组件希望通过上下文传递给 redux store，因此您看到的错误警告您情况并非如此。

您可以模拟 context 以提供虚拟存储，或者导入没有 reduxify 包装器的组件并测试该组件：

// Export the class before it becomes wrapped
export class ThankYou extends Component {
  ...
}

export default reduxify(actions, ['language'], ThankYou);


// Update the test to import the basic class
import { ThankYou } from '../src/frontend/js/containers/ThankYou';

describe('<ThankYou />', () => {
  it('is trying to get React testing to work', () => {
    const wrapper = shallow(<ThankYou />);
    expect(wrapper).to.eql({}); 
  });
});

希望对您有所帮助。

Enzyme/React/Redux - 不变违规。

Enzyme/React/Redux - Invariant Violation.

unit-testing

mocha.js

reactjs

redux

enzyme