时间戳

首页 > 解决方案 > 使用 Enzyme 和 Jest 测试 Material-UI Select 控件

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

问题描述

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

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

颜色选择.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;

颜色选择.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"
                }
            ]
        }
    ]
}

这是日志显示的，

测试调试 测试调试

标签： reactjsunit-testingjestjsmaterial-uienzyme

解决方案

您似乎正在将反应测试库与酶混合和匹配。我建议坚持两者之一。

也就是说，您可以使用 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)));

});

有一些控制测试示例Select，material-ui您可以将其作为指导。

推荐阅读