Dom-testing-library: I got error message with screen's methods

[keiya01]

• @testing-library/react version: 10.4.8
• @testing-library/dom version: 7.17.1
• Testing Framework and version: [email protected]
  
• DOM Environment: [email protected]
  

Relevant code or config:

jest.config.js

module.exports = {
  roots: ['<rootDir>/src'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  globals: {
    'ts-jest': {
      tsConfig: 'tsconfig.json',
    },
  },
  testEnvironment: 'jsdom',
  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$'],
  moduleFileExtensions: ['ts', 'tsx', 'js'],
  testMatch: ['**/*.test.ts?(x)'],
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
};

What you did:

I wrote test about updating counter.

counter.test.ts

test('should update count, () => {
  const Text = () => {
    const [count, setCount] = React.useState(0);
    return (
      <div>
        <p>{count}</p>
        <button type="button" onClick={() => setCount((c) => c + 1)}>
          count
        </button>
      </div>
    );
  };
  const Component = () => {
    return <Text />;
  };

  render(<Component />);

  fireEvent.click(screen.getByRole('button', { name: /count/i }));

  expect(screen.queryByText('2')).toBeDefined();
  expect(renderCount.current.Text).toBe(2);
});

What happened:

I got error message bellow when I use screen.*.

Thanks.

[kentcdodds]

I just noticed this in my own project. Looks like it's dom-accessibility-api's use of getComputedStyle.

Looks like getComputedStyle is used several places in that file. @eps1lon, are you aware of this? It looks like JSDOM doesn't support the second argument to getComputedStyle: https://github.com/jsdom/jsdom/blob/5279cfda5fe4d52f04b2eb6a801c98d81f9b55da/lib/jsdom/browser/Window.js#L650-L658

Is there a possibility we could have a fallback here?

[kentcdodds]

What's interesting is I'm not sure what changed because dom-accessibility-api has been using the second argument for a while now 🤔

[eps1lon]

Fix incoming. jsdom@^16.4.0 decided to console.error when using the second argument. Apparently that's important. Not the fact that virtually every property is not computed correctly.

[kentcdodds]

:tada: This issue has been resolved in version 7.22.1 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[keiya01]

@kentcdodds @eps1lon Thank you for fixing 🙏