Question

我正在尝试使用Enzyme和Jest编写我的第一个测试。我最终总是将包装器转换为Html（）字符串。然后使用indexOf merhod直接在html字符串上断言，而不是直接在mount包装器对象上使用酶apis来查找dom对象。

  const wrapper = mount(<Admin title="Mock Admin Client"  restClient={ jest.fn().mockImplementation(()=>{
                                    return {
                                                total : 1,
                                                data: 
                                                    [{
                                                        id: "0300b4cf-4888-4e73-b4e1-25cf4686e05c",
                                                        name: "cat2",
                                                        displaySequence: 121
                                                    }]
                                            }
                                })}>
                                    <Resource options={{ label: 'Categories' }} name="category" list={CategoryList}/>                                    
                                </Admin>
                             );
                  console.log(wrapper)           ;
        expect(wrapper.children().html().indexOf("cat2") > 0).toBeTruthy();
        expect(wrapper.children().html().indexOf("0300b4cf-4888-4e73-b4e1-25cf4686e05c") > 0).toBeTruthy();
        expect(wrapper.children().html().indexOf("121") > 0).toBeTruthy();

console.log（包装器）总是打印出来：

console.log containers__tests __ \ Categories.test.tsx：20 ReactWrapper {length：1}

另外，如果我尝试使用shallow或render - 那就永远无效了。即.html()不会在这些函数上输出任何内容。只适用于mount

对此的任何帮助都非常感谢。

Answer 1

也许您遇到的问题是因为异步休息呼叫。使用Enzyme和Jest测试异步React代码很棘手。重要的是利用Jasmine / Jest done method。以下是a great article的示例：

it('should display message retrieved with ajax request', 
    async (done) => {
       const fakePromise = Promise.resolve(mockResponse(
           200,
           null,
           JSON.stringify({message: message})
        ));
        window.fetch = jest.fn().mockImplementationOnce(() => {
            return fakePromise
        });
        expect.assertions(2); //check if all assertions called
        const info = mount(<Info infoUrl = {url} />);
        await Promise.all([fakePromise]);
        setImmediate(() => {
            try {
                expect(info).toHaveState('message', message);
                expect(info).toIncludeText(message);
            } catch (e) {
                done.fail(e);
            }
            done();
        });
    });

酶：mount无法按预期工作

1 个答案: