Skip to content

Not working correctly with @testing-library/react #425

Open
@balibou

Description

@balibou

I'm trying to use this library with @testing-library/react and can't make it work properly. I changed package versions, looked on other github repositories and impossible to find a working example. (Does anyone has a working repo to show ?)

package.json

  "@swc/core": "^1.3.21",
  "@swc/jest": "^0.2.23",
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^12.1.2",
  "@testing-library/user-event": "^13.5.0",
  "@types/jest": "^27.0.0",
  "@types/react": "^17.0.38",
  "@types/react-dom": "^17.0.11",
  "@types/styled-components": "^5.1.19",
  "jest": "^27.0.0",
  "jest-styled-components": "^7.1.1",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "styled-components": "^5.0.0",
  "typescript": "^4.5.4"

test file

import React from 'react';
import { render, screen } from '@testing-library/react';
import styled from 'styled-components';
import '@testing-library/jest-dom/extend-expect';
import 'jest-styled-components';

const Button = styled.button`
  color: yellow;
`;

describe.only('Test', () => {
  it('works', () => {
    const { container } = render(<Button />);
    expect(container.firstChild).toMatchSnapshot();
  });
});

snapshot:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Test works 1`] = `
<button
  class="hJBeEn"
/>
`;

jest.config.js

module.exports = {
  roots: ['<rootDir>/src'],
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}',
    '!src/**/*.d.ts',
    '!src/mocks/**',
  ],
  coveragePathIgnorePatterns: [],
  testEnvironment: 'jsdom',
  modulePaths: ['<rootDir>/src'],
  transform: {
    '^.+\\.(ts|js|tsx|jsx)$': '@swc/jest',
    '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
  },
  modulePaths: ['<rootDir>/src'],
  // testRunner: "jest-jasmine2" // I tried with default and jest-jasmine2
};

cssTransform.js

module.exports = {
  process() {
    return 'module.exports = {};';
  },
  getCacheKey() {
    return 'cssTransform';
  },
};

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions