I created a new React application by create-react-app and I wanted to write a unit test to a component named "MessageBox" that I created in the application. This is the unit test that I wrote:
import MessageBox from "../MessageBox";
import { shallow } from 'enzyme';
import React from 'react';
test('message box', () => {
const app = {setState: jest.fn()};
const wrapper = shallow(<MessageBox app={app}/>);
wrapper.find('button').at(0).simulate('click');
expect(app.setState).toHaveBeenLastCalledWith({modalIsOpen: false});
});
I also added a file under 'src' folder named 'setupTests.js' with the content:
import * as enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
enzyme.configure({ adapter: new Adapter() });
I ran it by:
npm test
and I got the error:
Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. To configure an adapter, you should call
Enzyme.configure({ > adapter: new Adapter() })
Do you know what can solve this problem?
Add it to your test case file.
import React from 'react';
import Adapter from 'enzyme-adapter-react-16';
import { shallow, configure } from 'enzyme';
configure({adapter: new Adapter()});
test('message box', ()=> {
...
})
Also, if you don't want to import your setupTests.js file into every test file, you can place it in your package.json folder:
"jest": {
"setupTestFrameworkScriptFile": "./test/setupTests.js" }
Update:
Note: setupTestFrameworkScriptFile is deprecated in favor of setupFilesAfterEnv.
The file 'setupTests' has to be imported to the test file:
import MessageBox from "../MessageBox";
import { shallow } from 'enzyme';
import React from 'react';
import "../setupTests"
test('message box', ()=> {
...
})