模拟删除material-ui芯片

Question

我想编写一个测试，删除我的 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 操作？

Answer 1

终于找到方法了：

    // 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，但它至少有效

Answer 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);
    });

Answer 3

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

点击芯片组件无效。还尝试按角色按钮搜索并点击也不起作用。

我终于可以使用 querySelector DOM API.

按 class 名称 .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();
    });
});

模拟删除material-ui芯片

simulate delete material-ui Chip

sinon

reactjs

material-ui

enzyme