酶：安装未按预期工作

Question

我正在尝试使用Enzyme 和Jest 编写我的第一个测试。我最终总是将包装器转换为 Html() 字符串。然后像下面这样断言，即直接在 html 字符串上使用 indexOf merhod - 而不是直接使用安装包装对象上的酶 api 来查找 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(wrapper) 总是打印这个：

console.log 容器__tests__\Categories.test.tsx:20 ReactWrapper { 长度：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();
        });
    });