导入React组件时发生错误“目标容器不是DOM元素”

Question

I want to try to test react hook (in this case it isn't hook yet, I just tried simple function as component). I have this index.js

import React, { useState } from "react";

export const Counter = () => {
  const [count, setCount] = useState(0);

  function increaseCount() {
    setCount(count => count + 1);
  }

  return (
    <div>
      <h1 data-count>count: {count}</h1>
      <button onClick={increaseCount}>increase</button>
    </div>
  );
};

function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

export default App;

The app run well, then I add this index.spec.js

import React from "react";
import { render, fireEvent } from "@testing-library/react";
import { Counter } from "./index"; //this line caused problem

test("Test", () => {
  console.log("Counter", Counter);
});

Then I got error of

Invariant Violation: Target container is not a DOM element.

What's wrong?

Update:

I separated Counter into another file, it worked, I wonder why I can't use multiple import in App.js

Answer 1

我想您需要使用it而不是在这里进行test才能结帐