vue-testing-library icon indicating copy to clipboard operation
vue-testing-library copied to clipboard

`render` requires projects to add `vuex` as a dependency

Open adam-gipril opened this issue 4 years ago • 6 comments

Description

This project lists vuex as a dev dependency, but then the implementation of render requires vuex. As a result, consuming projects that may not use vuex in their project code need to add it as a dev dependency to use render in the test environment.

Steps to reproduce

  • Create a Vue project and add @testing-library/vue, or add @testing-library/vue to an existing project.
  • Ensure vuex is not a dependency in the project.
  • Try to write a test with render.
  • Observe the tests failing because Node can't find vuex.

Expected behavior

I'd expect vuex to be a dependency and not a dev dependency of this project as one of its key exports requires vuex.

Related information

  • @testing-library/vue version: 5.8.2
  • Vue version: >= 2.6.11 < 3
  • node version: 12.22.7
  • npm (or yarn) version: npm 6.14.15

adam-gipril avatar Dec 10 '21 16:12 adam-gipril

Hi! Just gave it a go locally, and Vuex isn't required (and thus nothing fails) unless a store option is passed, as expected. The minute I add a store: {} option, then I get the error "Cannot find module 'vuex' from 'render.js'". Is it possible that your tests are setting a store?

afontcu avatar Dec 11 '21 08:12 afontcu

@afontcu I don't believe any of our tests are setting a store. For additional context, the test suites with which I'm working are for a component library. All our current tests are using @vue/test-utils directly, and I'm not seeing any of those using a store option either.

The only suite that uses the testing library in our project is the following very simple one below. We're currently using Mocha, and plan to swap over to Jest soon.

import { render } from '@testing-library/vue';
import { PCard } from '@/components/PCard';

describe('PCard', () => {
  it('renders slotted-in content', () => {
    render(PCard, { slots: { default: 'Hello world' } }).getByText('Hello world');
  });
});

My error output when running that test is as follows:

 ERROR  Failed to compile with 1 error

This dependency was not found:

* vuex in ./node_modules/@testing-library/vue/dist/render.js

To install it, you can run: npm install --save vuex
  [=========================] 100% (completed)

 WEBPACK  Failed to compile with 1 error(s)

Error in ./node_modules/@testing-library/vue/dist/render.js

  Module not found: 'vuex' in '/<my-project-directory>/node_modules/@testing-library/vue/dist'

 ERROR  mochapack exited with code 1.
npm ERR! Test failed.  See above for more details.

adam-gipril avatar Dec 20 '21 18:12 adam-gipril

Hi @adam-gipril! Thanks for the update. I'll take a look soon and ping you back

afontcu avatar Dec 20 '21 18:12 afontcu

@adam-gipril could you provide a small reproduction link – with your mocha setup? I can't find a way to reproduce it in several codebases, and now I'm starting to think it has to do with the test runner somehow

afontcu avatar Dec 21 '21 07:12 afontcu

@afontcu I'll get you something and ping again. Might not be today — the repo in question is private, and I'll see if I can create a similar testing setup in a small public repo.

adam-gipril avatar Dec 21 '21 16:12 adam-gipril

Hi @adam-gipril – and happy new year! Could you check if this had something to do with the test runner?

afontcu avatar Jan 05 '22 13:01 afontcu