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

Question

[Create-React-App] Jest 和 Enzyme(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

我上面的评论探讨了您在组件上使用 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 的情况下测试正确的组件，并且它还会减少生成的树。

注意在测试文件中导入命名导出class：

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

Answer 2

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

所以，首先：

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我如何使用上面的代码行修改您的原始测试。如果您单击底部工具栏中的 "Tests"，您将看到测试通过。

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

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

Method “text” is meant to be run on 1 node. 0 found instead

tdd

unit-testing

reactjs

jestjs

babel-jest

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

Method “text” is meant to be run on 1 node. 0 found instead

tdd

unit-testing

reactjs

jestjs

babel-jest

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