Jest - 在没有酶的情况下调用 React 组件函数

Question

我正在为 React Component Product编写测试。 我使用的是简单的 Jest，没有react-renderer或enzyme ，我的目标是暂时保持这种方式。 我需要测试一个组件的功能，但无法通过 jest 直接调用它。 下面给出的代码。

成分：

import React, { Component } from 'react';

class Product extends Component {
    state = {
        heading: `Old Heading`
    };

    changeHeading() {
        this.setState({ heading: `New Heading` });
    }

    render() {
        return (
            <div>
                <p data-testid='heading'> {this.state.heading} </p>
            </div>
        );
    }
}

export default Product;

Jest测试：

import React from 'react';
import { render } from 'react-dom';
// import { act } from 'react-dom/test-utils';
import Product from './Product';


let container = null;

beforeEach(() => {
    container = document.createElement('div');
    document.body.appendChild(container);
});

afterEach(() => {
    document.body.removeChild(container);
    container = null;
});

describe(`Testing Product Component`, () => {
    it('renders without crashing', () => {
        // act(() => {
        //     render(<Product />, container);
        // });
        const result = render(<Product />, container);
        const heading = container.querySelector("[data-testid='heading']");
        console.log(heading);
        expect(heading).toBe(`Old Heading`);
        result.changeHeading();
        expect(heading).toBe(`New Heading`);
        ReactDOM.unmountComponentAtNode(div);
    });
});

或者

   it('renders without crashing', () => {
        const productComponent = <Product />;
        render(productComponent, container);
        const heading = container.querySelector("[data-testid='heading']");
        console.log(heading);
        expect(heading).toBe(`Old Heading`);
        productComponent.changeHeading();
        expect(heading).toBe(`New Heading`);
        ReactDOM.unmountComponentAtNode(div);
    });

但它没有奏效。 如何从我的笑话测试中的组件访问changeHeading函数？ 并调用它来更改<p>标签的内容？

编辑

如果需要，我将暂时留在 react-test-library 中。 但是，如果有人也能解释内部工作原理，那就太好了。

谢谢你。

Answer 1

为了测试它，您需要一个调用changeHeading()的用户交互。 在您的测试中，当您执行const result = render(<Product />, container); 您正在存储对组件 DOM 节点的引用。

因此，您需要修改您的组件才能进行交互：

import React, { Component } from 'react';

class Product extends Component {
    state = {
        heading: `Old Heading`
    };

    changeHeading() {
        this.setState({ heading: `New Heading` });
    }

    render() {
        return (
            <div>
                <p data-testid='heading'> {this.state.heading} </p>
                <button onclick={this.changeHeading}></button>
            </div>
        );
    }
}

export default Product;

你的测试将是：

import React from 'react';
import { render } from 'react-dom';
import { act } from 'react-dom/test-utils';
import Product from './Product';


let container = null;

beforeEach(() => {
    container = document.createElement('div');
    document.body.appendChild(container);
});

afterEach(() => {
    document.body.removeChild(container);
    container = null;
});

describe(`Testing Product Component`, () => {
    it('renders without crashing', async () => {
        act(() => {
            render(<Product />, container);
        });

        let heading = container.querySelector("[data-testid='heading']");
        expect(heading).toBe(`Old Heading`);

        const button = container.querySelector('button');

        await act(async () => {
            button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
        });

        heading = container.querySelector("[data-testid='heading']");
        expect(heading).toBe(`New Heading`);
        ReactDOM.unmountComponentAtNode(div);
    });
});