Question

在重构某些代码后，我在测试中更新道具时遇到了问题。我使用自定义渲染和模拟axios请求，但我的组件没有重新渲染（？）。在异步ComponentDidMount（）中的组件中，我执行POST请求。当我在浏览器中进行手动测试时，一切正常。

我收到了由getByText（）产生的异常：

找不到带有文本的元素：/ Tasty Metal Keyboard / i。这个可能是因为文本被多个元素分解了。在这的情况下，您可以为文字匹配器提供一个功能，使您的匹配器更加灵活。

def function(x,i_add = False):
    if i_add:
        y = x+1
        return x, y;
    else:
        return x

var1, var2 = function(3, True)

print(var1)
print(var2)

模拟 /axios.js

    /** import React, mockAxios etc. */
    const middleware = applyMiddleware(thunk);


    const inputRootPath = document.createElement('input');
    inputRootPath.id = 'rootPath';
    inputRootPath.hidden = true;
    inputRootPath.value = 'http://localhost/';


    /**
     * 
     * @param {*} ui komponent
     * @param {*} param { initialState, store }
     */
    export function renderWithRedux(
        ui,
        { initialState, store = createStore(rootReducer, initialState, compose(middleware)) } = {},
    ) {
        return {
            ...render(
                <Provider store={store}>
                    {ui}
                </Provider>,
                { container: document.body.appendChild(inputRootPath) }
            ),
            store,
        };
    }


       test('should render annex list', async () => {

const agBuilder = () => {
        return {
            ID: faker.random.number(),
            NM: faker.commerce.productName(),

        };
    };


    const agreements = [agBuilder(), agBuilder(), agBuilder(), agBuilder()];



     mockAxios.post.mockResolvedValueOnce({ data: { ANLST: agreements } });

            const { getByText, } = await renderWithRedux(<ConnectedAgreements />);

            const optionRE = new RegExp(`${agreements[0].NM}`, 'i');
            expect(getByText(optionRE)).toBeInTheDocument();

            mockAxios.post.mockClear();
        });

Answer 1

我找到了解决方案。事实证明，在进行一些代码重构之后，我有了另一个reducer，它执行CDM中调用的调度动作。它破坏了axios响应，因此我的测试代码应该具有：

mockAxios.post.mockResolvedValueOnce({ data: { ANLST: agreements, CLS: {}, EXLDT: {} } });

缺少CLS和EXLDT属性会导致测试失败。但是，开玩笑并不会显示出某些内容丢失或未定义的__（ツ）_ /¯的错误。 getByText（）产生的异常具有误导性。

具有模拟axios响应的自定义渲染连接的React组件-getBy *查询引起误解

1 个答案: