React-bootstrap Typeahead не работает со снимками Jest - PullRequest
Новая
       103

React-bootstrap Typeahead не работает со снимками Jest

0 голосов
/ 02 октября 2019

У меня есть очень простой AsyncTypeahead пример из документации API: 

    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 для этого компонента, я бы написал что-то вроде этого: 

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();
    });
});

Это не работает. Я получаю эту ошибку:

TypeError: Невозможно прочитать свойство 'style' из 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)

Это известная проблема с начальной загрузкой при загрузке?

1 Ответ

1 голос
/ 09 октября 2019

Была такая же проблема, и это было мое решение. Culprit - это Hintcontainer для typeahead и, в частности, эта функция: 

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/en-US/docs/Web/API/CSSStyleDeclaration

Таким образом, использование window.getComputedStyle не работает при замене на общий объект. Самое простое решение для меня - это тоже смоделировать window.getComputedStyle. Итак, первая часть состоит в том, чтобы смоделировать функцию getComputedStyle, которая вызывает ошибку. 

global.window.getComputedStyle = jest.fn(x=>({}));

Но createNodeMock все еще необходим для предоставления пустого объекта стиля для входного узла.

TLDR;Снимки работают с этим фрагментом 

   global.window.getComputedStyle = jest.fn(x=>({}));
        const createNodeMock = (element) => ({
                style: {},
        });
   const options={createNodeMock};
   const tree = renderer
            .create(form,options)
            .toJSON();
...