Question

我正在尝试使用Typescript在React应用中设置Jest。

我的设置是这样的

我的package.json

{
  "name": "react-tdd-ts",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "24.0.23",
    "@types/node": "12.12.9",
    "@types/react": "16.9.11",
    "@types/react-dom": "16.9.4",
    "enzyme": "^3.10.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.2.0",
    "typescript": "3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/enzyme": "^3.10.3",
    "@types/enzyme-adapter-react-16": "^1.0.5",
    "@types/react-test-renderer": "^16.9.1",
    "enzyme-adapter-react-16": "^1.15.1",
    "react-test-renderer": "^16.12.0"
  }
}

我的App.tsx

import React from "react";
import "./App.css";

import Footer from "./components/Footer";

const App: React.FC = () => {
  return (
    <div className="App">
      <Footer />
    </div>
  );
};

export default App;

我的Footer.tsx

import React from "react";

const Footer: React.FC = () => {
  return (
    <div>
      <hr />
      <span>Text here</span>
    </div>
  );
};

export default Footer;

我的Footer.test.tsx

import React from "react";
import { shallow } from "enzyme";
import Footer from "./Footer";

it("should render text", () => {
  const wrapper = shallow(<Footer />);
  const span = wrapper.find("span");
  const result = span.text();

  expect(result).toBe("Text here");
});

MY setupTest.tsx

import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
configure({ adapter: new Adapter() });

在终端中出现以下错误

 PASS  src/App.test.tsx
 FAIL  src/components/Footer.test.tsx
  ● should render text


      Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.
      To configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })`
      before using any of Enzyme's top level APIs, where `Adapter` is the adapter
      corresponding to the library currently being tested. For example:

      import Adapter from 'enzyme-adapter-react-15';

      To find out more about this, see http://airbnb.io/enzyme/docs/installation/index.html

  4 | 
  5 | it("should render text", () => {
> 6 |   const wrapper = shallow(<Footer />);
    |                   ^
  7 |   const span = wrapper.find("span");
  8 |   const result = span.text();
  9 | 


  at validateAdapter (node_modules/enzyme/src/validateAdapter.js:5:11)
  at getAdapter (node_modules/enzyme/src/getAdapter.js:10:3)
  at makeShallowOptions (node_modules/enzyme/src/ShallowWrapper.js:345:19)
  at new ShallowWrapper (node_modules/enzyme/src/ShallowWrapper.js:379:21)
  at shallow (node_modules/enzyme/src/shallow.js:10:10)
  at Object.<anonymous>.it (src/components/Footer.test.tsx:6:19)

抱歉，我没有正在运行的演示，但是任何人都可以看到我在做错什么。使用打字稿

时，是否可以使用其他方法来设置酶和Jest

Answer 1

我需要在测试文件中

import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";

Enzyme.configure({ adapter: new Adapter() });

它已发布在这里，但随后被删除

反应打字稿和玩笑

1 个答案: