如何解决开玩笑-调用没有酶的React Component函数
我正在编写一个React组件Product
的测试。我正在使用不带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);
});
});
OR
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中。但是,如果有人也能解释内部工作原理,那将是很好的。
谢谢。
解决方法
要对此进行测试,您需要调用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);
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。