console.warn Warning: [JSS] Cannot read property 'createElement' of null

[kboul]

I am using react 17.0.2 along with

 "@testing-library/dom": "^7.30.1",
 "@testing-library/jest-dom": "^5.11.10",
 "@testing-library/react": "^11.2.5",
 "@testing-library/user-event": "^13.1.0",

and I am receiving in the testing console only the following error: which keeps repeated for many many times.

Could you please advise on where it can be generated or what might have been wrong that creates the error? It indicates an error source regarding tiny-warning which is a library I don't use Object.warning (node_modules/tiny-warning/dist/tiny-warning.cjs.js:13:15) .

[eps1lon]

Thanks for the report.

It looks like the code in question is running without a document available i.e. not a browser environment.

Without a full reproduction it's going to be hard to identify where the issue lies. Please include a cloneable, minimal repository that reproduces the bug. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[kboul]

When I rerun the tests the same error appears but in different component tests. I have changed the react test command as follows "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!@deck.gl)/\"", because I use deck.gl and shaders are not recognised by react-testing-library as deck.gl runs only on browser.

could it be that this command is causing this issue?

[kboul]

It seems that the error was a result of putting this chunk of code inside a component instead of outside.

const MyComponent = ({ inputMinWidth} ) => {

const useStyles = makeStyles(() => ({
  inputWrapper: {
    alignItems: 'center',
    display: 'flex',
    height: 30,
    width: 150
  },
  input: { marginLeft: 4, flex: 1, minWidth: inputMinWidth || 100 }
}));

 const classes = useStyles();
...
}

It should be

const useStyles = makeStyles(() => ({
  inputWrapper: {
    alignItems: 'center',
    display: 'flex',
    height: 30,
    width: 150
  },
  input: ({ inputMinWidth }) => ({ marginLeft: 4, flex: 1, minWidth: inputMinWidth || 100 })
}));

const myComponent = ({ inputMinWidth }) => {
  const classes = useStyles({ inputMinWidth});
...
}

Moreover, I ended up moving some util tests outside of component.test.js into a separate utils.test.js file and then the error was not reproducible anymore.

[kboul]

Unfortunately after a few days that the error has been vanished it reappeared again. It is really difficult to make a demo because the app is significantly large, but I will try to share some code from the component that the error is being generated.

The problem seems to be generated here when trying to test the opening of a modal:

beforeEach(() => renderWithAllProviders(<LinesSelectModal {...props} />, reduxState));

describe('modal', () => {
  beforeEach( () => {
    const addRemoveButton = screen.getByRole('button', { name: 'Add/Remove ilines' });
    fireEvent.click(addRemoveButton);
  });

  test.skip('heading renders',  () => {
    const heading = screen.getByRole('heading', { name: 'Add/Remove' });
    expect(heading).toBeInTheDocument();
    expect(heading).toHaveTextContent('Add/Remove');
  });
 ...
}

I tried using also async await inside beforeEach and on each test respectively since opening a modal can be considered an async operation but nothing changes. When I skip the tests inside the describe block the error is gone.

[brekk]

@kboul I am not familiar with all of the specifics here, but I recently ran into a similar problem and was able to rectify it by changing the following in jest.config.js:

moduleDirectories: ['node_modules', '<rootDir>/node_modules', '.'],

Perhaps this is a similar issue to what you're seeing?

[akmjenkins]

@brekk can you elaborate on why your solution fixes it? I don't understand why the resolution of internal modules would intermittently change to something else, nor how changing moduleDirectories would necessarily fix it.

EDIT: I happen to be using rebass in a project and when I add this to the jest config I get these errors:

[kboul]

I have resolved the error long time ago. Sorry for not providing any details regarding the solution but it can be closed now.

[akmjenkins]

There's a whole host of issues (all related to jest testing) across various GitHub repos. The root cause of these issues is that jest has started to tear down it's environment while there is still some code running as a consequence of a test case that ends up needing document. Jest has removed the global variable and the running code requests to access document in some way (in this specifc case it was the createElement property) and the test throws an error. This is a race condition that sometimes causes tests to fail (but not always, hence the "flaky" behaviour).

Solution:

Make sure your tests are fully complete and you await all timers/timeouts. If your test cases end while code is still being exercised (perhaps in a library you are using) that requires document you will encounter this flaky behaviour from time to time.