javascript - Jest - 不使用 Enzyme 调用 React 组件函数
问题描述
我正在为 React Component 编写测试Product
。react-renderer
我正在使用没有或的简单 Jest 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。但是,如果有人也可以解释内部工作原理,那就太好了。
谢谢你。
解决方案
要对此进行测试,您需要一个调用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);
});
});
推荐阅读
- regex - 逐行增量替换文本
- azure - 如何在 Azure DevOps 构建管道中排除一个分支
- java - 什么是“程序化服务器端包含”?
- angular - Angular 在 ngFor 循环中生成组件
- laravel - 在 laravel nova 资源中的 creationRules 上为 3 个字段添加唯一验证
- angular - AG-Grid 使用字段名称替换创建行数据数组
- php - Swoole php 模块:未定义符号:spl_ce_Countable 问题
- python - 如何激活安装了 pyenv 的 virtualenv
- symfony - Symfony DDD + 事件溯源与相关对象一起工作
- python - 如何在进行图像分割时修复“元组索引超出范围”?