I would like to understand (and pass the test) why whenever I'm attempting to use "toHaveStyle" I receive this following answer: "received value must be an HTMLElement or an SVGElement. Received has type: object Received has value: {}".
I am using React with Typescript here is my config:
//structure
-frontend
-node_modules
-src
-component
-setupTests.ts
-App.tsx
-etc
-babel.config.js
-jest.config.js
-package.json
-tsconfig.json
//package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test:coverage": "react-scripts test --coverage --runInBand --watchAll=false",
}
"devDependencies": {
"@babel/core": "^7.12.1",
"@babel/preset-env": "^7.12.1",
"@babel/preset-react": "^7.12.1",
"@testing-library/jest-dom": "^5.11.4",
"@types/jest": "^26.0.14",
"jest": "^26.5.3",
"ts-jest": "^26.4.1",
"@types/enzyme": "^3.10.7",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/jsdom": "^16.2.4",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
"eslint": "^7.9.0",
"@typescript-eslint/eslint-plugin": "^4.1.1",
"@typescript-eslint/parser": "^4.1.1",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"prettier": "^2.1.2"
}
//jest.config.js
module.exports = {
preset: 'ts-jest',
snapshotSerializers: ['enzyme-to-json/serializer'],
testEnvironment: 'node',
transform: {
'^.+\\.tsx?$': 'ts-jest'
},
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(js|ts|tsx)?$",
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
collectCoverage: true,
transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"]
};
//setupTests.ts
import enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import "@testing-library/jest-dom";
enzyme.configure({ adapter: new Adapter() });
//ts.config.json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react",
"strict": true,
"noEmit": true, // we don't need to generate files as react works directly
"types": [
"jest",
"node",
"react"
] },
"include": ["src"],
"exclude": ["./node_modules", "*.js"]
}
//babel.config.js
module.exports = {
presets: [
['@babel/preset-env', {targets: {node: 'current'}}],
+ '@babel/preset-typescript',
],
};
//Burger.tsx
import React from "react";
import "./burger.css";
//clickEvent
type Props = {
// eslint-disable-next-line @typescript-eslint/ban-types
clickEvent: Function;
isItClicked: boolean;
};
const Burger: React.FC<Props> = (props) => {
// eslint-disable-next-line react/prop-types
const { clickEvent, isItClicked } = props;
return (
<div
data-testid="no-classes"
id="burger"
onClick={() => clickEvent()}
className={isItClicked ? "cross" : ""}
>
<span></span>
<span></span>
<span></span>
</div>
);
};
export default Burger;
//burger.css
#burger {
position: absolute;
}
//burger.test.js
import * as React from 'react';
import Burger from "../Burger.tsx"
import { mount } from 'enzyme';
describe("We test the innerHTML of the burger", () => {
let wrapper;
beforeEach(() => {
wrapper = mount(<Burger />);
});
test("Snapshot burger ", () => {
//It works
expect(wrapper).toMatchSnapshot();
});
test("burger style css", () => {
//it doesn't work
expect(wrapper.find("#burger")).toHaveStyle('position: absolute')
});
});
I would like to clarify that my snapshot works. Thank you very much for any investigations.
Aucun commentaire:
Enregistrer un commentaire