Question

考虑一个简单的React组件：

class Child extends React.Component {
    testMethod(): boolean {
        console.log('called testMethod!');
        return true;
    } 

    render() {
      return <div>Hello, World!</div>
    }
}

export default withParent(Child);

为了简单起见，

withParent是一个简单的HOC，它只返回子组件：

const withParent = (WrappedComponent): ComponentClass => {
    return class extends React.Component {
        render() {
            return <WrappedComponent { ...this.props } />;
        }
    }
}

现在，假设我有一个针对Child的简单酶测试。我希望能够对Child的各个方法进行单元测试，在本例中为方法testMethod：

import React from 'react';
import renderer from 'react-test-renderer';
import {
    configure,
    shallow
} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Child from './Child';

configure({ adapter: new Adapter() });

describe('ChildTests', () => {

    it('can handle calling testMethod', () => {
        const wrapper = shallow(<Child />);
        const instance = wrapper.instance();
        // how would I do something like wrapper.testMethod() here?
        const result = instance.testMethod();
        expect(result).toEqual(true);
    });
}

当Child组件被HOC包装时，是否可以访问和单元测试各个类方法？如果testMethod不是由HOC包装的，则可以访问并致电Child。

Answer 1

const instance = wrapper.dive().dive().dive().dive().instance();

我不得不深入研究包装组件的HOC的数量。

Answer 2

明确导出您的child组件，然后在测试中使用命名的import导入它。

方法如下：

export class Child extends React.Component {
    testMethod(): boolean {
        console.log('called testMethod!');
        return true;
    } 

    render() {
      return <div>Hello, World!</div>
    }
}

export default withParent(Child);

因此，这里有2个出口。让HOC（child）成为默认组件。

现在在测试中使用import { Child } from './Child';

import React from 'react';
import renderer from 'react-test-renderer';
import {
    configure,
    shallow
} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { Child } from './Child';

configure({ adapter: new Adapter() });

describe('ChildTests', () => {

    it('can handle calling testMethod', () => {
        const wrapper = shallow(<Child />);
        const instance = wrapper.instance();
        const result = instance.testMethod();
        expect(result).toEqual(true);
    });
}

如何在单元测试中访问子组件的功能

2 个答案: