XXX.spec.js import sweetalert2 seem there are some error?

[mqliutie]

I have run this repo

jest config in package.json

"jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/reactTests/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/client/src/stylesheets/"
    },
    "testPathIgnorePatterns": [
      "<rootDir>/node_modules/",
      "<rootDir>/client/src/stylesheets/"
    ]
  }

.project
+-- client
|   +-- stylesheets
|   |      +-- style.css
|   |      +-- preloader.gif
+-- reactTests
|   +-- __mocks__
|   |      +-- fileMock.js

the file fileMock.js

module.exports = 'test-file-stub';

and .babelrc

{
  "presets": [
    ["env", { "modules": false }],
    "es2015",
    "react",
    "stage-2"
  ],
  "plugins": ["transform-class-properties"]
}

test file is teamAmerica.test.js

import React from 'react';
import renderer from 'react-test-renderer';

/**
 *
 *
 * import sweetalert2 seems to report css error
 * remove all is well
 *
 *
 */

// import swa from 'sweetalert2';  
import { TeamAmerica } from './../../client/src/components/TeamAmerica';

// I had to copy paste the API json into this file to fix a bug
const team = {
  presidents: [
    {
      team: 'Presidents',
      team_id: '1',
      first_name: 'George',
      full_name: 'George Washington',
      last_name: 'Washington',
      role: 'First President of the United State of America.',
    },
    {
      team: 'Presidents',
      team_id: '2',
      first_name: 'Abraham',
      full_name: 'Abraham Lincoln',
      last_name: 'Lincoln',
      role: 'President during the Civil War.',
    },
    {
      team: 'Presidents',
      team_id: '3',
      first_name: 'Franklin D.',
      full_name: 'Franklin D. Roosevelt',
      last_name: 'Roosevelt',
      role: 'President during The Great Depression and WW2. Only president to be elected 4 times.',
    },
  ],
  client: [
    {
      team: 'US People',
      team_id: '2',
      first_name: 'Joe',
      full_name: 'Joe Sixpack',
      last_name: 'Sixpack',
      role: 'Average American',
    },
  ],
};

// I was getting an error that getTeam was not a function, so I had to turn it into a function in the test by doing this fat arrow
const getTeam = () => {};

// This is the actual test written for Jest
it('test to see if the team renders correctly', () => {
  const tree = renderer
  .create(<TeamAmerica getTeam={getTeam} team={[team.presidents]} />)
  .toJSON();
  expect(tree).toMatchSnapshot();
});

[SimenB]

Can you set up a repo we can pull down to see the error?

[mqliutie]

@SimenB Thanks for you reply
I have fork that repo and update message
the address is https://github.com/mqliutie/jest_react_redux_node_webpack_complex_example

npm install 
npm run test

teamAmerica.test.js fourth line

import swal from 'sweetalert2';
// if comment this line there will no error

You will get the error ,Thank you very much

[SimenB]

This is jsdom/jsdom#2026. Nothing we can do in jest.

You could mock out the stylesheet though, is it doesn't matter for your purposes in Jest.

If you have further questions, we recommend using StackOverflow or our discord channel for questions.

[mqliutie]

Thanks, But can I hide these errors? It makes me nervous...

[mqliutie]

#5227 mentioned how prevent JSDOM errors by @kentcdodds using

new VirtualConsole().sendTo(console, {
// this config will prevent the JSDOM errors from being logged
    omitJSDOMErrors: true,
})

But errors still appearing on the console

[SimenB]

Please ask questions on stackoverflow or discord, this issue tracker is not a help forum

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.