使用 Jest 更改元素大小
Change element size using Jest
我的组件中有以下代码
var rect = ReactDOM.findDOMNode(this).getBoundingClientRect();
我使用 d3js 并在组件中渲染图表。但是当我 运行 测试时,有任何 svg 标签。我认为这是因为所有 rect 的 字段都等于 0.
这是 console.log(rect) 在浏览器中的输出:
ClientRect {top: 89, right: 808, bottom: 689, left: 8, width: 800…}
当我 运行 测试时:
{ bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0 }
那么有没有办法设置元素的大小?
我的解决方案是模拟 getBoundingClientRect
(我目前使用的是 jest 16.0.1)
describe('Mock `getBoundingClientRect`', () => {
beforeEach(() => {
Element.prototype.getBoundingClientRect = jest.fn(() => {
return {
width: 120,
height: 120,
top: 0,
left: 0,
bottom: 0,
right: 0,
}
});
});
it('should mock `getBoundingClientRect`', () => {
const element = document.createElement('span');
const rect = element.getBoundingClientRect();
expect(rect.width).toEqual(120);
});
});
不要忘记把 getBoundingClientRect
的原始值放回去,因为更改它可能会影响其他测试。
此外,在 beforeEach
中无需执行此操作:beforeAll
即可。
describe("Mock `getBoundingClientRect`", () => {
let boundingClientRect;
const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
beforeAll(() => {
Element.prototype.getBoundingClientRect = () => boundingClientRect;
});
afterAll(() => {
Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
});
it("should mock `getBoundingClientRect`", () => {
const element = document.createElement("div");
boundingClientRect = new DOMRect(0, 0, 120, 120);
const rect = element.getBoundingClientRect();
expect(rect.width).toEqual(120);
});
});
我的想法来自 this answer
现有答案模拟 Element.prototype.getBoundingClientRect
。这将影响测试中 all DOM 元素的表观大小。
如果你事先知道你关心的元素是什么,你可以在单个元素上模拟getBoundingClientRect
。这不会影响其他元素的外观尺寸。如果你想让两个元素在同一个测试中有不同的大小,这就是你需要做的方式。
describe("Mock `getBoundingClientRect` on a single element", () => {
it("should mock `getBoundingClientRect`", () => {
const myElement = document.createElement("div");
myElement.getBoundingClientRect = jest.fn(() =>
new DOMRect(0, 0, 120, 120);
);
const rect = element.getBoundingClientRect();
expect(rect.width).toEqual(120);
});
});
我的组件中有以下代码
var rect = ReactDOM.findDOMNode(this).getBoundingClientRect();
我使用 d3js 并在组件中渲染图表。但是当我 运行 测试时,有任何 svg 标签。我认为这是因为所有 rect 的 字段都等于 0.
这是 console.log(rect) 在浏览器中的输出:
ClientRect {top: 89, right: 808, bottom: 689, left: 8, width: 800…}
当我 运行 测试时:
{ bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0 }
那么有没有办法设置元素的大小?
我的解决方案是模拟 getBoundingClientRect
(我目前使用的是 jest 16.0.1)
describe('Mock `getBoundingClientRect`', () => {
beforeEach(() => {
Element.prototype.getBoundingClientRect = jest.fn(() => {
return {
width: 120,
height: 120,
top: 0,
left: 0,
bottom: 0,
right: 0,
}
});
});
it('should mock `getBoundingClientRect`', () => {
const element = document.createElement('span');
const rect = element.getBoundingClientRect();
expect(rect.width).toEqual(120);
});
});
不要忘记把 getBoundingClientRect
的原始值放回去,因为更改它可能会影响其他测试。
此外,在 beforeEach
中无需执行此操作:beforeAll
即可。
describe("Mock `getBoundingClientRect`", () => {
let boundingClientRect;
const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
beforeAll(() => {
Element.prototype.getBoundingClientRect = () => boundingClientRect;
});
afterAll(() => {
Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
});
it("should mock `getBoundingClientRect`", () => {
const element = document.createElement("div");
boundingClientRect = new DOMRect(0, 0, 120, 120);
const rect = element.getBoundingClientRect();
expect(rect.width).toEqual(120);
});
});
我的想法来自 this answer
现有答案模拟 Element.prototype.getBoundingClientRect
。这将影响测试中 all DOM 元素的表观大小。
如果你事先知道你关心的元素是什么,你可以在单个元素上模拟getBoundingClientRect
。这不会影响其他元素的外观尺寸。如果你想让两个元素在同一个测试中有不同的大小,这就是你需要做的方式。
describe("Mock `getBoundingClientRect` on a single element", () => {
it("should mock `getBoundingClientRect`", () => {
const myElement = document.createElement("div");
myElement.getBoundingClientRect = jest.fn(() =>
new DOMRect(0, 0, 120, 120);
);
const rect = element.getBoundingClientRect();
expect(rect.width).toEqual(120);
});
});