反应，TypeScript 和 RxJS 测试与 Jest 不起作用

Question

我在ReactTypeScript中有一个简单的按钮组件，我使用fromEvent方法将点击事件转换为Observable包装器RxJs它在RxJS中被fromEvent(el:HTMLElement, eventType:string)

type NullableObservarbel = Observable<any> | null
type NUllabe = HTMLElement | null
export const makeObservable = (el:NUllabe, eventType:string):NullableObservarbel => el ? fromEvent(el, eventType) : null;
type Props = {
interval?: number // timee interval in millisecond
label?:string
}
const Button:SFC<Props> = ({label}:Props) => {
const btn = useRef(null)
useEffect(() => {
if(btn.current !== null){
const observable = makeObservable(btn.current, 'click')
}
}, [])
return <button ref={btn}>{label}</button>
}

如您所见makeObservable方法，

1. 我想用 Jest 测试此方法 -->如果我传递正确的HTMLElement和字符串作为参数，它应该返回Observable
我想
2. 模拟点击事件，然后我想检查'返回的可观察量是否正常工作，并且该可观察量的订阅者正在触发。

但是这些测试都没有按预期工作。

这是第一个测试总是通过，即使没有通过，第二个总是失败。

import React from 'react'
import { shallow, mount } from 'enzyme'
import Button, {makeObservable} from './Button'
import {Observable} from 'rxjs'
describe('Observable', () => {
it('should create observable', () => {
const wrapper = shallow(<Button />)
const el = wrapper.find('button')
const observable = makeObservable(el, 'click') // here i have the issue
expect(observable instanceof Observable).toBe(true)
})
it('should create observable', () => {
const wrapper = shallow(<Button />)
const el = wrapper.find('button')
const observable = makeObservable(el, 'click')
let _six = 0;
if(observable){
observable
.pipe(map(e => 6))
.subscribe(s => {
_six = s
})
}
el.simulate('click')
expect(_six).toEqual(6) // fails always
})
})

最大的问题是我无法从wrapper获取HTMLElement类型，所以我只使用find按钮并将结果作为元素传递，但是

expect(observable instanceof Observable).toBe(true)如果我将null作为el的参数传递给makeObservable，则此行始终传递事件。

请帮助我正确测试这些方案。

Answer 1

你可以尝试使用testing-library/react而不是使用enzymeshallow，我已经将data-testid="btn"属性添加到你的组件中，然后从我使用的测试中testing-library/react渲染您的按钮，然后获取按钮的HTMLElement，我使用了这个testid属性。

它在测试和浏览器中按预期工作，请检查源代码。

按钮.tsx

import React, { SFC, useRef, useEffect, useState, RefObject} from 'react'
import {fromEvent, Observable} from 'rxjs'
import {map, debounceTime} from 'rxjs/operators'
type NullableObservarbel = Observable<any> | null;
type NUllabe = HTMLButtonElement | null; // more precise type
export const makeObservable = (el:NUllabe, eventType:string):NullableObservarbel => el ? fromEvent(el, eventType) : null;
type Props = {
interval?: number // timee interval in millisecond
label?:string
}
export type Result = [RefObject<HTMLButtonElement>, number]
// decoupled it from Button function body because you can test this later.
export const useEls = ():Result => {
const btn: RefObject<HTMLButtonElement> = useRef(null)
const [count, updateCount] = useState<number>(0)
useEffect(() => {
const el = btn ? btn.current : null
if(el){
updateCount(1)
let _count = count
const observerble =  makeObservable(el, 'click');
if(observerble){
observerble.pipe(
map(e => _count++),
//debounceTime(400)
).subscribe(c => updateCount(c))
}
}
}, [])
return [btn, count]
} 
const Button:SFC<Props> = (props:Props) => {
const [btn, count] = useEls()
return <button data-testid="btn" ref={btn}>Hello {count}</button>
}

export default Button

Button.test.ts

import React from 'react'
import Button, {makeObservable} from './Button'
import {Observable} from 'rxjs'
import {map, debounceTime} from 'rxjs/operators'
import {render, fireEvent} from '@testing-library/react'
describe('Observable', () => {
it('should create observable', () => {
const {getByTestId} = render(<Button/>)
const el = getByTestId('btn') as HTMLButtonElement
const observable = makeObservable(el, 'click')
expect(observable instanceof Observable).toBe(true)
})
it('should return false', () => {
const observable = makeObservable(null, 'click')
expect(observable instanceof Observable).toBe(false)
})
it('Should subscribe observable', (done) => {
const {getByTestId} = render(<Button/>)
const el = getByTestId('btn') as HTMLButtonElement
const observerble =  makeObservable(el, 'click');
if(observerble){
let count = 1
observerble
.pipe(
map(e => count++),
debounceTime(400) // delay clicks if you want
)
.subscribe(s => {
expect(s).toEqual(6)// test just inside the subscription
done();
})
fireEvent.click(el)
fireEvent.click(el)
fireEvent.click(el)
fireEvent.click(el)
fireEvent.click(el)
fireEvent.click(el)
}
})
})

此测试按预期运行，但存在模拟的点击和延迟。

---

反应测试库