React Typescript facing issue with enzyme [duplicate]

Question

I have a component app.tsx

import React, { useState } from "react";

const TestCom = () => {
 return(
     <>
     <div className="head">hey there</div>
     <select name="xyz" id="uni">
         <option value="abc">abc</option>
     </select>
     </>
 )
}

export default TestCom

I am testing it with jest and enzyme app.test.tsx

import  TestCom  from "./foo";
import { shallow } from 'enzyme';
import React from "react";


 test("basic test", () => {
 const app= shallow(<TestCom />)
  expect(app.find('div.head')).to.have.lengthOf(1);
 });

whenever I am using .to its throwing error

Property 'to' does not exist on type 'JestMatchersShape<Matchers<void, ShallowWrapper<HTMLAttributes,
 any, Component<{}, {}, any>>>, Matchers<Promise<void>, ShallowWrapper<HTMLAttributes, any, 
Component<...>>>>'.ts(2339)

I have tried troubleshooting but I am not able to find a fix for it

Answer 1

Until you add chai library, there is no .to. method. Jest own matchers have .toHaveLength() that you can use:

expect(app.find('div.head')).toHaveLength(1);