ts2339怎么解决？ 使用带有测试库/反应的打字稿

Question

I got an error message " Property 'toggled' does not exist on type 'HTMLElement'.ts(2339) "

Strangely, My test case all have succeeded. But, In testing file, There have occured error message about ts.2339.

What shall I do to solve this problem?

component...
<Container data-testid={"list-element-toggle"} toggled={state[data.id - 1]}>.  * style.div``
  <Content data-testid={"list-element-content"} toggled={state[data.id - 1]}>. * style.div``
...

testing file...
expect(getAllByTestId("list-element-toggle")[0].toggled).toEqual(true);
expect(getAllByTestId("list-element-content")[0].toggled).toEqual(true);

• I think of it had been occured why the toggle has other HTML DOM Element. So, I had this trouble.

Answer 1

testing-library/react is not checking the props of the component. Probably you should have a logic inside Container and Content that is based on toggled prop.

For example inside Content :

export function Content({ toggled }) {
  return (
    <div>
    {toggled ? : <p>I am toggled</p> : null}
    </div>
  );
} 

Then in the test:

import { render, screen } from '@testing-library/react';

render(<App />);
expect(screen.getByText("I am toggled")).toBeInTheDocument();

Answer 2

I solved-self my problem the 'toggle' has a html dom element. but, I want to fire for specific button was in other place.

I had selected the button for test, it solved it