Question

我想编写一个测试，它会删除InputTag组件中的material-ui芯片组件。知道如何实现吗？这是我迄今为止最好的一次拍摄：

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（ '芯片'）第一（）找到（ 'DeleteIcon'）模拟（ '点击'）;。。。

如何查找并单击DeleteIcon或handleDeleteIconClick的相应操作？

Answer 1

我知道这是一个古老的问题，但是为了人们从搜索中找到这个问题（例如我），这就是我如何解决它。

我使用了一个模拟笑话功能来简化测试（通常是从父组件传递下来的）：

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 2

我终于找到了办法：

    // 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 3

我在Jest和React Testing库中进行了相同的问题测试。

单击“芯片”组件无效。同样，尝试按角色按钮搜索并点击也没有用。

我终于可以使用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();
    });
});

模拟删除材料-ui芯片

3 个答案: