方法“text”意味着在 1 个节点上运行。找到了 0 个

Question

[Create-React-App] Jest 和 Enzyme(3.9.0) 似乎无法从 Auth.jx 容器中找到我的 <Button/> 元素。 应用程序应呈现 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

我上面的评论探讨了您在组件上使用 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';
...

Answer 2

我认为您不应该在测试中在 wrapper 上调用 dive()。相反，你应该浅渲染你的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 文本 - 那么测试将失败。