reactjs - 用 Jest、Enzyme 进行测试

Question

今天是个好日子。我正在通过尝试从官方 React 页面复制其中一个示例项目来学习 React 和 React 测试。 https://github.com/jeffersonRibeiro/react-shopping-cart

我偶然发现了一个问题。特别是测试。当我尝试复制应用程序组件的测试 代码时https://github.com/jeffersonRibeiro/react-shopping-cart/blob/master/src/components/App/tests/App.test.js

import Root from '../../../Root';
import App from '../';

import Shelf from '../../Shelf';
import FloatCart from '../../FloatCart';

let wrapped;

beforeEach(() => {
  wrapped = mount(
    <Root>
      <App />
    </Root>
  );
});

afterEach(() => {
  wrapped.unmount();
});

it('shows a shelf', () => {
  expect(wrapped.find(Shelf).length).toEqual(1);
});

it('shows a floating cart', () => {
  expect(wrapped.find(FloatCart).length).toEqual(1);
});

它会引发“获取方法未定义”的错误。我知道我需要使用该库来模拟 fetch，但为什么它不会在原始代码中抛出错误？唯一的区别是我使用的是 Typescript。如果我将 mount() 更改为 shallow() 它工作正常。如果我将尝试在其他测试中模拟 redux 的状态，则测试仍在尝试获取数据并抛出错误“获取方法未定义”。你能指出我错过了什么吗？谢谢你。

tsconfig.json

  {
      "compilerOptions": {
        "jsx": "react",
        "target": "es6",
        "outDir": "./build/",
        "noImplicitAny": false,
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "allowSyntheticDefaultImports": true
      },
      "exclude": [
        "node_modules"
      ]
    }

jest.config

 module.exports = {
      "roots": [
        "<rootDir>/src"
      ],
      "transform": {
        "^.+\\.tsx?$": "ts-jest"
      },
      "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
      "moduleFileExtensions": [
        "ts",
        "tsx",
        "js",
        "jsx",
        "json",
        "node"
      ],
      "moduleNameMapper": {
        // "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.ts",
        "\\.(scss|sass|css|less)$": "identity-obj-proxy"
      },
      "snapshotSerializers": ["enzyme-to-json/serializer"],
      "setupFilesAfterEnv": ["<rootDir>/src/setupEnzyme.ts"],
    }

标签： reactjstypescripttesting