Question

[Create-React-App] Jest 和酶（3.9.0）似乎无法从<Button/>容器中找到我的Auth.jx元素.. 应用程序应呈现Auth容器if(!isAuthernticated)，如果未提供任何输入，则应禁用该按钮。

我尝试了 ShallowWrapper :: dive（），但出现TypeError

TypeError: SHallowWrapper::dive() can only be called on components

Auth.jsx

    //...
    let errorMessage = null;
    let button=<Button id='Disabled' btnType="Success" disabled={false}>Disabled</Button>;
    let authRedirect = null;

    if (this.props.isAuthenticated) {
        authRedirect = <Redirect to={this.props.authRedirectPath}/>
    }
        if (this.state.controls.username.value && this.state.controls.password.value){

           button=<Button id='Login' btnType="Success">Login</Button>
          }
    return (
         <div>
        {authRedirect}
                    <form onSubmit={this.handleSubmit}>
                       {form}
                    {button}
                    </form>
        </div>
    )
}
 //...

Auth.test.js

import React from 'react';
import {shallow} from 'enzyme';
import Auth from '../containers/Auth/Auth';
import Button from '../components/Button/button';
import Input from '../components/Input/input';

describe('<Auth/>',() =>{
    let wrapper;
    beforeEach(()=>{
        wrapper=shallow(<Auth authRedirectPath='/' isAuthenticated={false}/>).dive()
    })

    //Test 1
    it('should render disabled button if no input has been specified ',()=>{
        expect(wrapper.find(Button).text()).toEqual('Disabled')
    });
})

Answer 1

我不认为您应该在测试中致电dive()上的wrapper。相反，您应该浅化呈现wrapper ，然后在找到的dive()上调用render()或Button来测试其文本。

所以，首先：

wrapper = shallow(<Auth authRedirectPath='/' isAuthenticated={false} />)

然后，当您想要find(Button)并在渲染时测试其文本时，可以执行以下任一操作：

expect(wrapper.find(Button).dive().text()).toEqual('Disabled')

// OR

expect(wrapper.find(Button).render().text()).toEqual('Disabled')

为了证明这一点，我在此code sandbox处重新创建了代码框架。您可以看到，特别是在Auth.test.js中，我是如何修改您的代码的我上面的代码行的原始测试。如果单击底部工具栏中的“测试”，则会看到测试通过。

如果您进入Auth.jsx，并且更改了username和password的值，从而影响了Button的文字，那么测试将失败。

Answer 2

我在上面的评论中探讨了您在组件上使用Redux的connect HOC。这就是为什么您无法访问所需组件的原因，因为它在树中更深。

我建议阅读我在Medium上的文章，在其中您可以找到有关实际问题以及适当解决方案的一些详细信息。

编辑

如果您仍然遇到相同的问题，建议您执行以下操作：

让我们假设您的Auth组件就是这样。

import React, { Component } from 'react';
import { connect } from 'react-redux';

export class Auth extends Component {
   // Something happens here.
}

export default connect(mapStateToProps, mapDispatchToprops)(Auth);

请注意，我在两种情况下都使用了export关键字。话虽如此，您无需连接Redux就可以测试适当的组件，并且还可以减少生成的树。

请注意在测试文件中导入命名的导出类：

...
import { Auth } from './Auth';
...

方法“文本”应在1个节点上运行。找到0个代替

2 个答案: