javascript - 如何使用酶作为实例()测试功能组件内部的方法,为浅包装器返回 null?
问题描述
假设我有一个像这样的简单组件。
import React, { useState } from "react";
const Counter = () => {
const [counter, setCounter] = useState(0);
const incCounter = () => {
setCounter(counter + 1);
};
return (
<>
<p>Counter value is: {counter}</p>
<button className="increment" onClick={incCounter}>
Up
</button>
</>
);
};
export default Counter;
我想用 jest 和酵素编写测试用例。但counter.instance()
总是返回 null。任何帮助将不胜感激。
import React from "react";
import Counter from "../components/Counter";
import {
mount,
shallow
} from "./enzyme";
describe("Counter", () => {
let counter;
beforeEach(() => {
counter = shallow( < Counter / > );
})
it("calls incCounter function when button is clicked", () => {
console.log(counter)
counter.instance().incCounter = jest.fn();
const incButton = counter.find("button");
incButton.simulate("click");
expect(counter.incCounter).toBeCalled();
})
});
解决方案
从这个文档:https ://airbnb.io/enzyme/docs/api/ShallowWrapper/instance.html
注意:只能在也是根实例的包装器实例上调用。在 React 16 及更高版本中,instance() 为无状态功能组件返回 null。
测试组件行为,而不是实现细节。
例如
index.jsx
:
import React, { useState } from 'react';
const Counter = () => {
const [counter, setCounter] = useState(0);
const incCounter = () => {
setCounter(counter + 1);
};
return (
<>
<p>Counter value is: {counter}</p>
<button className="increment" onClick={incCounter}>
Up
</button>
</>
);
};
export default Counter;
index.spec.jsx
:
import React from 'react';
import Counter from './';
import { shallow } from 'enzyme';
describe('Counter', () => {
let counter;
beforeEach(() => {
counter = shallow(<Counter />);
});
it('calls incCounter function when button is clicked', () => {
expect(counter.find('p').text()).toBe('Counter value is: 0');
const incButton = counter.find('button');
incButton.simulate('click');
expect(counter.find('p').text()).toBe('Counter value is: 1');
});
});
覆盖率 100% 的单元测试结果:
PASS src/stackoverflow/59475724/index.spec.jsx (10.045s)
Counter
✓ calls incCounter function when button is clicked (17ms)
-----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files | 100 | 100 | 100 | 100 | |
index.jsx | 100 | 100 | 100 | 100 | |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 11.697s
源代码:https ://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59475724
推荐阅读
- symfony - 未找到 webpack encore dev-server /
- python - 如何在 python 中获取邮政编码的州/省代码?
- mysql - 绘制 mariadb 数据库的填充演变
- google-cloud-platform - 使用 Terraform 从快照创建 Cloud SQL 数据库
- unit-testing - 测试 BehaviorSubject 不会引发访问类型错误
- java - 杰克逊连载一对多关系
- c# - Failure to create a SqlDataSourceEnumerator
- c# - Serilog 模板和 Microsoft.Extensions.Logging
- cmd - 查找和替换字符串的批处理命令
- java - 如何使用 Selenium Java 处理 https://www.spicejet.com/ 的 PASSENGERS 字段的静态下拉列表