Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Be able to use with create-react-scripts #63

Open
hutber opened this issue Feb 14, 2020 · 5 comments
Open

Be able to use with create-react-scripts #63

hutber opened this issue Feb 14, 2020 · 5 comments

Comments

@hutber
Copy link

hutber commented Feb 14, 2020

It would be great to be able to use this with create-react-app

$ react-scripts test --watchAll=false

Out of the box, Create React App only supports overriding these Jest options:

  • clearMocks
  • collectCoverageFrom
  • coveragePathIgnorePatterns
  • coverageReporters
  • coverageThreshold
  • displayName
  • extraGlobals
  • globalSetup
  • globalTeardown
  • moduleNameMapper
  • resetMocks
  • resetModules
  • restoreMocks
  • snapshotSerializers
  • transform
  • transformIgnorePatterns
  • watchPathIgnorePatterns.

These options in your package.json Jest configuration are not currently supported by Create React App:

  • setupFiles

If you wish to override other Jest options, you need to eject from the default setup. You can do so by running npm run eject but remember that this is a one-way operation. You may also file an issue with Create React App to discuss supporting more options out of the box.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

@hustcc
Copy link
Owner

hustcc commented May 3, 2020

i do not know how to use jest-canvas-mock without configure setupFiles.

@wispamulet
Copy link

I met this problem, too.

I have a react app created by create-react-app contains some canvas element. Without this package I get somthing like this.

// App.test.js
import React from 'react';
import { render } from '@testing-library/react';
import App from '../App';

describe('App', () => {
  test('renders App component', () => {
    render(<App />);
  });
});
console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
  Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)
...
...
 ● App › renders App component

    TypeError: Cannot read property 'beginPath' of null

If I change jest setting in package.json I got the same error as hutber

// package.json
{
  ...
  "jest": {
    "setupFiles": ["jest-canvas-mock"]
  }
}

import this package in src/setupTest.js didn't work as well

Finally, I import it in each of the test files that were invoking canvas element like App.test.js before. By far it works for me

@Juuro
Copy link

Juuro commented Aug 11, 2020

@wispamulet I have the same problem, despite import in each test file doesn't work for me. I try it like this:

import {} from 'jest-canvas-mock'

But I still get a very similar error message as you did:

Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)

How did you import it?

@wispamulet
Copy link

@Juuro it's been a while so I hope this would work 😯

// __test__/App.test.tsx
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { render, screen, RenderResult } from '@testing-library/react';
import 'jest-canvas-mock';
import App from '../App';

const setup = (): RenderResult =>
  render(
    <MemoryRouter>
      <App />
    </MemoryRouter>
  );

describe('App', () => {
  setup();

  it('should ...', () => {
    // do your job here
  });
});

@derrxb
Copy link

derrxb commented Oct 22, 2020

You can also do the import in your CRA app's setupFiles.js so that you don't need to manually import in every test file.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants