在开玩笑的测试中找不到在Redux Connect中的存储

Question

我在试图在我的玩笑测试中设置组件时会遇到以下错误：

不变违规：在上下文或 "连接(TestComponent("的道具。要么将根组件包裹在一个 ，或明确将"存储"作为道具传递给 " Connect(TestComponent("。

我的测试看起来像这样：

import React from 'react';
import { shallow } from 'enzyme';
import { Map } from 'immutable';
import { createStore } from 'redux';
import TestComponent from '../TestComponent ';
import { Provider } from 'react-redux';
describe('test ', () => {
  test(' testing', () => {
    const state = { blah: 1 };
    const reducer = s => s; //dummy reducer
    const store = createStore(reducer, state);
    const component = (
      <Provider store={store}>
        <TestComponent />
      </Provider>
    );
    const wrapper = shallow(component);
    let json = wrapper.html();
    expect(json).toMatchSnapshot();
  });
});

和正在测试的组件看起来像这样：

import React, { Component } from 'react';
import { connect } from 'react-redux';
class TestComponent extends Component {
  render = () => {};
}
function mapStateToProps(state) {
  return { blah: state };
}
export default connect(
  mapStateToProps,
  null
)(TestComponent);

我不确定这是怎么回事。对我来说，一切看起来都是犹太洁食。调用html()时找不到商店。

Answer 1

尝试使包装器组件一个函数而不是变量：

export const testWrapper = Component => {
  return (
    <Provider store={store}>
      {Component}
    </Provider>
  );
};
const wrapper = shallow(testWrapper(<TestComponent/>));
    let json = wrapper.html();
    expect(json).toMatchSnapshot();

还建议您研究Redux Mock商店进行测试。

Answer 2

这是解决方案，您需要创建模拟的store并将其传递给由connect函数包裹的组件。

index.ts：

import React, { Component } from 'react';
import { connect } from 'react-redux';
interface ITestComponentProps {
  blah: any;
  store: any;
}
export class TestComponent extends Component<ITestComponentProps> {
  constructor(props) {
    super(props);
  }
  public render() {
    return <div>{this.props.blah}</div>;
  }
}
function mapStateToProps(state) {
  return { blah: state };
}
export default connect(mapStateToProps)(TestComponent);

单元测试：

import React from 'react';
import { shallow } from 'enzyme';
import ConnectedTestComponent, { TestComponent } from './';
import configureMockStore from 'redux-mock-store';
const state = 1;
const mockStore = configureMockStore();
const store = mockStore(state);
describe('test', () => {
  it('t1', () => {
    const connetedTestComponentWrapper = shallow(<ConnectedTestComponent store={store} />);
    const testComponentWrapper = connetedTestComponentWrapper.find(TestComponent);
    expect(testComponentWrapper.prop('blah')).toBe(state);
    expect(testComponentWrapper.html()).toMatchSnapshot();
  });
});

单位测试结果具有100％覆盖范围：

 PASS  src/stackoverflow/57290601/index.spec.tsx
  test
    ✓ t1 (54ms)
-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |      100 |      100 |      100 |      100 |                   |
 index.tsx |      100 |      100 |      100 |      100 |                   |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 passed, 1 total
Time:        3.089s, estimated 5s

快照：

// Jest Snapshot v1
exports[`test t1 1`] = `"<div>1</div>"`;

这是完整的演示：https：//github.com/mrdulin/jest-codelab/tree/master/master/src/stackoverflow/57290601