I've been having an odd issue with Jest/Enzyme testing on my react typescript app. For some reason it gives a syntax error even though this is following the official documentation, as well as input from several articles.
The Code:
import React from 'react';
import NavbarTop from "../components/navbar";
import { shallow } from 'enzyme';
describe('NavbarTop', () => {
it('renders correctly', () => {
const wrapper = shallow(<NavbarTop />);
expect(wrapper).toMatchSnapshot();
// On the first run of this test, Jest will generate a snapshot file automatically.
});
});
The folder structure. I have a named class and then an index with a default export.
The error log.
Do you have JSX configured for Jest? Looks like you don't have support for JSX in Jest, which probably means this is a configuration issue. Have a look at configuring babel to support JSX in Jest.
Make sure you read this tutorial
Related
i made a small react project with typescript
and i made it to print numbers of li tag to browser.
so i tried to implement unit test that test component create HTMLElement
but I really confused. I'm a newbie with typescript
import * as React from "react";
import { render } from "#testing-library/react";
import List from "../component/List";
describe("<List />", () => {
it("check li tags were made perfectly", async () => {
const component = render(<List />);
component.getByText("li");
});
this code's output is error at render(<List />);
my component doesn't require any props
how can i make this code is able to run properly?
Thanks to, #Edward Choupuryan
it was just simple problem.
i wanted to test react component with typescript, and that file need to has extension tsx . mine was just *.test.ts
i changed my testfile testfile.test.ts to testfile.test.tsx, and problem solved
I've got a (private) npm module that exports several React components. The module is bundled by Webpack and in the generated bundle a reference to one of the components (say Warning) looks like this:
t.d(n,"Warning",function(){return ge})
Then I've got a React project importing this module:
import { Warning } from 'my-custom-module';
...
render() {
return (
<Warning>Lorem ipsum</Warning>
);
}
This all works OK, but when I create a Jest snapshot of the component above, I expect the snapshot to look like
<Warning>Lorem ipsum</Warning>
but it looks like:
<ge>Lorem ipsum</ge>
For some reason Jest takes the minified identifier instead of the exported name of the component. How can I see the component name in the Jest snapshot? I'm unsure if I do need to adjust my Webpack config or the Jest setup...
Since you are referring the uglified version of the 'my-custom-module' it will try to render to the uglified names. However, I assume what you actually you need is to shallowly render your component.
You can use the Enzyme libraries's shallow renderer for this.
//MyAwesomeComponent.js
import { Warning } from 'my-custom-module';
export default class MyAwesomeComponent extends Component{
render(){
return (<Warning>Lorem ipsum</Warning>);
}
}
//MyAwesomeComponent.test.js
import { shallow } from 'enzyme';
import MyAwesomeComponent from './MyAwesomeComponent';
it('renders <MyAwesomeComponent />', () => {
const shallowMyComponent = shallow(<MyComponent />);
expect(shallowMyComponent).toMatchSnapshot()
});
This should show your snapshot as Warning without going a level deeper.
I want to do some basic unit test to my app which I created with "create-react-app" package. I believe it already has Jest installed.
I have some basic redux code in my app.
I want to test:
It renders the main component(App.js) without crashing
Clicking to show next item funcion
I have installed Enzyme using "npm install --save-dev enzyme" and "enzyme-adapter-react-15".
Here is my code:
import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './App';
import { shallow, mount, render, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
configure({ adapter: new Adapter() });
describe('A test for App component', () => {
let wrapper
beforeEach(()=>{
wrapper = shallow(<App />);
})
it('should render App Component', () => {
expect(wrapper).to.have.length(1)
})
})
I can't get the test to start to work. The error message:
TypeError: Cannot read property 'length' of undefined
and
TypeError: Cannot read property 'have' of undefined
I think there is some basic things I am doing wrong.
Any help is appreciated!!!
You are using Jest's expect function. You need to explicitly declare the import from chai.
it will look something like:
import { expect } from 'chai'
it('should render App Component', () => {
expect(wrapper).to.have.length(1)
})
Also, instead of adding the adapter configuration for each test, you could add a file setupTests.js to /src and it will work for all tests :-)
You probably copied it from the examples on enzyme's website, which uses chai. The jest equivalent for what you're trying to test is:
it('should render App Component', () => {
expect(wrapper).toHaveLength(1)
})
I'm getting the following error TypeError: Cannot read property 'state' of null when trying to call setProps on an enzyme wrapper of a pure React component.
I wrote a simplified version of what I'm trying to do, the test looks like this:
import React from "react"
import {shallow} from "enzyme"
import Simple from "../Simple"
describe("<Simple />", () => {
it("renders param", () => {
const wrapper = shallow(<Simple param="foo" />)
expect(wrapper.text()).toEqual("foo")
wrapper.setProps({param: "bar"})
expect(wrapper.text()).toEqual("bar")
})
})
and this is the component:
export default function Simple(props) {
return props.param
}
I'm on React 16.0.0-alpha.12, React Native 0.46.4 and Enzyme 2.9.1
Enzyme doesn't yet support React 16, as per this GitHub issue at the time of writing.
Unfortunately, since React Native 0.43 and higher requires React 16, React Native and and Enzyme are currently not compatible.
Whether or not your particular issue is caused by this incompatibility, you'll likely find that Enzyme won't work for you.
In the meantime, you may be best off by using Jest snapshot tests instead of assertion tests.
I have a simple shallow test.
import React from 'react';
import { shallow } from 'enzyme';
import Layout from '../containers/'
it('renders without crashing', () => {
shallow(<Layout />);
});
Upon adding firebase.storage() functionality to my app (not in Layout.jsx directly but in the child of children of Layout) - i am now failing this simple test. I was under the impression that a shallow render here would be... well, shallow... no?
It should be noted that all of my firebase components work just fine and i'm not getting any errors anywhere other than this failing test.
I have tried bringing in import 'firebase/storage' but this doesn't work. Ideas?
I overwrote the test script in package.json to react-scripts test --env=jsdom --browser and it worked.