React Jest 测试 onSubmit

Question

我是新来的反应和笑话。我一直在到处寻找测试，但找不到任何有用的东西。这部分是因为我对它太陌生了，我不知道从哪里开始。所以请耐心等待。

我有一个添加到购物车的文件，它呈现一个表单，里面有一个按钮。按钮是另一个组件，所以我不想测试它。我必须测试表单的 onSubmit 函数。有什么想法吗？参考？

到目前为止，这是我的测试代码：

describe('AddToCart', () => {
  const React = require('react');
  const BaseRenderer = require('react/lib/ReactTestUtils');
  const Renderer = BaseRenderer.createRenderer();
  const ReactTestUtils = require('react-addons-test-utils');
  const AddToCart = require('../index.js').BaseAddToCart;

  it('Will Submit', () => {
    formInstance = ReactTestUtils.renderIntoDocument(<AddToCart product="" quantity=""/>);
    expect(ReactTestUtils.Simulate.onSubmit(formInstance)).toBeCalled();
  });
});

我收到这个错误：

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Answer 1

考虑使用 Jest with Enzyme。我认为它是反应中单元测试的好堆栈。

此外，我做了一个示例测试，用于测试 LogIn 组件中的 onSubmit 函数。

import React from 'react';
import {shallow} from 'enzyme';
import LogIn from './LogIn';

describe('<LogIn />', () => {
    const testValues = {
        username: 'FOO',
        password: 'BAZ',
        handleSubmit: jest.fn(),
    };

    it('Submit works', () => {

        const component = shallow(
            <LogIn {...testValues} />
        );
        component.find('#submitButton').simulate('click');
        expect(testValues.handleSubmit).toHaveBeenCalledTimes(1);
        expect(testValues.handleSubmit).toBeCalledWith({username: testValues.username, password: testValues.password});
    });
});

React Jest 测试 onSubmit

React Jest Testing onSubmit

reactjs

jestjs

jasmine2.0