Question

我正在尝试测试带有酶的Header中是否存在带有props的LoginContainer组件，但我没有运气。

这是我的主要应用程序：

import React from 'react'
import Header from '../components/Header'
import LoginContainer from './LoginContainer'

const App = () => (
    <Header login={<LoginContainer />} />
)
export default App

我的标题：

import React from "react";
const Header = ({login}) =>
    <header role="banner">
        {login}
    </header>
export default Header

这是我的测试：

import React from 'react'
import { shallow } from 'enzyme'
import Header from '../components/Header'

const setup = props => {
    const component = shallow(
        <Header {...props} />
    )
    return {
        component: component
    }
}
describe('Header component', () => {
    it('should render login', () => {
        const { component } = setup();
        console.log(component.props({ login })) //this is undefined
    })
})

问题是当我运行测试时，似乎登录（LoginContainer）道具未定义。有人可以建议吗？

Answer 1

你应该先获得实例。

注意：在浅包装器上调用时，.props（）将返回组件呈现的根节点上的props的值，而不是组件本身。要返回整个React组件的props，请使用wrapper.instance（）。props。请参阅.instance（）=＆gt; ReactComponent

e.g。

            it('should have props', () => {                
                const l = <div>Login ...</div>;
                const {component} = setup({login:l});
                console.log(component.instance().props.login);
                expect(component.instance().props.login).to.exist;
            });

Answer 2

你没有传递任何东西进行设置。

import React from 'react'
import { shallow } from 'enzyme'
import Header from '../components/Header'

const setup = props => {
    const component = shallow(
        <Header {...props} />
    )
    return {
        component: component
    }
}
describe('Header component', () => {
    it('should render login', () => {
        const { component } = setup({ login: <LoginContainer/> });
        expect(component.props().login).toBeDefined()
    })
})

使用ReactJS中的Enzyme来定义组件/道具的测试

2 个答案: