React-bootstrap Typeahead不适用于Jest快照 [英] React-bootstrap Typeahead does not work with Jest snapshots
问题描述
我有一个来自API文档的非常简单的 AsyncTypeahead 示例:
I have a very simple AsyncTypeahead example from the API documentation :
import {AsyncTypeahead} from "react-bootstrap-typeahead";
import React, {Component} from "react";
class AsyncTest extends Component<Props, State> {
constructor() {
super()
this.state = {
isLoading:false,
options:{}
}
}
render() {
return <AsyncTypeahead
disabled={true}
isLoading={this.state.isLoading}
onSearch={query => {
this.setState({isLoading: true});
fetch(`https://api.github.com/search/users?q=123`)
.then(resp => resp.json())
.then(json => this.setState({
isLoading: false,
options: json.items,
}));
}}
options={this.state.options}
/>
}
}
export default AsyncTest;
现在,如果我想为此组件创建一个Jest快照测试,那么我将编写如下内容:
Now if I want to create a Jest snapshot test of this component then I would write something like this :
import React from 'react';
import renderer from "react-test-renderer";
import AsyncTest from "./AsyncTest";
describe('Async Test', () => {
test('test', () => {
const test= <AsyncTest/>
expect(renderer.create(test).toJSON()).toMatchSnapshot();
});
});
这不起作用.我收到此错误:
This does not work. I get this error :
TypeError:无法读取null的属性样式"
TypeError: Cannot read property 'style' of null
at Window.getComputedStyle (A:\frontend\node_modules\jest-environment-jsdom\node_modules\jsdom\lib\jsdom\browser\Window.js:524:20)
at copyStyles (A:\frontend\node_modules\react-bootstrap-typeahead\lib\containers\hintContainer.js:61:27)
at HintedInput.componentDidMount (A:\frontend\node_modules\react-bootstrap-typeahead\lib\containers\hintContainer.js:113:9)
at commitLifeCycles (A:\frontend\node_modules\react-test-renderer\cjs\react-test-renderer.development.js:10930:22)
这是bootstrap typeahead的已知问题吗?
Is this a known issue with bootstrap typeahead?
推荐答案
遇到了同样的问题,这就是我的解决方案. 罪魁祸首是预先输入的提示容器,具体来说就是以下功能:
Had the same problem and this was my solution. Culprit is the Hintcontainer of typeahead and specifically this function:
function copyStyles(inputNode, hintNode) {
var inputStyle = window.getComputedStyle(inputNode);
/* eslint-disable no-param-reassign */
hintNode.style.borderStyle = interpolateStyle(inputStyle, 'border', 'style');
hintNode.style.borderWidth = interpolateStyle(inputStyle, 'border', 'width');
hintNode.style.fontSize = inputStyle.fontSize;
hintNode.style.lineHeight = inputStyle.lineHeight;
hintNode.style.margin = interpolateStyle(inputStyle, 'margin');
hintNode.style.padding = interpolateStyle(inputStyle, 'padding');
/* eslint-enable no-param-reassign */
}
createMockNode的问题:inputNode中的样式不是常见的对象,而是
CSSStyleDeclaration,并且我没有费心去完全模拟它.
https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleDeclaration
Problem with createMockNode: Styles from the inputNode are not a common object, but a
CSSStyleDeclaration, and I did not bother to mock this completely.
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration
因此,当与一个公共对象交换出去时,使用window.getComputedStyle不起作用. 对我来说,最简单的解决方案就是模拟window.getComputedStyle. 因此,第一部分是模拟触发错误的getComputedStyle函数.
So, using window.getComputedStyle does not work when swapped out with a common object. Most simple solution to me, was to mock window.getComputedStyle, too. So, First part is to mock the getComputedStyle function which is triggering the error.
global.window.getComputedStyle = jest.fn(x=>({}));
但是仍然需要 createNodeMock 为输入节点提供一个空的样式对象.
But createNodeMock is still needed to provide an empty style object for the input node.
TLDR;快照适用于此代码段
global.window.getComputedStyle = jest.fn(x=>({}));
const createNodeMock = (element) => ({
style: {},
});
const options={createNodeMock};
const tree = renderer
.create(form,options)
.toJSON();
这篇关于React-bootstrap Typeahead不适用于Jest快照的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!