0

I'm trying to write unit tests for an already existing React project. These are the currently used versions, "react": "^16.11.0", "react-dom": "^16.11.0"

The project uses redux, but the component 'TechTable' doesn't use it. This is the component I'm trying to write test for.

To start with, below are the testing libraries I've included in the project, "@testing-library/jest-dom": "^5.11.9", "@testing-library/react": "^11.2.5", "@testing-library/user-event": "^14.4.3"

In the file TechTable.test.js, just importing TechTable and running the test: npm test TechTable.test.js, results in below error, ● Test suite failed to run

TypeError: Cannot read property 'SUCCESS' of undefined

  4 |   console.log("Printing state and action, ", state, action);
  5 |   switch (action.type) {
> 6 |     case alertActionTypes.SUCCESS:
    |                           ^                        ^

The thing is no where in component TechTable, I'm dispatching any actions or reading redux states. To narrow down the error, I tried to clear some code in TechTable.test.js and now the file just contain import statements. Still the error persists. Tried to print the action that is getting triggered automatically, console.log src/reducers/alertReducer.js:4 Printing state and action, {} { type: '@@redux/INITa.t.x.l.z.n' }

On removing import for TechTable, the error goes away and I get expected error, Test suite failed to run Your test suite must contain at least one test.

Not sure why the TypeError is coming up with just the import statement of TechTable. I'm expecting to understand why import of a component that doesn't interact with redux states is triggering action and this error.

pratibha negi
  • 23
  • 5
  • Are you using a relative path import for alertActionTypes? Are you using Jest directly or through create-react-app? – Chris Danna Apr 04 '23 at 13:26
  • hey, errors resolved by creating test-utils file and modifying render method. Like, const AllTheProviders = ({ children }) => ( {children} ); const customRender = (ui) => render(ui, { wrapper: AllTheProviders }); export * from '@testing-library/react'; export { customRender as render }; And then using this render instead of render by @testing-library. To answer your questions, I didn't have the relative path for alertActionTypes and I installed jest afterwards. Didn't have the lib as part of the create-react-app (project created like 4 years ago) – pratibha negi Apr 06 '23 at 02:12

0 Answers0