用酶与Jest测试材料-UI选择控制

Question

我有一个问题的测试材料-UI选择选项。在这里，我尝试测试所有选项都加载在控件中。但是，当我放置控制台日志调试时，它不会在options元素上显示任何内容。

此外，我已经注意到，菜单项呈现在页面底部的资料-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

你似乎在用酶混合和匹配反应测试库。我建议坚持两种方法中的一种。

尽管如此，您可以使用react测试库为您的控件编写测试，如下所示：

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中，您可以遵循它作为指南。

Answer 2

如果你想坚持酶的话，你就得更具体一点

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

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

然后模拟事件对象中的mousedown事件发送 ( button: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)。