Javascript 用重复动作开玩笑

我试图用

jest

实现

快照

，但遇到了一个问题。解决方案可能很简单，但我找不到

LoginForm.js

class LoginForm extends React.Component {
    constructor(props) {
        super(props)
        }
    }
    componentWillMount(){
        this.props.startSpinner()
    }
    render(){
        return(....)
    }
}

LoginForm.spec.js

it('should render snapshot', () => {
    const component = renderer.create(
            <LoginForm />
    )
    const tree = component.toJSON()
    expect(tree).toMatchSnapshot()
})

当我运行测试时，它抛出这个错误，不仅是这个操作，而且是所有被称为

redux

操作的函数

TypeError:this.props.startSpinner不是函数

---

如何让

jest

更好地使用此

redux

操作？

您忘了在单元测试中作为道具通过

startSpinner

。如果只需要测试渲染函数，则应传递类似于

noop

函数的内容（lodash提供一个）

it（'应该呈现快照'，（）=>{
const component=renderer.create(
)
const tree=component.toJSON（）
expect（tree.toMatchSnapshot（））
})

---

对于redux操作，我将分别测试它们（jest快照对它们也很好）。

我将分别测试redux功能，并将startSpinner作为模拟函数传递

e、 g:

const mockFn=jest.fn（）
const component=renderer.create(
)
expect（mockFn.tohavebeencall（））.toBe（true）

我认为您没有正确应用测试。必须分别测试动作、减速器和组件

测试失败，因为LoginForm组件试图在未被提供程序包装的情况下使用connect函数，因此它试图访问不存在的存储

要在测试中实现SnapSot，您应该首先模拟一个商店，那里已经有一个很好的模拟，您可以在这里找到它：

然后，您必须配置您的存储，在我的项目中，我会这样做，根据您的意愿进行更改：

// Import your actions and their names (I separate the names in a 
// different file to avoid typos.
import * as actions from '../../src/actions';
import * as types from '../../src/actions';

// You must import an Initial state or create one, I usually import
// the one I have in the reducer.
import { INITIAL_STATE } from '../../src/reducers/AuthReducer'
// Import your middleware and redux mock store
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import MockAdapter from 'axios-mock-adapter';

// --- Mocking config --> Crete your store
const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
let store = mockStore(INITIAL_STATE);

// Clear actions before each time
beforeEach(() => {
  store.clearActions();
});

现在只需测试您的操作：

describe('[ ScannerActions ]', () => {
  describe('*** toggleCamera()', () => {
    it('Should dispatch TOGGLE_CAMERA action', () => {
      store.dispatch(actions.toggleCamera());
      expect(store.getActions()).toMatchSnapshot();
    })
  });
});

---

如果要确保调用了startSpinner（），可以传入一个mock:

const mockStartSpinner=jest.fn（）。否则（）=>{}是一个非常好的noop，没有必要为此引入整个lodash库！
const mockFn = jest.fn()
const component = renderer.create(
   <LoginForm startSpinner={mockFn} />
)
expect(mockFn.toHaveBeenCalled()).toBe(true)

// Import your actions and their names (I separate the names in a 
// different file to avoid typos.
import * as actions from '../../src/actions';
import * as types from '../../src/actions';

// You must import an Initial state or create one, I usually import
// the one I have in the reducer.
import { INITIAL_STATE } from '../../src/reducers/AuthReducer'
// Import your middleware and redux mock store
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import MockAdapter from 'axios-mock-adapter';

// --- Mocking config --> Crete your store
const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
let store = mockStore(INITIAL_STATE);

// Clear actions before each time
beforeEach(() => {
  store.clearActions();
});

describe('[ ScannerActions ]', () => {
  describe('*** toggleCamera()', () => {
    it('Should dispatch TOGGLE_CAMERA action', () => {
      store.dispatch(actions.toggleCamera());
      expect(store.getActions()).toMatchSnapshot();
    })
  });
});