Question

我有一些我没有进行单元测试的遗留代码（我知道，我知道，糟糕的工程，没有cookie），但是我们匆匆忙忙，并且需要在几天之内上网。

现在我试图偿还技术债务。大部分都很简单，但我还是要测试反应成分。尝试使用JSDom和酶这样做，但经常会出现这个错误：

不变违规：无法找到＆＃34;存储＆＃34;无论是在上下文中＆＃34;连接（谢谢你）＆＃34;的道具。将根组件包装在一个，或明确传递＆＃34;存储＆＃34;作为支柱＆＃34;连接（THANKYOU）＆＃34;

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

所以，这是测试的设置：

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中包含的类导入到测试中。该组件期望通过上下文传递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 - 不变违规。

1 个答案: