无法读取测试库中expect函数中null的属性“innerHTML”(React)

Question

我在试着测试一个上下文。在测试中，有一个使用上下文的测试组件。在测试expect函数时(注释中提到)，会出现此错误

TypeError:无法读取属性'innerHTML‘的null

这对我来说是不合理的为什么它是空的。我已经分别测试了组件，以了解它们的外观，没有什么问题。

这里是我的测试代码，我在注释中提到了不工作的

    class CartContextTest extends React.Component {

    constructor(props) {
        super(props);
        this.state={
            productName: '',
            priceInUSD: 0,
            priceInEUR: 0,
            attribute: ''
        }
    }
    render() {
        return (
            <CartContextProvider>
                <CartContext.Consumer>
                    {context=>{
                        const {productsToPurchase, totalPrice, addProduct, decreaseProduct} = context

                        return(<>
                            <input type='text' title='product-name'
                                   onChange={ (e)=>{this.setState({productName: e.target.value})} }
                            />
                            <input type='text' title='price-in-usd'
                                   onChange={ (e)=>{this.setState({priceInUSD: e.target.value})} }
                            />
                            <input type='text' title='price-in-eur'
                                   onChange={ (e)=>{this.setState({priceInEUR: e.target.value})} }
                            />
                            <input type='text' title='attribute'
                                   onChange={ (e)=>{this.setState({attribute: e.target.value})} }
                            /> {/*There will be only ONE attribute for simplicity purposes*/}

                            <button title='add-product' onClick={()=>{
                                addProduct(this.state.productName,[{currency: 'USD', amount: this.state.priceInUSD},{currency: 'EUR', amount: this.state.priceInEUR}] , this.state.attribute)
                            }}>Add</button>

                            {/*This is must be rendered, but expect(queryByTitle("Name iphone-xr").innerHTML).toBe("iphone-xr") doesn't work*/}
                            {productsToPurchase.map(product=>{
                                return(<div>
                                    <h1 title={"Name " + product.itemId}>{product.itemId}</h1>
                                    <button title={"Plus " + product.itemId} onClick={()=>{addProduct(product.itemId, product.price, product.attributes)}}>+</button>
                                    <h1 title={"qty " + product.itemId}>{product.qty}</h1>
                                    <button title={"Minus " + product.itemId} onClick={()=>{decreaseProduct(product.itemId, product.attributes)}}>-</button>
                                    <>{product.price.map(price=>{
                                        return(<h1 title={price.currency + " " + product.itemId}>{price.amount}</h1>)
                                    })}</>
                                    <h1>{product.attributes}</h1>
                                </div>)
                            })}
                        </>)

                    }}
                </CartContext.Consumer>
            </CartContextProvider>
        );
    }
}

describe("Testing the ability to add and remove products from the cart", ()=>{

    const {queryByTitle} = render(<CartContextTest/>)
    const nameInput = queryByTitle("product-name")
    const usdInput = queryByTitle("price-in-usd")
    const eurInput = queryByTitle("price-in-eur")
    const attributeInput = queryByTitle("attribute")
    const addProductBtn = queryByTitle("add-product")

    it('All the starter components should be rendered', ()=> {
        expect(nameInput).toBeTruthy()
        expect(usdInput).toBeTruthy()
        expect(eurInput).toBeTruthy()
        expect(attributeInput).toBeTruthy()
        expect(addProductBtn).toBeTruthy()
    })

    it('Should add and remove products successfully', ()=>{

        // Add iPhone XR
        fireEvent.change(nameInput, {target:{value: "iphone-xr"}})
        fireEvent.change(usdInput, {target:{value: "600"}})
        fireEvent.change(eurInput, {target:{value: "500"}})
        fireEvent.change(attributeInput, {target:{value: "blue"}})
        fireEvent.click(addProductBtn)

        // This is the expect function that I talk about
        expect(queryByTitle("Name iphone-xr").innerHTML).toBe("iphone-xr")

    })
})

Answer 1

1. 将诸如className之类的标识符或其他选项附加到基于类的组件上。
2. 异步呈现组件
3. 使用基本的DOM方法(如querySelector )来处理呈现为HTML元素的组件

参考文献1

参考文献2

    class CartContextTest extends React.Component {

    //..
    render() {
        return (
            <div className="container">
            <CartContextProvider>
               //...
            </CartContextProvider>
        );
    }
}




describe("Testing the ability to add and remove products from the cart", ()=>{
    //...
    it('Should add and remove products successfully', async()=>{
       await render(<CartContextTest/>)
       const queryByTitle = document.querySelector(".container")

        //...

        // This is the expect function that I talk about
        expect(queryByTitle.innerHTML).toBe("iphone-xr")

    })
})