1

Good day, everyone. I'm learning React and React Testing by trying to replicate one of the example projects from official React page. https://github.com/jeffersonRibeiro/react-shopping-cart

I have stumbled on a problem. Specifically with testing. When I'm trying to replicate testing code for App Component 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);
});

it throws an error that 'fetch method is undefined'. I understand that I need to use the library to mock fetch, but why it doesn't throw the error in original code? The only difference is that I'm using Typescript. If I change mount() to shallow() it works fine. If I will try to mock state for redux in other tests, the test is still trying to fetch data and throws the error 'fetch method is undefined'. Can you please point out what I'm missing. Thank you.

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"],
    }
Alex2k
  • 11
  • 3
  • Can you post also tsconfig? It can change a lot... – Zydnar Jan 11 '20 at 10:29
  • Added tsconfig, jest.config – Alex2k Jan 11 '20 at 10:51
  • for start add: `"lib": [ "es5", "es2015", "dom" ],` to tsconfig and check how it goes after that – Zydnar Jan 11 '20 at 10:54
  • Thanks for the answer. Unfortunately, it still throws errors. `ReferenceError: fetch is not defined`; `TypeError: Cannot read property 'find' of undefined`; `TypeError: Cannot read property 'unmount' of undefined`; Why I can't just pass mock state to redux? It's still trying to fetch data. – Alex2k Jan 11 '20 at 11:28
  • Check this answer: https://stackoverflow.com/questions/48994613/testing-fetch-action-in-react-redux-app – Zydnar Jan 11 '20 at 11:30

0 Answers0