模拟删除素材-ui芯片答案

【问题标题】：simulate delete material-ui Chip模拟删除素材-ui芯片
【发布时间】：2018-02-12 00:15:04
【问题描述】：

我想编写一个测试，删除我的 InputTag 组件中的 material-ui Chip 组件。知道如何实现吗？这是我迄今为止最好的镜头：

import React from 'react';
import InputTag from '../../src/components/InputTag.js';
import renderer from 'react-test-renderer';
import {shallow, mount} from 'enzyme';
import {spy} from 'sinon';

describe('components/InputTag', () => {
    it('should call onRquestDelete method', (done) => {
        const deleteTag = spy();
        const wrapper = mount(
                <InputTag
                    addTag={() => {}}
                    deleteTag={deleteTag}
                    changeTag={() => {}}
                    tags={[{key: "t1", label: "test"}]}
                    tag=""
                />
        );
        expect(wrapper.find('Chip')).toHaveLength(1);

        spy(wrapper.instance(), 'handleRequestDelete'); 
       wrapper.find('Chip').first().find('DeleteIcon').simulate('click');

        expect.assertions(2);
        setTimeout(() => {
            expect(wrapper.instance().handleRequestDelete.callCount).toEqual(1);
            expect(deleteTag.callCount).toEqual(1);
            done();
        }, 0);
    });
}

有问题的行是

wrapper.find('Chip').first().find('DeleteIcon').simulate('click');

如何找到并单击 DeleteIcon 或对应的操作，即 handleDeleteIconClick？

【问题讨论】：

标签： reactjs sinon material-ui enzyme

【解决方案1】：

我在使用 Jest 和 React 测试库进行测试时遇到了同样的问题。

单击芯片组件不起作用。也尝试按角色按钮搜索并触发点击也不起作用。

我终于可以使用 querySelector DOM API 按类名.MuiChip-deleteIcon 进行搜索了。

这里是代码

it("should delete the chip component", async () => {
    const { queryByText, container } = render(
      <Chips />
    );

    expect(queryByText("chip1")).toBeDefined();

    const deleteIcon = container.querySelector(".MuiChip-deleteIcon");

    await wait(() => {
      fireEvent.click(deleteIcon);
    });

    await wait(() => {
      expect(queryByText("chip1")).toBeNull();
    });
});

【讨论】：

【解决方案2】：

我知道这是一个老问题，但是为了那些从搜索中找到这个问题的人（比如我），我就是这样解决它的。

为了方便测试，我使用了一个 mock jest 函数（通常它是从父组件传下来的）：

const handleChipDelete = jest.fn();

然后我使用page.find("WithStyles(Chip)").prop("onDelete")();调用onDelete函数，你不需要测试DeleteIcon调用onDelete函数，因为Material-UI测试，你需要确保onDelete函数被调用（在我的例子中是onDelete 函数在父组件中测试）。

这是我的完整测试：

it("deletes chips when the delete button is clicked", () => {
      var taggedPost = {
        title: "",
        content: "",
        tags: ["testing"],
        tagField: ""
      };

      const page = shallow(
        <MemoryRouter>
          <PostCreateForm
            post={taggedPost}
            handleFormChange={handleFormChange}
            handleChipDelete={handleChipDelete}
            handleSubmit={handleSubmit}
            postCanBeSubmitted={postCanBeSubmittedTrue}
            loggedIn={loggedIn}
          />
        </MemoryRouter>
      );
      expect(handleChipDelete.mock.calls.length).toEqual(0);
      page.find("WithStyles(Chip)").prop("onDelete")();
      expect(handleChipDelete.mock.calls.length).toEqual(1);
    });

【讨论】：

【解决方案3】：

我终于找到了办法：

    // enzyme does not support touchTap currently
    // @see https://github.com/airbnb/enzyme/issues/99
    const node = ReactDOM.findDOMNode(
        ReactTestUtils.findRenderedDOMComponentWithTag(
            wrapper.instance(), 'svg'
        )
    );
    ReactTestUtils.Simulate.touchTap(node);

我猜这不是最好的选择，因为我在完整的包装器实例中搜索 svg，因为我必须搜索 svg，但它至少可以工作

【讨论】：