I'm writing unit tests for a React application using Cypress. I wish to use the 'cypress-react-unit-test' to test individual components.
I am only importing React, cypress-react-unit-test (in support/index.js) and the component itself.
I have a simple component (test.js)
import React, { Component } from 'react';
import "./test.css"
class Test extends Component{
render(){
return(
<h1>Testing {this.props.name}</h1>
)
}
}
export default Test;
along with a test.scss containing
h1 {
color: blue
}
When I start the test runner I get an error preparing test file referring to the test.css file
Can someone explain what is going on here?
Same issue as this cypress ParseError on css content, but I am already using the cypress-react-unit-test package. As said there, if I comment out the import css file in the component file, the component renders without any styling. But what if I want to assert a heading's colour for example?
My starting testcode
import React from 'react'
import Test from '../../../../src/components/test.js'
describe('testing React', ()=>{
it('should react', ()=>{
cy.mount(<Test name="Nrd" />)
cy.contains('Testing')
})
})
Related
I'm new to React and React unit testing. I'm trying to create a simple test and am getting the following error: "TypeError: Cannot read properties of undefined (reading 'Component')" Here's my code.
HelloWorld.js
import React from "react";
class HelloWorld extends Component {
render() {
return ( < h1 > My First ReactJS Core App! < /h1>);
}
}
export default HelloWorld
test.js
import React from "react";
import {
HelloWorld
} from "../wwwroot/src/react/HelloWorld"
import {
render,
screen
} from "#testing-library/react";
describe("apptest", () => {
it("works", () => {
render( < HelloWorld / > );
screen.getByText("My First ReactJS Core App!");
});
});
When I run "npm test", I get the following:
What am I doing wrong?
When I see your code, you don't have Component importing, but the error message shows React.Component.
Does your original code match with your attached code?
If it is, please try to add the following import.
import React, {Component} from 'react'
check this
import React, { Component } from "react";
class Temp extends Component {
render() {
return <h1> My First ReactJS Core App! </h1>;
}
}
export default Temp;
import { render, screen } from "#testing-library/react";
import Temp from "./Temp";
describe("apptest", () => {
it("works", () => {
render(<Temp />);
screen.getByText("My First ReactJS Core App!");
});
});
I had my original code in a .jsx file. The code got transpiled to a .js file which I was referencing in my test. Again, I don't know much about transpiling but when I created a new js file and imported that, the test passed.
I'm new to React testing and with Jest and Enzyme.
I'm trying to learn how to use a TDD approach first and due to that, I'm building my tests before starting coding.
What I did was to create a sample app in React and I installed Enzyme dependencies and then I wrote the test:
import { shallow } from "enzyme";
import React from "react";
import AppLayout from "./AppLayout";
import { ContentLayout } from "./styles";
it("renders <AppLayout /> component", () => {
const wrapper = shallow(<AppLayout />);
expect(wrapper.find(ContentLayout)).to.have.lengthOf(1);
});
Then I built the component which contains a styled component called ContentLayout
import React from "react";
import { ContentLayout } from "./styles";
const AppLayout = () => {
return (
<>
<ContentLayout>
<h1>HELLO</h1>
</ContentLayout>
</>
);
};
export default AppLayout;
I'm unable yo make the test pass as what I got was the next error:
TypeError: Cannot read property 'have' of undefined
I would like to learn how shoulæd be the practice to test this kind of component and what rules to follow in general when I start a project from scratch with TDD in mind.
The AppLayout is called then in App.js
import React from "react";
import AppLayout from "./Components/AppLayout";
function App() {
return <AppLayout />;
}
export default App;
You should use .toHaveLength(number) matchers of expect in jestjs.
expect(wrapper.find(ContentLayout)).toHaveLength(1);
For nested components, there are two strategies generally:
Shallow Rendering API
Shallow rendering is useful to constrain yourself to test a component as a unit, and to ensure that your tests aren't indirectly asserting the behavior of child components.
This means we don't want to render the nested component(ContentLayout), we only test the behavior(lifecycle methods, event handlers, data fetching, condition render, etc.) of the parent component(AppLayout).
Full Rendering API (mount(...))
Full DOM rendering is ideal for use cases where you have components that may interact with DOM APIs or need to test components that are wrapped in higher order components.
Below is a screen shot of my package size from Next JS. What I want to point out is the react-color components under node_modules. I am importing them this way:
import { GithubPickerProps, GithubPicker, AlphaPicker } from 'react-color';
But you see it includes all the things I'm not using such as photoshop.js, sketch.js, etc.
How do I get it not to bundle the things I'm not using with tree shaking?
I did notice that import { debounce } from 'lodash'; imported all of lodash but import debounce from 'lodash/debounce'; reduced the package size by 200kB.
In order for the tree-shaking to work properly react-color should add module property to the package.json which will point to esm version of the lib.
Since it doesn't have it, you will need import directly.
Before:
import React from 'react'
import SketchPicker from 'react-color'
class Component extends React.Component {
render() {
return <SketchPicker />
}
}
After:
import React from 'react'
import SketchPicker from 'react-color/lib/Sketch'
class Component extends React.Component {
render() {
return <SketchPicker />
}
}
React is not resolving my component import into my YouTubeApp.js.
It seems silly, i have other components in my react app that I'm able to import with no issues but this one in particular i can't get it imported.
Github: https://github.com/JAlonsoHdz/React_UnsplashClientApp/tree/master/src/components
Additional context, YouTubeApp.js is currently imported in my index.js with no issues. I'm using react routing imported in the index.js and links and the route links sucessfully to YouTubeApp.js. The problem arise whenver I try to import ANY component into YouTubeApp.js i get the Cannot resolve 'component name' error, without any imports the component YouTubeApp.js works fine.
I have validated the correct path, the name of the component.
YouTubeApp.js
import React from 'react';
import Other from './components/other';
class YouTubeApp extends React.Component {
render() {
return (<p>test</p>
);
}
}
export default YouTubeApp;
And this is my component I'm trying to import:
import React from 'react';
class Other extends React.Component {
render() {
return (
<div clasNames="ui container">test!</div>
);
}
}
export default Other;
I need to nest at least a few levels down more components but this issue blocking.
Looking at your GitHub repository, it appears that YouTubeApp.js and other.js are both in the "components" directory. Therefore when in YouTubeApp.js (or any other component in your "components" directory) your import should be:
import Other from './other';
Hi guys i am new to react can anyone help me to write unit test for the below code .. i want to test if link is redirecting properly..
Here is my code ..
import React { Component } from 'react';
import {Link} from 'react-router';
import './App.css';
class Home extends Component {
render() {
return (
<Link to='/college/masters/cs' className="student">
<div className="centered">
<h2 className="Branch">Branch</h2>
</div>
</Link>
);
}
}
My test
import React from 'react';
import { mount, shallow } from 'enzyme';
import {expect} from 'chai';
import 'ignore-styles';
import Home from '../src/Home';
describe('<Home/>', function () {
it('should have a Link', function () {
const wrapper = shallow(<Home/>);
expect(wrapper.find('Link')).to.have.length(1);
});
});
Please help me to write test if link is redirecting properly..
Thank you
Well, try this out. It should work.
You merely need to check whether you are passing the valid to property with a relevant value to the Link component. That's it. You don't need to check whether it takes you to the given url, since it is the functionality of the Link component and they should have tests to verify that. If you need that then what you are writing is not a unit test, it is called an e2e. You may need selenium or so in doing that.
expect(wrapper.find('Link').props().to).to.eql('/college/masters/cs')