使用 Enzyme 和 Jest 测试 Material-UI Select 控件

Question

我在测试 Material-UI 选择选项时遇到问题。这里我已经尝试测试所有选项都加载到控件中。但是当我进行控制台日志调试时，它不会在选项元素上显示任何内容。

另外，我注意到菜单项呈现在 Material-UI 的页面底部。有没有特定的方法来获得这些？以下是我尝试过的代码，

ColorSelect.jsx

    import React from 'react';
    import { FormControl, MenuItem, Avatar, TextField } from '@material-ui/core';
    import styled from "styled-components";

function ColorSelect(props) {
    return (
            <FormControl variant="outlined">
                <TextField
                    id="color-id-input"
                    select
                    value={props.color}
                    label={props.color == "" ? "Color" : ""}
                    InputLabelProps={{ shrink: false }}
                    variant="outlined"
                    error={props.error}
                    helperText={props.helpertext}
                >
                    <MenuItem style={{ fontSize: "13px" }} value="">
                        <em>None</em>
                    </MenuItem>
                    {
                        props.colors.map(color => (
                            <MenuItem key={"ColorNewLineMenuItem_" + color.colorCode} style={{ fontSize: "13px" }} value={color.colorCode}>
                                <div>
                                    <Avatar key={"ColorNewLineAvatar_" + color.colorCode} src={color.imageSrc} />
                                    <div>{color.name}</div>
                                </div>
                            </MenuItem>
                        ))
                    }
                </TextField>
            </FormControl>
        )
}

export default ColorSelect;

ColorSelect.test.js

import * as React from 'react';
import MockProvider from '../../mockProvider';
import * as data from '../../data/poData.json';
import { act } from '@testing-library/react';
import { mount } from "enzyme";

import ColorSelect from '../../../components/order/ColorSelect';

test("check colors dropdown loads correctly", async () => {

     wrapper = mount(<MockProvider><ColorSelect color="" colors={data.products[0].colors} /> 
               </MockProvider>);

     await act(async () => {
            wrapper.find({ 'id': "color-id-input" }).last().simulate("click")
        });

     wrapper.update();

     console.log(wrapper.debug()) // Can't see the menu items
}

mockProvider.js

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';

export default function MockProvider(props) {
    const mockStore = configureMockStore([thunk]);
    const store = mockStore({order: { status: 'SUCCEEDED', selectedPo: props.data, seletedProductIds: [], seletedLineItems: []}});
    return <Provider store={store}>{props.children}</Provider>;
}

我的 poData.json 如下所示，

{
    "id": "612a6a796cd84300df2f3263",
    "products": [
        {
            "poProductID": "612a6ac9bd6c2079cdaae9f1",
            "name": "AAAAA",
            "colors": [
                {
                    "colorCode": "1",
                    "name": "Pearl",
                    "imageSrc": "library/media-assets/2001/3001/3003.jpg"
                },
                {
                    "colorCode": "2",
                    "name": "Red",
                    "imageSrc": "/library/media-assets/2001/3009/3009.jpg"
                }
            ]
        }
    ]
}

这是日志显示的，

Answer 1

如果你想坚持使用酶，你必须更具体一点

首先，选择将角色添加到查找调用的按钮

const button = wrapper.find({ id: "color-id-input", role: "button" });

然后在事件对象中模拟mousedown事件sendingbutton:0

button.simulate("mousedown", {button: 0});

这就是我的方式，我可以在调试包装器时看到项目

test("check colors dropdown loads correctly", async () => {
  const wrapper = mount(
    <ColorSelect color="" colors={data.products[0].colors} />
  );

  const button = wrapper.find({ id: "color-id-input", role: "button" });
  button.simulate("mousedown", { button: 0 });

  wrapper.update();
  console.log(wrapper.debug()); // should see items
});

你想切换到 react 测试库，在测试第三方库时，酶有点麻烦，有时你需要知道实现细节（如本例，发送按钮：0）

Answer 2

您似乎正在将 react-testing-library 与酶混合和匹配。 我建议坚持两者之一。

也就是说，您可以使用 react-testing-library 为您的控件编写测试，如下所示：

import { act, render, fireEvent, prettyDOM
} from '@testing-library/react';
//... other imports

test("check colors dropdown loads correctly", async () => {
  const wrapper = render(<ColorSelect color="" colors={data.products[0].colors}/>);

  await act(async () => {
    fireEvent.mouseDown(wrapper.getByRole("button"));
  });
  
  const options = await wrapper.getAllByRole('option');

  options.forEach(x => console.log(prettyDOM(x)));

});

material-ui 中有 testing examples for Select control，您可以将其作为指导。